title: Bootstrap 3: font family within a glyphicon span
body: <p>In Twitter Bootstrap 3, given this glyphicon span:</p>
  
  <pre><code>&lt;span class="glyphicon glyphicon-home"&gt;&amp;nbsp;Home&lt;/span&gt;
  </code></pre>
  
  <p>the word 'Home' is rendered in standard sans serif instead of the font of the parent tag.</p>
  
  <p>How can I assign an arbitrary font family to the text inside the span, and still render the icon correctly?</p>
  
  <p>Of course I could move the text outside of the span, but then the <code>&amp;nbsp;</code> 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.</p>
  
  <p>Here's an example:</p>
  
  <p><img src="https://i.stack.imgur.com/pi7bn.png" alt="enter image description here"></p>
  
  <p>That's how Chrome renders the following:</p>
  
  <pre><code>&lt;h1&gt;
  &lt;span class="glyphicon glyphicon-check"&gt;&lt;/span&gt;&amp;nbsp;Scoring
  &lt;span class="glyphicon glyphicon-home"&gt; Home&lt;/span&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>The first span is how I want it to look, but is semantically wrong (IMOHO), while the second looks just wrong.</p>