title: Why do my icons show up as blank squares?
body: <p>I've created a new (simple) website in IIS8. I've created a simple <strong>Index.html</strong> and put in jQuery, Bootstrap3 and Font-Awesome 4.0.0 to start playing with.</p>
  
  <p>However my Font-Awesome icons show up as nothing (squares):</p>
  
  <p><img src="https://i.stack.imgur.com/Fy069.png" alt="Demo image"></p>
  
  <p><strong>My folder structure is</strong></p>
  
  <pre><code>/
    - Index.html
    - bootstrap.css
    - bootstrap.js
    - jquery-2.0.3.js
    /css
      - font-awesome.css
    /fonts
      - FontAwesome.otf
      - fontawesome-webfont.eot
      - fontawesome-webfont.svg
      - fontawesome-webfont.ttf
      - fontawesome-webfont.woff
  </code></pre>
  
  <p><strong>My HTML Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Simple Site&lt;/title&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="bootstrap.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="slate.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/font-awesome.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;h1&gt;This is a test&lt;/h1&gt;
          &lt;h1&gt;User Icon: &lt;span class="fa-user"&gt;&lt;/span&gt;&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript" src="jquery-2.0.3.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="bootstrap.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Font-Awesome @font-face is:</strong></p>
  
  <pre><code>@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.0.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&amp;v=4.0.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.0.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  </code></pre>
  
  <p><strong>Chrome shows that no .woff file (or anything) is even downloaded</strong> (no 404 either)</p>
  
  <p><img src="https://i.stack.imgur.com/2MNaX.png" alt="Chrome network"></p>
  
  <p>I've tried</p>
  
  <ul>
  <li>IE 11, Firefox, Chrome</li>
  <li>Putting the site on a live server</li>
  <li>Changing MIME type of .woff to
  
  <ul>
  <li><code>font/x-woff</code></li>
  <li><code>application/x-font-woff</code></li>
  <li><code>application/font-woff</code></li>
  <li><code>font/woff</code></li>
  </ul></li>
  <li>Full read permissions to the App Pool</li>
  <li>Changing the url() of the @font-face from <code>../fonts/</code> to <code>fonts/</code></li>
  <li>Removing all other unnecessary css and js files</li>
  <li>Full page refreshes, clearing cache</li>
  </ul>