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 their getting started page.
CDN
Probably the easiest way to add Font Awesome to your theme is to use BootstrapCDN. 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-path variable 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,
<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' ), '', ''); ?>
Tags
<?php $tag_list = get_the_tag_list( '', __( ', ', 'tuts-font-awesome' ) ); ?>
<?php if( $tag_list ) { ?>
<?php printf( '<span class="fa fa-tags"> ' . __( '%1$s', 'tuts-font-awesome' ) . '</span>', $tag_list ); ?>
<?php } // end if ?>
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 and previous_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' ) ); ?>
You can view all of these examples in my example project's pagination.php file here.
Conclusion
You should now have everything to get started with Font Awesome in your WordPress theme. I gave a couple of examples where I have found myself using icons frequently. There's a lot more awesome to Font Awesome that you could try out such as stacking, rotating, and animated icons. I would suggest taking a look at the Font Awesome Examples page for all the additional awesomeness.
Comments