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.

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. I am 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 ORCS Web
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...
Taki
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.
Kenny
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=""http://fontawesome.io/examples/"">
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 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)
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...

Bravo.
Kevin
Wednesday, November 06, 2013 6:44:16 AM UTC
thanks Scott!

now...is it me...or does anyone else crave a baguette?!
Mike
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!
Imran
Tuesday, November 12, 2013 6:20:31 AM UTC
Scott

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!
Angelo
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.
sean
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.
Ashish
Wednesday, December 18, 2013 4:24:30 PM UTC
Thanks for this great tip. It saved my hours.
Karthik
Saturday, December 21, 2013 8:16:48 PM UTC
Unbelievable :/ Thank you very much for the solution. I spent hours trying to solve this.
moi
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 : http://blog.studyfoyer.org/parity-checker-nanoelectronics.php
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! :)
Adam
Thursday, January 30, 2014 10:39:24 AM UTC
Hehe, just wasted 3h until I finally got here :-)

thx!
Sascha
Comments are closed.

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