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';
}

演示小提琴