Bootstrap Font Awesome Icons not working on IE9, IE10

No Comments

If you are using an older version of Font Awesome you may discover an issue occurring on IE 9 and IE 10, when font is displayed as squares without any text. After some extensive googling the issue was resolved by modifying font-awesome.css and changing the format('eot') to format('embedded-opentype') for the fontawesome-webfont.eot:

from this:

@font-face {
font-family: "FontAwesome";
src: url('../font-awesome/fontawesome-webfont.eot');
src: url('../font-awesome/fontawesome-webfont.eot?#iefix') format('eot'), url('../font-awesome/fontawesome-webfont.woff') format('woff'), url('../font-awesome/fontawesome-webfont.ttf') format('truetype'), url('../font-awesome/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}

to this:

@font-face {
font-family: "FontAwesome";
src: url('../font-awesome/fontawesome-webfont.eot');
src: url('../font-awesome/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font-awesome/fontawesome-webfont.woff') format('woff'), url('../font-awesome/fontawesome-webfont.ttf') format('truetype'), url('../font-awesome/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}

Even better, you can update to the latest version of Font Awesome, which already has this fix.

Categories: Web Tags: Tags: