title: Glyphicons rendering as empty box
body: <p>I'm using the excellent Twitter bootstrap library with Glyphicons, however all the icons are rendering as empty squares, like so:</p>
  
  <p><img src="https://i.stack.imgur.com/ODQnx.png" alt="enter image description here"></p>
  
  <p>I've uploaded the Glyphicons fonts to my web root and changed the <code>bootstrap.css</code> file to point to their correct locations, which I've verified because they have <code>200 OK</code> requests in Chrome's dev tools:</p>
  
  <p><img src="https://i.stack.imgur.com/dLCzo.png" alt="enter image description here"></p>
  
  <p>This is the markup I'm using:</p>
  
  <pre><code>&lt;a href="http://www.mysite.com/download" class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt; Download to Computer&lt;/a&gt;
  </code></pre>
  
  <p>Any ideas why the font may be rendering as empty boxes? Previous answers on StackOverflow all point to incorrect paths to the fonts, which isn't the case here as the paths are correct.</p>