twitter-bootstrap Bootstrap 3：字形跨度内的字体系列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18526828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3: font family within a glyphicon span
提问by Giuseppe
In Twitter Bootstrap 3, given this glyphicon span:
在 Twitter Bootstrap 3 中，鉴于此字形跨度：
<span class="glyphicon glyphicon-home"> Home</span>
the word 'Home' is rendered in standard sans serif instead of the font of the parent tag.
“家”这个词以标准的无衬线字体呈现，而不是父标签的字体。
How can I assign an arbitrary font family to the text inside the span, and still render the icon correctly?
如何为跨度内的文本分配任意字体系列，并仍然正确呈现图标？
Of course I could move the text outside of the span, but then the would not be honored, would it? Regardless, from a semantic standpoint it would seem reasonable to keep the text described by the icon inside the span.
当然，我可以将文本移到跨度之外，但是这样 就不会受到尊重，是吗？无论如何，从语义的角度来看，将图标描述的文本保留在跨度内似乎是合理的。
Here's an example:
下面是一个例子：
That's how Chrome renders the following:
这就是 Chrome 呈现以下内容的方式：
<h1>
<span class="glyphicon glyphicon-check"></span> Scoring
<span class="glyphicon glyphicon-home"> Home</span>
</h1>
The first span is how I want it to look, but is semantically wrong (IMOHO), while the second looks just wrong.
第一个跨度是我想要的样子，但在语义上是错误的（恕我直言），而第二个看起来是错误的。
回答by koala_dev
Since the icons are inserted using the :beforepseudo-element you can make it so that the glyphicon font only applies to that instead of the actual element:
由于图标是使用:before伪元素插入的，因此您可以使 glyphicon 字体仅适用于该元素而不是实际元素：
.glyphicon {
font-family: inherit;
}
.glyphicon:before{
font-family:'Glyphicons Halflings';
}
回答by Falguni Panchal
Like this
像这样
<span class="glyphicon glyphicon-home"> home</span>
回答by Jess
Maybe not the most semantic solution, but it is super easy and works.
也许不是最语义化的解决方案，但它非常简单且有效。
Wrap the whole darn thing in a span with nowrap.
将整个该死的东西用nowrap.
HTML
HTML
<span class="nobr">
<span class="glyphicon glyphicon-check"></span> Scoring
</span>
CSS
CSS
.nobr {
white-space: nowrap;
}
