css - Bootstrap 3：字形图标范围内的字体系列

Question

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

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

“Home”这个词以标准的无衬线字体呈现，而不是父标签的字体。

如何将任意字体系列分配给跨度内的文本，并且仍然正确呈现图标？

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

这是一个例子：

这就是 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';
}

演示小提琴

Answer 2

像这样

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

Answer 3

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

将整个该死的东西包裹在一个跨度中nowrap。

HTML

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

CSS

.nobr {
    white-space: nowrap;
}