Why do my Font Awesome icons show up as blank squares?
So you've decide to use Font Awesome for some great scalable icons. You download them, maybe you use the Bootstrap CDN.
- You're not an idiot, but you only get black squares.
- You look at the F12 Developer Tools and you can see the fonts are getting downloaded.
- You're super advanced, so you check that mime/types are correct on your web server and confirm them in the HTTP headers.
- You've burned a half hour just pressing CTRL-F5 and clearing browser caches.
- You're about to smack someone.
- You're trying different browsers, checking the wire, reading the docs, googling with bing for crying out loud.
Then you realize that you need to have class="fa" as well as whatever the icon's class is.
So, not just
<i class="fa-pencil" title="Edit"></i>
But in fact, you need
<i class="fa fa-pencil" title="Edit"></i>
I hereby declare this the Foux du Fa Fa rule of Font Awesome and blog it so I don't forget.
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
FYI FontAwesome updated to 4.0.2 today.
You have to click the What's new link at FontAwesome page http://fontawesome.io/whats-new/ and then click the link inside the section "Upgrading from 3.2.1?"
icon-* -> fa fa-* (NOTE: fa base class is only needed by icons)
You usually find "The Awesome" - today you found the "Font Awesome"...
I had the font awesome working fine on a home page, but when I moved the same html to a sub folder of course it did not work right at first, so I updated the paths to css in my header - seemed to fix most things with the page, but then font awesome displayed a box with code instead of the icon.
After messing with the path the the style/css it was weird, as sometimes it showed nothing, then other times it showed the code box. So I assumed that I had the code right when a box was displayed.
as you mentioned about googling binging I came across things that made me consider server cross domain issue and all kinds of things.
Then out of altered mind shoots and giggles, I copied the whole folder for font awesome into my sub directory, and then bam is works now. Weird.
take a look : http://blog.studyfoyer.org/parity-checker-nanoelectronics.php
i tried everything, even downgrading bootstrap... :D
Thanks a lot ;)
Comments are closed.
The twitter bootstrap mentions it's for performance reasons, so I assume Font Awesome is using the same trick.