Fun with Font Awesome – Adding Icons to Your WordPress Site

Font Awesome is a collection of over 519 icons that you can scale, color, and add drop shadows.  It is immensely fun and an easy way to add icons to your WordPress website.

How It Works

You’ll need to install and activate the AGP Font Awesome plugin.  It is updated often and as of the writing of this post includes all 519 icons.  If you are a designer or know that you are working with a child theme you can also just add the following line to your header file right above the wp-head tag:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

You won’t get the shortcodes, but you can still add icons using CSS classes as I discuss below.

You can check out the documentation – there are lots of shortcodes and an icon that gets added to the post editor, but I prefer to manually add icons by class.

Button added to editor.

Adding Icons by Class

First of all you need to choose the icon(s) you want to use.  This page displays all of the icons and you can click on the Icon dropdown in the menu to filter them by category.  If you add the icon by class you will need the name of the icon, exactly as written.  I used “paw” for the titles on this post.

Click over to the Text view and locate where you want to put the icon.  In this case, I am adding the icon to my H2 title tags so I just add the font-icon classes:

<h2><i class="fa fa-paw"></i>Adding Icons by Class</h2>

Changing Color and Adding a Drop Shadow

All formatting is done in CSS. Additional classes add the styles you want:

<h2><i class="fa fa-paw purple dropshadow"></i>Adding Icons by Class</h2>

Here I’ve added two new classes: “purple” and “dropshadow”. I also added a space between the icon and the text. In my CSS file I add:

h2 i {margin-right: 3px;}
.purple {color: #6600CC;}
.dropshadow {
   -webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
   -moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
   text-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}

Next Steps

Tomorrow we will look at some more advanced way to use Font Awesome icons in your WordPress posts.