Cannot Get FontAwesome Working in IE 11 with MVC 5

Question

I have a new MVC 5 Project and I am trying to get FontAwesome to display icons from the _Layout page. It works fine in Chrome, Firefox, and even the Page Inspector in Visual Studio. When I launch the site in IE 11, it just shows a blank space.

What I've tried so far:

• Making sure the font-awesome.css and fonts are being downloaded to the browser
• Checking the paths to the directory where the fonts exists is correct
• Loading from the BundleConfig and just putting the links directly on the Layout page
• Installing FontAwesome using Nuget and tried an Nuget Html Helper for FontAwesome
• Tried added MIME types for the fonts to the web.config
• Tried using CDNs and Fully qualified paths instead of relative links
• Tried several variations of the markup
• Validated no errors in the Console or 404s in the Network Debugger

I'm not sure what else I can try and feel like I've spent WAAAY to much time just trying to get some icons to work. It's just frustrating because the site looks really good in Chrome and Firefox.

I am using a Template I downloaded from WrapBootstrap, but their examples work in IE 11, and I've tried to mimick their markup as best I can.

Below is the markup in the Layout page I am using and this comes directly from their Template and it works in FF/Chrome.

<i class="icon-dashboard"></i>

and I tried

<i class="fa fa-dashboard"></i>

Any guidance on troubleshooting would be appreciated.

Answer 1

It's not really that complicated. If it works in Chrome and Firefox it will work in IE11. My guess is that you've either switched the rendering engine to IE7 at some point and forgot, accidentally clicked the compatibility mode button (which renders as IE7), or otherwise are working in compatibility mode (depending on your local or GP settings, if this is a work machine, compatibility mode may be the default for local and/or intranet sites).

Answer 2

I just had this issue but found that it was actually caused by the fact the font files reside on a different subdomain. Adding an Access-Control-Allow-Origin header when serving the fonts solves the problem.

Apache .htaccess snippet

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

nginx virtual host file snippet

location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

More information can be found here (original source for snippets).