Cannot Get FontAwesome Working in IE 11 with MVC 5 - html

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).

Answer 3

Another possibility (which I just spend 4 hours debugging) is that IE-11 is falling back to an older document compatibility mode without your knowledge. The thing to do is make sure the auto-detected target really reads "Edge". In my case it was blank.
The files were downloading.
The MIME types and headers were right.
My document had the right compatibility meta tag set.
I could surf just fine.
The console showed no JS errors (or errors of any kind).
Yet still no Fontawesome.
Turns out if your HD is running low on space as my VM was and the available temp cache falls below a certain size, IE silently reverts to showing all websites in compatibility mode (no matter what your settings are in regard to when to use compatibility mode).

Answer 4

Try this in your web.config. It should work for Font-awesome 4.7:
<system.webServer>
<staticContent>
<remove fileExtension=".svg" />
<remove fileExtension=".eot" />
<remove fileExtension=".woff" />
<remove fileExtension=".woff2" />
<remove fileExtension=".otf" />
<mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
<mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
<mimeMap fileExtension=".woff" mimeType="application/font-woff" />
<mimeMap fileExtension=".woff2" mimeType="font/woff2" />
<mimeMap fileExtension=".otf" mimeType="application/font-sfnt" />
</staticContent>
</system.webServer>