Bootstrap 3：glyphicon范围内的字体系列

Question

在Twitter Bootstrap 3中，给出了这个glyphicon span：

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

单词'Home'以标准sans serif呈现，而不是父标记的字体。

如何将任意字体系列分配给范围内的文本，并仍然正确渲染图标？

当然我可以将文字移到跨度之外，但 不会被尊重，是吗？无论如何，从语义角度来看，将图标所描述的文本保持在跨度内似乎是合理的。

以下是一个例子：

这就是Chrome提供以下内容的方式：

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

第一个范围是我希望它看起来如何，但在语义错误（IMOHO），而第二个看起来是错误的。

Answer 1

由于使用:before伪元素插入图标，因此您可以将其设置为仅使用glyphicon字体而不是实际元素：

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

<强> Demo fiddle

Answer 2

喜欢这个

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

<强>

Answer 3

也许不是最具语义性的解决方案，但它非常容易且有效。

用nowrap包裹整个darn的东西。

HTML

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

CSS

.nobr {
    white-space: nowrap;
}