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"?
问题:
回答1:
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!
回答2:
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
回答3:
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 "*"
回答4:
In my case it was a display: table set on the element. Removing it resolved an issue.
回答5:
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' 回答6:
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!