title: Glyphicon font-family assigned to text when closing span element using XHTML syntax
body: <p>Playing with Bootstrap. See the code at this page:</p>
  <p><a href="http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_glyphs&amp;stacked=h" rel="nofollow noreferrer">http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_glyphs&amp;stacked=h</a></p>
  <p>It displays a Print button with a glyphicon before text &quot;Print&quot;:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Print icon on a styled link button:
    &lt;a href="#" class="btn btn-success btn-lg"&gt;
      &lt;span class="glyphicon glyphicon-print"&gt;&lt;/span&gt; Print 
    &lt;/a&gt;
  &lt;/p&gt; </code></pre>
  </div>
  </div>
  </p>
  <p>This renders nicely with text &quot;Print&quot; using font-family:
  'Helvetica Neue', Helvetica, Arial, sans-serif'</p>
  <p>However, this code should be semantically the same (XHTML / close span tag in element itself):</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Print icon on a styled link button:
    &lt;a href="#" class="btn btn-success btn-lg"&gt;
      &lt;span class="glyphicon glyphicon-print" /&gt; Print 
    &lt;/a&gt;
  &lt;/p&gt; </code></pre>
  </div>
  </div>
  </p>
  <p>But it renders the text in a different font-family 'Glyphicons Halflings'. You can try making the change in the w3schools.com editor to see the effect.</p>
  <p>Looking at Chrome inspector, apparently the Print text was included as part of the span and inherited the font-family from the glyphicon.</p>
  <p><b>So, why can't the span be closed using the XHTML syntax &lt;span ... /&gt;?
  Is there a particular reason for it, or something else I'm missing?</b></p>