Font Awesome – an easy way to add icons to your site


Many websites use icons to improve their look and readability. Traditionally, you would create an image file for each icon, but there is an easier way….
 
Icon fonts are exactly what they sound like – fonts made up of icons, rather than characters. The advantages of using icon fonts are that: they can be styled using CSS, in the same way that you would style your text (size, colour, etc); being vector graphics, they are fully scalable without loss of clarity; and you just need to load one font set to have access to many different icons. Font Awesome is a good icon font – it consists of hundreds of icons and is easy to integrate into your site.
 
There are several ways to use Font Awesome. The easiest, I think, is to download the Font Awesome zip file from their home page and copy the fonts and css directories to your theme directory.
 
You then need to create a new function and attach it to the wp_enqueue_scripts action. Do this by adding the following to functions.php:
 
function enqueue_our_required_stylesheets(){
wp_enqueue_style(‘font-awesome’, get_stylesheet_directory_uri() . ‘/css/font-awesome.css’);
}
add_action(‘wp_enqueue_scripts’,’enqueue_our_required_stylesheets’);

 
You’re now ready to use the font. Again, there are different ways of doing this. The simplest is to use it with an inline element; add something like this to your page or post:
 
<span class=”fa fa-phone-square”></span>
 
You can use additional classes to apply styling such as colour and font-size.
 
See the Font Awesome website for more info.