Firefox not displaying icons in KhanAcademy
- by ADTC
If you don't know what Khan Academy is, check it out. It's awesome. (For testing purpose you may view any video on the website.)
My problem -- it's a minor problem, but annoying -- is that in Firefox (Windows 7), the icons below the video are shown as boxes with hex codes in them. This means the icons come from some font that isn't getting downloaded by Firefox.
How it appears on Chrome (Windows 7), Safari (Mac OS X) and Stainless (Mac OS X):
I checked out the source and found that the font in question is called "FontAwesome". I found this question in S.O. 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.
Also, would manually downloading the font and adding it to Windows' Fonts folder help? I tried this with the TTF font, and it 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
}
