Firefox cannot render icons from Font Awesome webfont set
- by ADTC
In Firefox (Windows 7), icons and glyphs that are called from the Font Awesome package do not render properly.
An example of this can be seen on the Khan Academy website. Below the video the icons are shown as boxes with hex codes in them. This means that it isn't getting downloaded by Firefox.
How it appears on Chrome (Windows 7), Safari (Mac OS X) and Stainless (Mac OS X):
I found this question on Stack Overflow that may explain why this happens -- the CSS does use single quotes to enclose the font's src location.
However, I don't have any write access to Khan Academy servers so I can't modify the actual website.
I want to know if this can be fixed in Firefox, and how. I can run Greasemonkey scripts if that would help.
I've already tried manually downloading the font and adding it to Windows' Fonts folder but this does not help.
For reference, the CSS that sets this font up (not processed properly by Firefox) is:
@font-face
{
font-family:'FontAwesome';
src:url('./fontawesome-webfont.eot');
src:url('./fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('./fontawesome-webfont.woff') format('woff'),
url('./fontawesome-webfont.ttf') format('truetype'),
url('./fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight:normal;
font-style:normal
}
[class^="icon-"]:before,
[class*=" icon-"]:before
{
font-family:FontAwesome;
font-weight:normal;
font-style:normal;
display:inline-block;
text-decoration:inherit
}
