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.
- Tables That You Can Sort and Search - May 24, 2017
- Responsive Newspaper-Style Columns are Easy with CSS - May 23, 2017
- Use Tooltips to Add Context - May 22, 2017