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.

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!