How To Use Font Awesome Icons With WordPress

To use Font Awesome icons in WordPress, the only real requirement is to 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');

Now, place this icon element wherever you want your icon to appear:

<i class="fa fa-bullhorn"></i>

That will show the bullhorn icon, like this:

Replace fa-bullhorn with the name of the icon that you want to show. Here is a complete list of Font Awesome icons to choose from.

For example, to use the coffee icon ( ) use:

<i class="fa fa-coffee"></i>

You can also make the icon bigger by adding another class to the icon element. For example, if you add the class fa-2x like this:

<i class="fa fa-coffee fa-2x"></i>

It will show this:

You can add one of these sizes, in which each is larger than the previous.

fa-2x
fa-3x
fa-4x
fa-5x

 

See also: Use Font Awesome Icons With CSS :after Pseudo Element