Use Font Awesome Icons With CSS :before Pseudo Element

You may want to use Font Awesome icons without the icon element. For example, say you want to show icons with your post titles on your blog page, but you want to show a different icon depending on the category. You can do this with CSS.

First, if you haven’t done so, load the Font Awesome CSS stylesheet. To load it, drop this into your functions file:

function st_load_fontawesome() {
     wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts','st_load_fontawesome');

So, you want to show different icons next to your blog post titles, depending on their category. For example, if you have 2 categories: Bugs, and Coffee, you can use this CSS:

.hentry .entry-title a:before {
font-family: FontAwesome;margin-right:16px;
}

.category-bugs .entry-title a:before{
	content: "\f188";
}

.category-coffee .entry-title a:before{
	content: "\f0f4";
}

That will show the bug icon next to the title of posts that are in the bug category, and the coffee icon for posts in the coffee category. The CSS selectors in this code are for the default WordPress theme (Twenty Fourteen). Modify them to apply to your own theme’s classes.

You can add icons for as many categories as needed. Add this CSS for each category:

.category-NEW-CATEGORY .entry-title a:before{
	content: "\f0f4";
}

Replace “NEW-CATEGORY” with your category, and replace the Unicode (f0f4) with the one for your desired icon. Get the Unicode for your icon by clicking on the desired icon from the Font Awesome icons page. That will take you to the icon page where you’ll see its Unicode.

 

Also see How To Use Font Awesome Icons With WordPress