Bootstrap 3: glyphicon中的字体族系问题

Question

在Twitter Bootstrap 3中，考虑到这个glyphicon span:

<span class="glyphicon glyphicon-home">&nbsp;Home</span>

“Home”一词采用标准无衬线字体呈现，而不是父标签的字体。

我该如何为span内的文本分配任意字体族，并仍然正确呈现图标？

当然，我可以将文本移动到span之外，但这样 就不会被识别了，对吧？无论如何，从语义角度来看，保持由图标描述的文本位于span内似乎是合理的。

以下是一个示例：

这是Chrome如何呈现以下内容的方式：

<h1>
<span class="glyphicon glyphicon-check"></span>&nbsp;Scoring
<span class="glyphicon glyphicon-home"> Home</span>
</h1>

第一个span标签是我想要的样式，但在语义上不太正确（在我看来），而第二个则完全不正确。

- Giuseppe

---

顺便提一下，你应该使用CSS来设置图标和文本之间的填充，而不是使用 。我们在基础CSS中使用span.glyphicon {margin-right: 10px}（假设我们通常将图标放在文本之前）。 - dty

Answer 1

由于图标是使用：before伪元素插入的，因此您可以使glyphicon字体仅适用于该元素而不是实际元素：

.glyphicon {
    font-family: inherit;
}
.glyphicon:before{
    font-family:'Glyphicons Halflings';
}

演示代码

- omma2289

---

五年后，这仍然有所帮助。 :) - HPWD

Answer 2

像这样

<span class="glyphicon glyphicon-home"> home</span>

- Falguni Panchal

---

“Home”这个词仍然以通用无衬线字体呈现，而不是继承封闭标签的字体系列。 - Giuseppe

Answer 3

也许不是最语义化的解决方案，但它非常简单且有效。

用 nowrap 包装整个东西。

HTML

<span class="nobr">
    <span class="glyphicon glyphicon-check"></span>&nbsp;Scoring
</span>

CSS

.nobr {
    white-space: nowrap;
}

- Jess

---

请不要使用<nobr> HTML标签。它没有官方支持。 - Jess