Font Awesome fonts show up as boxes on IE8

问题:

So I am using Font Awesome in a project and in testing I'm running into issues with IE8.

On Windows IE9, Chrome and Firefox show the font properly (As does Firefox, Chrome and Safari on OS X) but IE8 on Windows has a problem where I get a box in place of the font.

My code is:

I have the four font files...

• fontawesome-webfont.eot
• fontawesome-webfont.svg
• fontawesome-webfont.ttf
• fontawesome-webfont.woff

...where they belong and they are readable by the world (755 permissions). What am I missing? Do I have to do something with compatibility view in IE8?

The same computer views the fonts on the Font Awesome site just fine so it has to be something I'm doing wrong.

As requested, a copy of font-awesome.css is here: font-awesome.css. It is more or less what I downloaded from them with the exception of the path to the font files.

Based on @Abody97 I added https://html5shim.googlecode.com/svn/trunk/html5.js into the mix (Code above has been updated). Still no luck, even after a refresh and a delete cache refresh.

回答1:

I had the same problem and found a solution, I'll post it here in case anyone still needs it.

The problem was that IE failed to load the font files, it was constructing weird GET requests that returned 404 errors.

Using the trick found here: http://www.fontspring.com/blog/fixing-ie9-font-face-problems I was able to fix the issue.

Add ?#iefix to the eot url in the CSS that contains the font-face (in this case font-awesome.css)

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */      url('webfont.woff') format('woff'), /* Modern Browsers */      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } 

回答2:

This appears to be a really common issue and according to this discussion has to do with the character being attached using :before. I actually found the easiest way to get it working in IE 8 is to not use the fa-name class and insert the character manually.

e.g. Instead of:

use:

 

The character codes can be found on the Font Awesome Cheatsheet. This seems to work all the time, no matter what IE version.

Hope this helps someone,

Jason

回答3:

Try adding this to your head before including CSS:

回答4:

just had the same problem and solved it by setting the IE8 "security level" to something below "High".

In general, I could reproduce the "boxes" by making the font files (eot, woff, ttf...) "not available" (e.g. resulting in a 404 response) - so I assume, on securiy level "High" they're just not loaded...

回答5:

It turns out that there was an extra tag being generated by an included file that was the source of my problems. So, in my final file I had both AND The extra tag was throwing IE into quirks mode which cause the font-awesome icon issue I was having.

Eliminating that rogue and verifying my headers were set correctly fixed everything for me.

I am now using a boilerplate set of header tags on all pages:

Before I had this on one page:

回答6:

Making Cache control in the response header as private for the font file worked perfectly in IE8 for me. More explanation on this can be found here - where he explains how he solved for PDF files (Can't display PDF from HTTPS in IE 8 (on 64-bit Vista)).

Hope this helps.

回答7:

Under IIS (MVC environment) I had to add the following rule to my Web.config:

回答8:

IE under 9 version not support woff file format. Probably that is answer why you can't get them on IE8

回答9:

The only thing that worked for me was this:

https://github.com/FortAwesome/Font-Awesome/issues/2324

Combined with the other answer from Jason: e.g. Instead of:

use:

 

回答10:

It is not only IE, all the browsers have the same issue.

The funny thing is you need to put your files in the right location.

This means you need the below structure:

folder levels look like this:      level 1                 level 2  level 3  ----index.html   ----font-awesome-4.2.0  ----css ---- fontawesome.css                          ----css ---- fontawesome.min.css                           ----fonts----...                                    ----...                           ----... 

and then put the link sylte in your index.html as

in between head

a very important note is: DO NOT try to COMBINE fontawesome folder and any other folder. Keep them separate.

now test it, and everything is good to go.

文章来源: Font Awesome fonts show up as boxes on IE8