Font Awesome fonts show up as boxes on IE8

Question

So I am using Font Awesome in a project and in testing I\'m running into issues with IE8.

On Windows IE9, Chrome and Firefox show the font properly (As does Firefox,

Answer 1

Making Cache control in the response header as private for the font file worked perfectly in IE8 for me. More explanation on this can be found here - where he explains how he solved for PDF files (Can't display PDF from HTTPS in IE 8 (on 64-bit Vista)).

Hope this helps.

Answer 2

The only thing that worked for me was this:

https://github.com/FortAwesome/Font-Awesome/issues/2324

Combined with the other answer from Jason: e.g. Instead of:

<i class="fa fa-user fa-lg"></i>

use:

<i class="fa fa-lg">&#xf007;</i>

Answer 3

I had the same problem and found a solution, I'll post it here in case anyone still needs it.

The problem was that IE failed to load the font files, it was constructing weird GET requests that returned 404 errors.

Using the trick found here: http://www.fontspring.com/blog/fixing-ie9-font-face-problems I was able to fix the issue.

Add ?#iefix to the eot url in the CSS that contains the font-face (in this case font-awesome.css)

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Answer 4

just had the same problem and solved it by setting the IE8 "security level" to something below "High".

In general, I could reproduce the "boxes" by making the font files (eot, woff, ttf...) "not available" (e.g. resulting in a 404 response) - so I assume, on securiy level "High" they're just not loaded...

Answer 5

Under IIS (MVC environment) I had to add the following rule to my Web.config:

   <system.web>
    <httpHandlers>
      <add verb="GET" path="*.eot" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.svg" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.ttf" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.woff" type="System.Web.StaticFileHandler" />
      <add verb="GET" path="*.otf" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>

Answer 6

IE under 9 version not support woff file format. Probably that is answer why you can't get them on IE8