How to add and use Font Awesome icons?

In the following article, I’ll try to explain how to add and use this icon set in your themes.

Why should I use the iconset?

Without icons, we would be forced to use only text to describe the interface, but thanks to them, the interfaces are more accessible and even if the text of the button is in foreign language, icons make us easier to understand the content.

As we may assume, the FontAwesome name indicates that it is a font, so you can easily change the color, size with a little help of CSS code. However, the most important thing is that icons are scalable vectors, so they look well on every single device (even on the retina display).

How can I add it into my theme?

There are lots of ways to add Font Awesome into our themes. I’ll focus on the easiest one from Bootstrap CDN.

Firstly, you will need to find the head section of your website and add the following link to the external source:

<link href=&quot;//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;>

For WordPress themes, the best way is to use wp_enqueue_style function. To show you this process in practise, I’ll add Font Awesome to one of our WordPress themes – Simplicity.

We have to open Simplicity/layouts/header.php file and after this line:

wp_enqueue_style('gavern-normalize', gavern_file_uri('css/normalize.css'), false);

we should add the below code which is responsible for adding support for the Font Awesome:

wp_enqueue_style('gavern-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css', array('gavern-normalize'), '4.1.0' );

How to use Font Awesome?

List of all available icons may be found here you can add this text

<i class=&quot;fa fa-link&quot;></i>

in e.g. text widget, post, page to display your icons.

On the single post page there’s amount of comments, before the post title, so I’ll add the comment icon before this comments item:

Now we have to edit the fragment, responsible for the comments, which is located in Simplicity/gavern/helpers/helpers.layout.fragments.php file. Then, it is necessary to add a comment icon:

<i class=&quot;fa fa-comments&quot;></i>

before the php function, which is responsible for displaying amount of comments:

<?php
	comments_popup_link(
		'<span class=&quot;leave-reply&quot;>' . __( 'Leave a reply', GKTPLNAME ) . '</span>',
		__( '1 Comment', GKTPLNAME ),
		__( '% Comments', GKTPLNAME )
	);
?>

The effect should looks as follows:

To achieve the same effect using only CSS code with pseudoelement class, we need to add the following code:

article header ul .gk-comment:before {
	content: '\f086';
	font-family: FontAwesome;
        /* more styles for the icon, like color, font-size, position, etc. */
}

where .gk-comment is CSS class of the list item with comments.

Surely, this is not the end of the Font Awesome functionalities, as there are much more possibilities to use this icons, e.g. social icons, navigations, or block with icons on homepage.