Why do my Font Awesome icons show up as blank squares?
Sponsored By
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.
Sigh.
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>
Then...it works.
I hereby declare this the Foux du Fa Fa rule of Font Awesome and blog it so I don't forget.
Sponsor: Big thanks to Telerik Icenium for sponsoring the feed this week! Build and publish iOS & Android apps with Visual Studio using only HTML5 & JavaScript! Telerik Icenium now includes Visual Studio integration. Start a 30 day trial with support now!
About Scott
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.
About Newsletter
Hosting By
Nice! Good reference to Flight of the Conchords. You need to find a way to reference "Robots" at some point.
Interesting but I have no idea what chain of thinking got you to the correct conclusion...
When I updated the FontAwesome NuGet package to 4.0.0 I added some release notes to try and help alert the package users of that change. But I don't even read the release notes myself usually... I believe Mike is right in regards to the base class being a performance improvement as it replaced the [class^="icon-"], [class*=" icon-"] regex selectors.
FYI FontAwesome updated to 4.0.2 today.
FYI FontAwesome updated to 4.0.2 today.
@Taki: He might just have looked at the HTML source code of the icons on the fontawesome-site.
Yesterday I faced the same problem...
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?"
https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4
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?"
https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4
icon-* -> fa fa-* (NOTE: fa base class is only needed by icons)
You are truly a gentleman, not only was that my EXACT chain of thoughts and actions in the beginning but your post handled the problem...
Bravo.
Bravo.
Scott
You usually find "The Awesome" - today you found the "Font Awesome"...
You usually find "The Awesome" - today you found the "Font Awesome"...
Its really a mess in case design suffers due to browser issue. cache problem resides all time . Anyways great write up , keep up with similar posts.
Via codingbrains
Via codingbrains
I am glad I wasn't the only one who had this happen. I felt like a complete fake when I was trying to get it to work. :)
I'm having the same issue but I already have class="fa fa-bars" .. I've upgraded from 3.0 to 4.0 today and this is happening to me when replacing old icons with new ones.
Any ideas?
Any ideas?
I just ran into the same or very similar issue, and reading your post here kept me from pulling my hair out, and took me to a different frame of mind. I guess it was going to this altered mind for a moment that got me to find another solution to what is a similar issue.
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.
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.
Unbelievable :/ Thank you very much for the solution. I spent hours trying to solve this.
I'm not making mistake of not writting 'fa', still its not working.
take a look : http://blog.studyfoyer.org/parity-checker-nanoelectronics.php
take a look : http://blog.studyfoyer.org/parity-checker-nanoelectronics.php
Hehe, life saver...
i tried everything, even downgrading bootstrap... :D
Thanks a lot ;)
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.