Scott Hanselman

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

November 4, '13 Comments [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.



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> 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.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by SherWeb
Monday, November 04, 2013 11:31:50 PM UTC
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.
Mike Wilson
Monday, November 04, 2013 11:49:54 PM UTC
Nice! Good reference to Flight of the Conchords. You need to find a way to reference "Robots" at some point.
Tuesday, November 05, 2013 1:47:49 AM UTC
Interesting but I have no idea what chain of thinking got you to the correct conclusion...
Tuesday, November 05, 2013 5:30:59 AM UTC
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.
Tuesday, November 05, 2013 7:50:53 AM UTC
@Taki: He might just have looked at the HTML source code of the icons on the fontawesome-site.
Tuesday, November 05, 2013 12:54:32 PM UTC
To be fair....

<a href="""">
Will Newman
Tuesday, November 05, 2013 2:58:40 PM UTC
Yesterday I faced the same problem...

You have to click the What's new link at FontAwesome page 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)
Tuesday, November 05, 2013 3:47:39 PM UTC
I'm using 3.2.1, and it is very useful information! Thanks!
Wednesday, November 06, 2013 5:26:14 AM UTC
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...

Wednesday, November 06, 2013 6:44:16 AM UTC
thanks Scott! it me...or does anyone else crave a baguette?!
Wednesday, November 06, 2013 4:17:28 PM UTC
Lifesaver, thanks!
Thursday, November 07, 2013 5:24:41 PM UTC
Sorry i'm not familiar with the "bootstreap CDN" :P
Gurpreet Sohal
Monday, November 11, 2013 10:48:53 AM UTC
Lol! Missing css class can make life miserable ;)
BTW nice info!
Tuesday, November 12, 2013 6:20:31 AM UTC

You usually find "The Awesome" - today you found the "Font Awesome"...
Tuesday, November 12, 2013 9:36:40 AM UTC
Great !
Tuesday, November 12, 2013 10:48:43 AM UTC
Christ! THANKS!
Tuesday, November 12, 2013 1:48:41 PM UTC
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
Tuesday, November 12, 2013 10:32:40 PM UTC
Hey, thanks. This is exactly what happened to me.
Friday, November 15, 2013 2:41:55 PM UTC
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. :)
Tuesday, November 26, 2013 12:12:15 PM UTC
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?
Cristian Miranda
Friday, November 29, 2013 11:10:11 AM UTC
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.
Saturday, December 14, 2013 8:54:12 PM UTC
Thanks.You saved ma day.
Wednesday, December 18, 2013 4:24:30 PM UTC
Thanks for this great tip. It saved my hours.
Saturday, December 21, 2013 8:16:48 PM UTC
Unbelievable :/ Thank you very much for the solution. I spent hours trying to solve this.
Friday, December 27, 2013 6:29:29 PM UTC
I'm not making mistake of not writting 'fa', still its not working.
take a look :
Saturday, January 04, 2014 6:28:25 PM UTC
Hehe, life saver...
i tried everything, even downgrading bootstrap... :D

Thanks a lot ;)
Sunday, January 19, 2014 7:29:53 PM UTC
Ha, thank you much! :)
Thursday, January 30, 2014 10:39:24 AM UTC
Hehe, just wasted 3h until I finally got here :-)

Comments are closed.

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