Using Font Awesome in Your WordPress Theme

I'm sure a lot of you who create WordPress themes have had a need for icons. Icons are a great way to visually add meaning to a button or post related like tags or permalinks. An icon font is a great way to easily add an icon set to your theme instead of needing to create them yourself.

There's quite a few great icon fonts out there. If you are using Bootstrap for your theme, it has the Glyphicons icon font built-in. For this post, I'm going to focus on one of the most popular ones: Font Awesome.

Benefits of Icon Fonts

Sure, there are other ways to add icons to your theme, but I want to talk about some of the benefits of using an icon font instead of images, sprites, etc.

It's a Font

The first (and I think best) benefit is that it is a font. This means that you get all of the benefits of styling that you get with regular text. You can easily change the color and size of an icon with a little CSS. It will also render as sharp as your device will allow. That is, there's no need to worry about creating retina ready graphics.

Performance

Since all of the icons are included into one font file, that means it is only one HTTP request to load. This can really give you quite a bit of page load performance if you are using a number of icons. You can also include the CSS needed to render the icons with all the other .css files you load for your theme.

Adding to Your Theme

There are a number of ways to add Font Awesome to your theme. They have documented a couple of different ways on how to add to your website on theirgetting started page.

CDN

Probably the easiest way to add Font Awesome to your theme is to useBootstrapCDN. All you will need to do is add the following to the <head> in your theme's header.php file:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Or, better yet, use the wp_enqueue_style function.

Default CSS

Another way to add to your theme would be to pull down the Font Awesome GitHub Project and add it to the root of your theme. You would then need to enqueue the font using the wp_enqueue_style function.

Using Sass or LESS

An advanced way is to use Sass or LESS, depending on which you are using in your theme's project. You would want to add the font-awesome folder into your project's root, then you will need to make some edits.

Open your project's font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-pathvariable to point to your font directory like so:

$fa-font-path: "fonts";

You will need to recompile your project's CSS preprocessor of choice to pick up the changes.

Bower

If you are familiar with using Bower, there's yet another advanced way. You would use the files in the bower_components/font-awesome folder during your build tasks instead of adding them to your project.

You would need to install Font Awesome by running bower install font-awesome --save and that would add it to your project's bower.json file. You would then need to have your theme's Sass or LESS files point to the appropriate files to build your .css file. You may also want to use the grunt-contrib-copy task to copy the fonts into your own folder in your project.

You can view how to do this in my example project.

Using in Theme Template Files

Once you get Font Awesome added to your theme, you can start using them in your theme. Each theme is obviously different, but I'm going to show some examples of things that could be relatively universal for most themes.

Social Icons

Font Awesome comes with a number of the popular social network and brand icons. Most of the time a social icon is a link, so we can add the icon class to the anchor tag like so,

1	`<a` `class="fa fa-twitter"` `href="http://twitter.com/jason_bradley"` `title="Twitter"` `target="_blank"></a>`

You can see an example of adding multiple icons in the footer.php file in my example project here.

Post Meta

Another great place to use icons is in the meta data of your posts like I previously mentioned. The three that I added in the example project are the comments link, tags, and the permalink.

Here are examples for each one:

Comments Link

<?php comments_popup_link( __( '<span class="fa fa-comment"></span> Add New', 'standard' ), __( '<span class="fa fa-comment"></span> 1', 'standard' ), __( '<span class="fa fa-comment"></span> %', 'standard' ), '', ''); ?>

Permalink

<a class="fa fa-link" href="<?php the_permalink(); ?>"></a>

You can view all of these examples in my example project's loop.php file here.

Pagination

The last example is the post pagination links. I like to add chevrons in front of "Older" and before "Newer". If you are using the next_posts_link andprevious_post_links in your project, you will want to add a span with the appropriate class like so:

<?php next_posts_link( __( '<span class="fa fa-chevron-left"></span> Older', 'tuts-font-awesome' ) ); ?>
<?php previous_posts_link( __( 'Newer <span class="fa fa-chevron-right"></span>', 'tuts-font-awesome' ) ); ?>

Using Font Awesome in Your WordPress Theme