Sporadic Font-Icons on Internet Explorer 9

Question

I have a website using Glyphicons and Font-Awesome font icons on two different pages, with the same behavior: The icons do not show up in IE9, but work perfectly in Chrome/Firefox.

Things that do work:

• Loading icons from an external CDN

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"  rel="stylesheet">
  

  Loading the font-awesome css/fonts from an external CDN causes the icons to work reliably. Unfortunately, this website is for an intranet, and will not have internet access. This is a no-go.

  • Loading the page via a redirect

  For some reason, whenever I redirect to one of the pages, IE9 aborts GETing some of the css files, only to reload them afterwards.

  In this case, the icons show up, as expected. So I'm guessing the abnormal requests are related. But loading the page the normal way causes the icons to disappear, and the css to load normally. If anyone can explain this to me, that'd be great.

Things that don't work:

• Configuring the server to set Content-Type properly for the font files. I've matched the mime-types used on the CDN, so even if I have the wrong values, it won't fix the issue
• Turning off compatibility view in IE
• Reducing IE security settings
• Adding html5shiv/respond.js to the page (html5shiv)
• Moving the font-awesome css file somewhere else on the page.

• Loading the glyphicon eot font file manually on the page, like so:

  <link rel="stylesheet" type="application/vnd.ms-fontobject" href="/some/absolute_path/fonts/glyphicons-halflings-regular.eot"/>
  

Things I've looked at:

These may or may not be helpful, but seem to represent the state of things.

• compatibility view
• security settings
• html5shiv
• Bad redirect issues:
  • Unsolved SO question
  • Unsolved MSDN question

Answer 1

This seems like the bug reported at github for Font Awesome. Check out thorst's solution it seems to fix it for most people.

For the link-phobic:

I had to change font-awesome.css

From:

src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); 

To:

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');