Bootstrap 3: font family within a glyphicon span

Question

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:

That's how Chrome renders the following:

<h1>
<span class="glyphicon glyphicon-check"></span>&nbsp;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.

Answer 1

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;
}
.glyphicon:before{
    font-family:'Glyphicons Halflings';
}

Demo fiddle