Font Awesome 4.2.0 not rendering in IE11 with Compatibility Mode turned "On"

Font Awesome 4.2.0 renders perfectly in Chrome, Firefox, Safari, Opera, and Internet Explorer 11 (but only with Compatibility Mode turned "Off"). With Compatibility Mode turned "On" no glyphicons render. I've tried using a tried-and-true Font Awesome 4.2.0 CDN that I've used in other projects, using the Font Awesome CSS, and adding the <meta http-equiv="X-UA-Compatible" content="IE=edge"> in the <head> as suggested from a GitHub post to allow the glyphs to render with Compatibility Mode turned "On". None of those solutions work and having Compatibility Mode turned "Off" is not an option for this project. So, in conclusion, my question is this. How can I have Font Awesome 4.2.0 render in Internet Explorer 11 with Compatibility Mode turned "On"?

Answers


Found the solution. <meta http-equiv="X-UA-Compatible" content="IE=edge"> needs to be placed as the FIRST tag in the <head> in order for it to work. Hope this helps anyone else who has this issue!


I had this issue with IE 11 on my development machine (but not elsewhere). My Internet Options were set to not allow Font downloads. Probably won't be common, as I'm on Windows Server, but if so try this to fix it:

[Gear] >> Internet Options >> Security >> Custom Level >> Downloads >> Font Download >> Enable


I have also faced same issue. In my case, below fix works :

Firefox (and, to a lesser extent, Chrome and IE) has an issue where it fails to download the font and so doesn't display any of the icons correctly.

A very easy fix has been identified in a number of locations, cdnjs/cdnjs#755 being one of them.

The fix is to add the following to the start of the font-awesome.css file (before the @font-family call):

Header set Access-Control-Allow-Origin "*"

Source : https://github.com/thingles/foreground/issues/222


I faced the same Issue and I just added the following Link in the Tag and it worked.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Hope this helps!


In my case it was a display: table set on the element. Removing it resolved an issue.


Look into removing the version tags from the end of the files. Those tags cause IE to have fits.

change this...

../fonts/fontawesome-webfont.eot?v=4.3.0'

to this...

../fonts/fontawesome-webfont.eot'

Need Your Help

Selenium - Get elements html rather Text Value

c# html-parsing selenium-webdriver

Via that code i have extracted all desired text out of a html document

nth ugly number

algorithm math primes factors hamming-numbers

Numbers whose only prime factors are 2, 3 or 5 are called ugly numbers.