WordPress & Font Awesome

Font Awesome has recently been updated to Version 4.1. There has never been a better time to use it on a WordPress powered site. Or any site for that matter.

Why use Font Awesome?

Good things come to those who wait, or so the saying goes. Sometimes software development proves it. Since Apple dropped the original iPhone bomb back in 2007, followed by their iPhone 4 which packed a “Retina” display in 2010; developers have been trying to accommodate mobile devices on mass and serve up content to target their high resolution displays.

Responsive Web Design and other strategies have helped pave the way for us website makers in adopting to these new paradigms of web design. But how do we make content that will load quickly on low bandwidth connections while at the same time look sharp on their “Retina” displays? Text is a done deal now. With web fonts we can now use, with few exceptions, our fonts of choice. Gone are the days of Flash or even exporting webpages as graphic files so that we can get everything looking pixel perfect and dandy.

A picture paints a thousand words

So we have perfect text, what about some icons to spice it up a little? Every one likes an icon, right? Yes, we do. Say hello to my little friend:

Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
~ Font Awesome

All is good in the world. We have now have super-sharp icons for rockets, telephones, credit cards and many other images, that are globally recognised. Using a syntax that is easy to understand and use.

Get started with Font Awesome on WordPress

For example to use Font Awesome with WordPress, just load add this to your functions.php file:

Then add a class to load your icon of choice. Let’s say a nice tree:

Superb.

Wait for it…

For all its awesomeness, up until 2 days ago, Font Awesome from a WordPress developers point of view was a bit lacking. There was no WordPress icon! But cry no more. After a 2 year wait we finally have a beautiful WordPress icon. Which we can use like this:

WordPress icon examples:

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Now that’s what I call awesome!

WordPress & Font Awesome resources:

The Font Awesome Unicode value for the WordPress icon is: f19a

  • Using Font Awesome and WordPress by Sridhar Katakam
  • WordPress Logos