I'm developing a web page and found FontAwesome as a pretty neat way to add nice icons to things, however by default font downloads are blocked by the NoScript plugin for Firefox.
This would not be an issue for normal fonts, but FontAwesome uses unicode characters which are deliberately outside the usual printable range of most fonts, so adding a font stack to the CSS (EG: font-family: FontAwesome, sans-serif;) will not work as all the icons just render as hex-squares.
I realise I can tweak NoScript to allow font downloads, but that is not the ideal solution for all users - I would rather the page degrade gracefully.
Of course, it would be easy to do this with Javascript/jQuery, but of course if it's NoScript that's doing the blocking that's no help either, and it fails the test if the user doesn't have javascript enabled.
What would be ideal would be to have some CSS style/rule that acts as the fallback for any FontAwesome objects, replacing them with some basic character or even just not displaying anything.
For those unfamiliar with FontAwesome / TL;DR:
All FontAwesome icons have the CSS class "fa":
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
}
FontAwesome loads the custom font like this (I removed
@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
}
And then a particular FontAwesome icon will have its own specific class that inserts the relevant unicode character, for example:
.fa-star:before {
content: "";
}
The HTML for the icon will look like this:
<i class="fa fa-star"></i>
So the problem here is: We need some way, preferably in CSS, to replace, remove, or hide the content of items with the CSS class "fa" if the typeface "FontAwesome" is NOT loaded.
sans-serifwork? FontAwesome uses special unicode characters...<noscript>tag is enabled).