How to debug Font-Awesome icons? - html

Question

I have been using Font-Awesome and its icons for a while now, and it has been working just fine.
Today, however, it only displays blank squares instead of icons. I have read many other related questions, but none of those cases apply to me. As I said, it worked before, and I did not make any changes to the Font-Awesome files (I am using a downloaded version of FA, not the CDN) or to the HTML templates that display the icons.
So I want to start debugging the process. One example is this:
<i style="color: orange" class="fa fa-exclamation-triangle"></i>
However, I cannot find any urls in the CSS of the affected elements, when inspecting with Chrome. What I do see on every icon element though, is something like this:
.fa-warning:before, .fa-exclamation-triangle:before {
content: "\f071";
}
Where \f071 is the "blank square" character.
So my question is:
Where do the icons come from, and how can I debug no-show FA icons, in general?
UPDATE
I found out that \f071 and its friends are actually symbols referring to icons, stored in the font files. The fact that they show up as blank squares seems to indicate that the font has not been loaded successfully.
However, I checked and the client downloads fonts/fontawesome-webfont.woff and fonts/fontawesome-webfont.ttf just fine.
Also, the elements' font is correctly set through the fa class:
font-family: normal normal normal 14px/1 FontAwesome
What else is necessary to make sure, a font has loaded successfully?
UPDATE
I solved it: Font file(s) were corrupted/not delivered properly. That's always something to check out first!

Answer 1

FontAwesome is... a font!
This means you'll have a set of characters, which are (visually) icons. These characters are generally contained between \e000 and \f8ff (which are private use area's characters).
When you see this code:
.fa-warning:before, .fa-exclamation-triangle:before {
content: "\f071";
}
It means the \f071 character will be displayed in the pseudo-element. It's coupled with this code, which loads FontAwesome font for .fa elements:
#font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Seeing a white square can means:
your font is not loaded (most common problem)
your font is not well created (re-download it)
your CSS is missing the font declaration (#font-face {})
your CSS is missing the font call (font: normal normal normal 14px/1 FontAwesome;)
How to debug:
Check that you're using the right class name (.fa .fa-foo)
Check that your FontAwesome CSS is loaded (it should be the case as you're seeing the square)
Double-check that your font is loaded. There could have a path issue, like font/ folder instead of fonts/
Have a look on your .htaccess. People often makes strong rules which affect assets.
If everything is ok, try to re-download the font (font files could have been corrupted)