Add Font Awesome Icons To WordPress

Want the ability to be able to use hundreds of scalable images in your WordPress site? One of the best solutions out there that I have found is Font Awesome. Setting up Font Awesome for use in WordPress is not that difficult.

What is Font Awesome?

From the Font Awesome site:

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.

Great. But what in the world is a ‘scalable vector icon’? Scalable vector icons (better known as scalable vector graphic) are rendered as vectors and are therefore able to scale to whatever screen resolution you are viewing them on. And here’s the kicker – when they scale they maintain their sharpness quality. This means smaller or larger, they look good.

Now you may have noticed on the Font Awesome site, it says “The Iconic Font Designed for Bootstrap”. It is true that Font Awesome was designed to work with Bootstrap. But since Font Awesome is stand alone from Bootstrap, and is controlled by CSS, it can be used on any website. Like WordPress.

Why Use Font Awesome?

Here are a few reasons that I like Font Awesome:

1. A wide variety of high quality and clean images
2. Ease of use with CSS (color, size, shadow and more can be easily adjusted)
3. Speed – Font Awesome images render VERY quickly on your site
4. Flexibility – there are so many different ways to use Font Awesome to improve a sites appearance
5. An awesome creator/developer, Dave Gandy, who continues to innovate and move forward

A Plugin Alternative – Font Awesome Icons

One way to easily use Font Awesome in WordPress is to install the very nice plugin Font Awesome Icons. The Font Awesome Icons plugin even has a TinyMCE plugin which allows you to add icons to your post or page content in the Visual Editor. I love the plugin. The only downsides I can think of for the plugin are:

1. If you want to stay up to date with the latest and greatest version of Font Awesome, you may have to wait for a bit for the plugin to be updated, and
2. The plugin loads the Font Awesome stylesheet from your site. If you want to pick up some performance and load it from the MaxCDN content delivery network, you can’t do this with the plugin (more on this below).

Install Font Awesome in WordPress Yourself

Implementing Font Awesome on your website yourself is really very easy. Here are the basic steps.

STEP ONE – Include the Font Awesome CSS File

The proper way to include CSS files in your WordPress theme is to use the wp_enqueue_style function. We want to load the Font Awesome stylesheet from MaxCDN. The advantage of using MaxCDN is that it will offload the http request from our site. This is always a plus, as it decreases bandwidth usage, and improves page load speed because the browser opens another concurrent parallel thread.

In your functions.php file, add the following code:

STEP TWO – Use Font Awesome

I am using the newly released version 4.0.1 of Font Awesome. Please note that the naming conventions for version 4.0+ have changed significantly from previous 3.x versions. All of the examples below are using version 4.0.1.

One method of placing icons is by using the <i> tag.

Here is an example:

 <i class="fa fa-camera-retro"></i> fa-camera-retro

Which gives you this:

fa-camera-retro

A second method is to add the appropriate styling directly to your CSS. Each icon in Font Awesome has a unicode associated with it. By adding the unicode in our CSS, we can display any icon in any styling format we want. The possibilities are endless. The f06a unicode is for an exclamation-circle.

 h4:before {
	color: #7d7373;
	content: "\f06a";
	display: inline-block;
	font-family: FontAwesome;
	font-size: 16px;
	padding-right: 10px;
}

More Font Awesome Help

The Font Awesome site has a cheat-sheet page that displays each icon and its unicode, for quick reference. If you need more help in learning the ins and outs of Font Awesome, you can also have a look at the Examples page.

In Conclusion

Font Awesome is a flexible and fast way to present quality graphics on your site. There are endless uses for the graphics like in menus, as section breaks, and to spice up your list styles. The number of icons continues to grow with each version release, and the most recent version 4 streamlines the naming conventions, in addition to being Bootstrap 3 compatible. And here it comes… Font Awesome is just awesome!