Scott Hanselman

Why do my Font Awesome icons show up as blank squares?

November 05, 2013 Comment on this post [28] Posted in Open Source
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.

image

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.

image

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.

facebook twitter subscribe
About   Newsletter
Hosting By
Hosted in an Azure App Service
November 05, 2013 3:31
If you're using Twitter Bootstrap 3.0, it's the same deal with the Glyphicons.

The twitter bootstrap mentions it's for performance reasons, so I assume Font Awesome is using the same trick.
November 05, 2013 3:49
Nice! Good reference to Flight of the Conchords. You need to find a way to reference "Robots" at some point.
November 05, 2013 5:47
Interesting but I have no idea what chain of thinking got you to the correct conclusion...
November 05, 2013 9:30
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.
November 05, 2013 11:50
@Taki: He might just have looked at the HTML source code of the icons on the fontawesome-site.
KMB
November 05, 2013 16:54
To be fair....

<a href=""http://fontawesome.io/examples/"">
November 05, 2013 18:58
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

icon-* -> fa fa-* (NOTE: fa base class is only needed by icons)
November 05, 2013 19:47
I'm using 3.2.1, and it is very useful information! Thanks!
November 06, 2013 9:26
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.
November 06, 2013 10:44
thanks Scott!

now...is it me...or does anyone else crave a baguette?!
November 06, 2013 20:17
Lifesaver, thanks!
November 07, 2013 21:24
Sorry i'm not familiar with the "bootstreap CDN" :P
November 11, 2013 14:48
Lol! Missing css class can make life miserable ;)
BTW nice info!
November 12, 2013 10:20
Scott

You usually find "The Awesome" - today you found the "Font Awesome"...
November 12, 2013 13:36
Great !
November 12, 2013 14:48
Christ! THANKS!
November 12, 2013 17:48
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
November 13, 2013 2:32
Hey, thanks. This is exactly what happened to me.
November 15, 2013 18:41
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. :)
November 26, 2013 16:12
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?
November 29, 2013 15:10
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.
December 15, 2013 0:54
Thanks.You saved ma day.
December 18, 2013 20:24
Thanks for this great tip. It saved my hours.
December 22, 2013 0:16
Unbelievable :/ Thank you very much for the solution. I spent hours trying to solve this.
moi
December 27, 2013 22:29
I'm not making mistake of not writting 'fa', still its not working.
take a look : http://blog.studyfoyer.org/parity-checker-nanoelectronics.php
January 04, 2014 22:28
Hehe, life saver...
i tried everything, even downgrading bootstrap... :D

Thanks a lot ;)
January 19, 2014 23:29
Ha, thank you much! :)
January 30, 2014 14:39
Hehe, just wasted 3h until I finally got here :-)

thx!

Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.