Bootstrap 3: font family within a glyphicon span - css

Question

In Twitter Bootstrap 3, given this glyphicon span:
<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:
<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.

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

Answer 2

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

Answer 3

Maybe not the most semantic solution, but it is super easy and works.
Wrap the whole darn thing in a span with nowrap.
HTML
<span class="nobr">
<span class="glyphicon glyphicon-check"></span> Scoring
</span>
CSS
.nobr {
white-space: nowrap;
}