A Complete Font Awesome WordPress Guide

Font Awesome is an open source (free) project started by the amazing Dave Gandy, which as of April 11th is estimated to be on more than 60 million websites; including whitehouse.gov, thebeatles.com, and washingtonpost.com. Font Awesome gives you scalable vector icons so that you aren’t loading individual images for each icon. They are faster loading and I use Font Awesome on every single website I own. Below I am going to walk you through a complete Font Awesome WordPress guide and tell you everything you need to know from setting it up, to optimizing delivery, and how to avoid render-blocking.

Font Awesome WordPress Guide

Here is an example of what some Font Awesome icons look like. You can also see them up in the navigation bar of this website. You can size them, color them, and pretty much everything you want to do all with CSS properties.

font awesome icons example

You can see a full list of icons available in the Font Awesome icons directory. A lot of WordPress themes and developers actually now include Font Awesome in their code so you might already have access to it on your WordPress site. Check with your theme developer or try inputting the HTML for an icon on a page to test, see more examples below.

I use the Schema theme from MyThemeShop on this website and I had to tweak it to perform better. See under method 4.

Method 1 – Add Font Awesome With Plugin

The first and easiest way to add Font Awesome to your WordPress site is with a free plugin. I recommend the Better Font Awesome plugin. If you are a beginner this works awesome, however if you want faster load times I recommend following one of the suggestions further down. After installing the plugin you can easily add icons from right within the WordPress editor by clicking on “Insert Icon.”

better font awesome insert icon

And then you can also add them with shortcodes or HTML.

Shortcode Example: [icon name="coffee"]
HTML Example: <i class="fa-coffee"></i>

Icons with this plugin are delivered fast to your visitors using the jsDelivr CDN using the following file:

https://cdn.jsdelivr.net/fontawesome/4.6.3/css/font-awesome.min.css

You can also kind of hack your WordPress menu by creating a new “custom link” and then use the Font Awesome HTML.

font awesome in WordPress menus

Method 2 – Add Font Awesome CDN to WordPress

A second method you can use is to add the Font Awesome CDN to your WordPress website. This project is hosted and sponsored for free by the folks at KeyCDN. The great thing about this is that you can take advantage of their 25+ servers which are all HTTP/2 and CORs enabled. If you use the method 1 with jsDelivr you won’t always be taking advantage of an HTTP2 enabled server because they use a mix of different CDN providers, some of which don’t support HTTP/2 yet. To do this you need to paste the following code into the <head> section of your site’s HTML.

<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet">

Font Awesome CDN also now has the SRI attribute, which is a security feature that allows your browser to distinguish if the files being retrieved have been maliciously altered. See example below.

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">

You can do this in WordPress by going into “Appearance” and then “Editor” in your WordPress dashboard. Note: before editing a file in this manner I always warn people to backup their websites if you don’t know what you are doing.

wordpress-appearance-editor

Then in your header.php file place the line above between the <head> section. See image below as example.

add font awesome wordpress header

Then you can use the Font Awesome icons anywhere on your WordPress website with the <i> tag. Here is an example using CSS Prefix <fa> and the icon’s name. <i class="fa fa-database fa-lg"></i>

Using the KeyCDN’s performance tool you can test just how fast the delivery of that file is from 14 different test locations.

super fast font awesome wordpress

Another option would be to use the wp_enqueue_style function in your functions.php file. You can even do this in a child theme so not to lose your work when you run updates.

add_action( 'wp_enqueue_scripts', 'add_font_awesome' );
 
function add_font_awesome() {
wp_enqueue_style( 'font-awesome', 'https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css' );
}

Method 3 – Add Font Awesome Locally

The next method you can do is to host the Font Awesome icons locally. Perhaps you aren’t using a CDN, although you should be! Make sure to read my post on why everyone should be using a CDN. A lot of people that use this method are those that don’t use a CDN and don’t want to add another external call (DNS lookup) just for Font Awesome icons. It still makes sense for some setups.

Step 1

The first thing you need to do is actually download the web fonts for Font Awesome. Simply click on the big download button on their website to grab the latest version.

download font awesome

Step 2

After you have the zip file, unzip and upload it to the root of your website. I recommend using an FTP client like Filezilla or something similar.

Step 3

Then you will need to follow the steps just like in method 2 above, and this time you will simply make sure to change where Font Awesome is pointing to your own domain.

<link href="https://yourdomain.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet">

See example below in screenshot.

host font awesome locally

Method 4 – Add Font Awesome on Your CDN (Recommended)

The last method is the one I recommend using and is by far the best performance wise. And this is to host your Font Awesome icons on your own website, but take advantage of your current CDN provider. A big reason for this is because if you are already loading your assets from a CDN, having them load from the same connection results in one less DNS lookup. Also, if you are running on HTTP/2 then it is better to try and consolidate all your requests down to one h2 connection.

Step 1

The first thing you need to do is actually download the web fonts for Font Awesome. Simply click on the big download button on their website to grab the latest version.

download font awesome

Step 2

Now you need to edit the /fontawesome/4.6.3/font-awesome.min.css file and change a few things before uploading it to your server. There should be 6 references at the top of the file where you will want to change the domain to point to your CDN URL, such as cdn.domain.com.

change font awesome cdn

Step 3

Once you have edited the file, upload it to the root of your WordPress site via FTP.

Step 4

Then you will need to follow the steps just like in the previous methods above, and this time you will simply make sure to change where Font Awesome is pointing to your own CDN URL.

<link href="https://cdn.yourdomain.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet">

See example below in screenshot.

font awesome cdn

And that is it! You now know four different methods of using Font Awesome in WordPress.

Schema Theme

If you are running the Schema theme, simply edit this file: https://domain.com/wp-content/themes/mts_schema/css/font-awesome.min.css and replace the destination of the fonts to your CDN hosted version.

mythemeshop font awesome

Render-Blocking

Something to make note of is that CSS by default is render-blocking (which includes your font awesome icons) when placed above-the-fold. Render-blocking refers to it causing a delay in the rendering of your page.

To avoid render-blocking CSS, move your code right before your </body> section of your site’s HTML. However, by doing this it will result in FOIT, flash of invisible text. But it will pass Google PageSpeed Insights warning as seen below. It depends on what you prefer. FOIT on some sites can be very annoying, but if your entire site loads faster enough it might not be noticeable enough and so placing it in your footer might make sense. Usually this comes down to personal preference.

render-blocking font awesome

Was this Font Awesome WordPress guide helpful? If so I would love to hear from you below. And please help me out by sharing!

GET MORE STUFF LIKE THIS

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

10 Comments

  1. LiewCF April 15, 2016
    • Brian Jackson April 15, 2016
  2. James Anderson April 16, 2016
    • Brian Jackson April 18, 2016
  3. FlakyOceans April 19, 2016
    • Brian Jackson April 19, 2016
      • Flaky Oceans April 19, 2016

Add Comment

189 Shares
Tweet
Share
Share
Buffer