title: Font Awesome fonts show up as boxes on IE8
body: <p>So I am using <a href="http://fortawesome.github.com/Font-Awesome/" rel="noreferrer">Font Awesome</a> in a project and in testing I'm running into issues with IE8.</p>
  
  <p>On Windows IE9, Chrome and Firefox show the font properly (As does Firefox, Chrome and Safari on OS X) but IE8 on Windows has a problem where I get a box in place of the font.</p>
  
  <p><img src="https://i.stack.imgur.com/dKqU3.jpg" alt="enter image description here"></p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;!--[if lt IE 7 ]&gt;&lt;html class="ie ie6" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 7 ]&gt;&lt;html class="ie ie7" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if IE 8 ]&gt;&lt;html class="ie ie8" lang="en"&gt; &lt;![endif]--&gt;
  &lt;!--[if (gte IE 9)|!(IE)]&gt;&lt;!--&gt;&lt;html lang="en"&gt; &lt;!--&lt;![endif]--&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Site title&lt;/title&gt;
  
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;link href=".../css/css.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="../css/print.css" rel="stylesheet" type="text/css" media="print"&gt;
  
      &lt;link href="../apple-touch-icon.png" rel="apple-touch-icon-precomposed"&gt;
      &lt;link href="../css/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="../css/jquery-ui-overrider.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato|Michroma&amp;subset=latin&amp;v2" rel="stylesheet" type="text/css"&gt;
      &lt;link href="../css/prettify.css" rel="stylesheet" type="text/css"&gt;
      &lt;link href="../css/font-awesome.css" rel="stylesheet" type="text/css"&gt;
      &lt;!--[if IE 7]&gt;
          &lt;link href="../css/font-awesome-ie7.css" rel="stylesheet"&gt;
      &lt;![endif]--&gt;
  </code></pre>
  
  <p>I have the four font files...</p>
  
  <ul>
  <li>fontawesome-webfont.eot</li>
  <li>fontawesome-webfont.svg</li>
  <li>fontawesome-webfont.ttf</li>
  <li>fontawesome-webfont.woff</li>
  </ul>
  
  <p>...where they belong and they are readable by the world (755 permissions).
  What am I missing?  Do I have to do something with compatibility view in IE8?</p>
  
  <p>The same computer views the fonts on the Font Awesome site just fine so it has to be something I'm doing wrong.</p>
  
  <p>As requested, a copy of font-awesome.css is here: <a href="http://reljac.com/so_1/font-awesome.css" rel="noreferrer">font-awesome.css</a>.  It is more or less what I downloaded from them with the exception of the path to the font files.</p>
  
  <p>Based on @Abody97 I added <a href="https://html5shim.googlecode.com/svn/trunk/html5.js" rel="noreferrer">https://html5shim.googlecode.com/svn/trunk/html5.js</a> into the mix (Code above has been updated).  Still no luck, even after a refresh and a delete cache refresh.</p>