Giuseppe Giuseppe - 2 years ago 124
CSS Question

Bootstrap 3: font family within a glyphicon span

In Twitter Bootstrap 3, given this glyphicon span:

<span class="glyphicon glyphicon-home">&nbsp;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:

enter image description here

That's how Chrome renders the following:

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

The first span is how I want it to look, but is semantically wrong (IMOHO), while the second looks just wrong.

Answer Source

Since the icons are inserted using the :before pseudo-element you can make it so that the glyphicon font only applies to that instead of the actual element:

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

Demo fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download