Question

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

$topic_subject = mysql_real_escape_string($_POST['topic_subject']);
$topic_cat = mysql_real_escape_string($_POST['topic_cat']);
$topic_by = $_SESSION['email'];
$sql = "INSERT INTO topics(topic_subject,
                       topic_date,
                       topic_cat,
                       topic_by)
           VALUES('$topic_subject', 
                   NOW(),
                   '$topic_cat', 
                   '$topic_by'
                       )";

Answer 1

如果使用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>

Answer 2

您可以尝试这样做：

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

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

之后

Answer 3

从http://getbootstrap.com/components/开始，请参阅此说明

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

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

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

Answer 4

根据Bootstrap：

图标类只应用于不包含文本内容且＆gt;没有子元素的元素。

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

之外

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

glyphicon和文本之间的间距？

4 个答案: