title: How to debug Font-Awesome icons?
body: <p>I have been using Font-Awesome and its icons for a while now, and it has been working just fine.</p>
  
  <p>Today, however, it only displays blank squares instead of icons. I have read many other related questions, but none of those cases apply to me. As I said, it worked before, and I did not make any changes to the Font-Awesome files (I am using a downloaded version of FA, not the CDN) or to the HTML templates that display the icons.</p>
  
  <p>So I want to start debugging the process. One example is this:</p>
  
  <pre><code>&lt;i style="color: orange" class="fa fa-exclamation-triangle"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>However, I cannot find any urls in the CSS of the affected elements, when inspecting with Chrome. What I do see on every icon element though, is something like this:</p>
  
  <pre><code>.fa-warning:before, .fa-exclamation-triangle:before {
      content: "\f071";
  }
  </code></pre>
  
  <p>Where <code>\f071</code> is the "blank square" character.</p>
  
  <p>So my question is:</p>
  
  <p>Where do the icons come from, and how can I debug no-show FA icons, in general?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I found out that <code>\f071</code> and its friends are actually symbols referring to icons, stored in the font files. The fact that they show up as blank squares seems to indicate that the font has not been loaded successfully.</p>
  
  <p>However, I checked and the client downloads <code>fonts/fontawesome-webfont.woff</code> and <code>fonts/fontawesome-webfont.ttf</code> just fine.</p>
  
  <p>Also, the elements' font is correctly set through the <code>fa</code> class:</p>
  
  <pre><code>font-family: normal normal normal 14px/1 FontAwesome
  </code></pre>
  
  <p>What else is necessary to make sure, a font has loaded successfully?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I solved it: Font file(s) were corrupted/not delivered properly. That's always something to check out first!</p>