字形和文本之间的间距？答案

【问题标题】：Spacing between the glyphicon and text?字形和文本之间的间距？
【发布时间】：2020-05-12 14:17:00
【问题描述】：

我正在尝试添加一个字形图标作为电子邮件地址链接的一部分。图标显示，但图标和电子邮件地址文本之间没有空格（我希望超链接同时包含图标和文本......包括空格）。完成此任务的最佳方法是什么？

       <a href="mailto:someone@somewheredotcom" title="Some Email">
        <span class="glyphicon glyphicon-envelope">someone@somewheredotcom</span>
    </a>

【问题讨论】：

标签： email spacing glyph

【解决方案1】：

您可以尝试这样做：

.glyphicon-envelope:before {
  margin-right: 5px;
}

请注意，您的自定义 css 文件应包含在 bootstrap.css 之后

【讨论】：

这对我有用。谢谢。我做到了：.glyphicon:before { margin-right: 5px; }

【解决方案2】：

如果您只使用glyphicon，只需在</span> 标记后添加一个空格，如下所示

<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Individual</a>

如果您使用 glyphicon 和 font awesome 库参考，只需在课程末尾添加 fa-fw。

<a href="mailto:someone@somewheredotcom" title="Some Email">
    <span class="glyphicon glyphicon-envelope fa-fw">someone@somewheredotcom</span>
</a>

【讨论】：

【解决方案3】：

来自http://getbootstrap.com/components/，见此说明

请务必在图标和文本之间留一个空格，以便正确填充。

因此，您可以根据需要修改 CSS，例如使用 Bogdan 的想法，或者只是在图标和文本之间添加 &nbsp;：

<a href="mailto:someone@somewheredotcom" title="Some Email">
    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp;someone@somewheredotcom
</a>

【讨论】：

【解决方案4】：

根据引导：

图标类只能用于不包含文本内容且>没有子元素的元素。

您应该将电子邮件地址放在 span 之外：

<span class="glyphicon glyphicon-envelope fa-fw"></span>someone@somewheredotcom

【讨论】：

你说的是真的，但它不会像 OP 正在寻找的那样添加间距。