Bootstrap Font Awesome Icons not working on IE9, IE10

Adam Zolo — Sun, 08 Sep 2013 13:07:37 +0000

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.

Font Awesome – Other Things

Bootstrap Font Awesome Icons not working on IE9, IE10