Using icons next to particular portions of your design will help communicating a message and can -mostly- make life easier on your users. This post will shortly cover two different ways to add Font Awesome’s icons to any specific heading in your WordPress theme.

If you are using any of our themes you should be ready to go. If not, jump over to the Font Awesome Getting Started page and follow the steps there before going on.

On a :before pseudo element via Custom CSS

Pseudo elements (such as last-child, before, after, etc.) let us assign CSS rules to different parts of our HTML elements, which may not be accessible with regular classes on our markup. By using the before pseudo element, we can add content before any particular HTML tag. So why don’t use that now?

For this, we’ll first need our chosen icon in Unicode format. Let’s look at the icons list page in Font Awesome and pick -for our example- this WordPress logo icon.

In this example, we will add the WordPress logo to a module title in our Binder PRO theme. The Unicode value for that icon is “f19a”, got that? If so, let’s do it. We’ll define two rules for the before pseudo element: the icon, as a content, and its font family.

The following piece of code can be added to your theme on the child theme style.css file (if you are using one) or by using a plugin like Jetpack with its Custom CSS feature on.

If you are using one of our themes, just add it in the Custom CSS Box you’ll find at Theme Options >> Design.

#post-220 h1.mod-title:before {
   font-family: 'FontAwesome';
   content: "f19a";
}

We are specifying the post id in that selector for a particular heading in the theme. It can be anything, though. Just make sure the selector you use matches the element you want the icon for.

The added benefit of doing it this way is that it enables us to define more rules for the icon via CSS. Font size, color and such can be specified too, giving us a lot of flexibility here.

On a post (or module) title

This is a simple and quicker way you can use if the element you want icon to be added to is editable through the WordPress editor (such as posts or pages’ titles).

Instead of grabbing the Unicode value for the icon we’ll grab its HTML form. In this case, it’ll be:

And all we’d need to do is add that right before our element’s title in the editor, like this:

With that, you should be ready to go. Easy, right?

Got any cool uses for icons in your theme? Share them with us!