Beginner’s Guide to Adding Font Awesome in WordPress

It used to be the case that adding icons to your site – e.g. Twitter, Facebook etc. – required image files. This was quite limiting, as those icons couldn’t be styled to perfectly match your site, other than obviously manipulating them in an editor like Photoshop. Then in 2012, Dave Gandy created Font Awesome – a font of icons that meant developers and users had much more freedom in styling and sizing icons anywhere they liked on their site. And because it’s a font, this also means a lot of flexibility when it comes to design.

How to install Font Awesome

First and foremost, make sure you’re working in a safe environment for testing such as XAMPP. Never experiment on a live site, for therein monsters dwell and if you break the theme with a missing bracket or php tag (we’ve all been there), you’ll be very upset with yourself

This tutorial assumes you’ll be using a starter theme so just as a generic example I’ve used Twentysixteen, the latest default theme from WordPress (which isn’t a starter theme, just representative of what goes on in a theme). I’ll cover creating child themes as an alternative in an upcoming post as that involves a slightly different approach.

Download Twentysixteen from here if you want to follow along:
https://wordpress.org/themes/twentysixteen/

Twentysixteen Root

Inside the root of the theme, the main bit we’re interested in is the functions.php file. You’ll also notice a folder called “genericons”. If you’re unaware what this is, it’s an icon font much like Font Awesome but much more limited. Open that folder and inside you’ll see some font files (eot, svg, ttf, woff) and a stylesheet (genericons.css).

Twentysixteen Genericons

What we’re going to do is add Font Awesome in the same manner as Genericons, so we need the Font Awesome files in their own folder which we’ll enqueue in the functions.php file to utilize in the style.css file or indeed inside pages and/or blog posts.

In the root of Twentysixteen, add a new folder called “fontawesome”. Head over to https://fortawesome.github.io/Font-Awesome/ and download it. Then copy all the fonts from the Font Awesome download into your Twentysixteen fontawesome folder. Also copy the “font-awesome.css” file into the folder too. Now you should have a folder called fontawesome containing all the font files (otf, eot, svg, ttf, woff, woff2) and the css (not the min version) file.

Twentysixteen Fontawesome

Using your favourite editor, open the font-awesome.css file you just copied into your new fontawesome folder, and alter the paths pointing to the font files. The existing paths point to one level up (../), a folder named fonts, and then the individual font files. However, for the sake of uniformity we’ve used the same convention in place for the existing genericons folder, so we need to alter each of these to point to the same folder the css is in (./) and then the font files. Save the css file and close it.

Fontawesome CSS

Open functions.php and scroll down to around line 230 where it has the “Enqueues scripts and styles” section. Here you’ll see where the genericons.css file is enqueued – as you’ve probably guessed, we just need to copy that and then alter it from:

// Add Genericons, used in the main stylesheet.
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.4.1' );

to:

// Add Font Awesome, used in the main stylesheet.
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/fontawesome/font-awesome.css', array(), '4.5.0' );

So we’ve got the comment telling us what that line of code is doing (which is just a handy reminder of what the code does), a unique name for the style (‘font-awesome’), the path to the css file (in the fontawesome folder), and the version number (in this case, the version of Font Awesome I used was 4.5.0).

Twentysixteen Functions

So there you have it – adding Font Awesome to your theme. Straightforward, and done in less than five minutes. Now you can use it in your theme stylesheet, pages, posts, or wherever. For examples of how to use it, see https://fortawesome.github.io/Font-Awesome/examples/