add-font-awesome-large

How to add Font Awesome to your WordPress site

Abbey Fitzgerald's Layout avatar

Yesterday I talked about why Font Awesome is great for designers. If you’re ready to add it your WordPress site, you have a few options – do you want to include files internally, or externally? The biggest thing is to make sure the font reliably loads and can be referenced at all times. If you choose to include the files internally you can load and link to the file path, when externally you’ll be linking to an external stylesheet.

add-font-awesome-icons-loading The example on the left shows the icons loading correctly. If the fonts are not included or if the link to the stylesheet is not included correctly, the icon will not show up.

No matter which option you choose, it’s important to remember that you need both the font and CSS files to make things work, so if you’re installing things manually, be sure to double check that you have both.

add-font-aewsome-font-file-location

Download Font Awesome and include the fonts/CSS manually

If you choose to go the local route, there are a couple options to consider.

First, to access the files, visit the Font Awesome website. Click the download link and get the .zip file from their homepage. When you open the .zip file, you’ll see the fonts and CSS files for your project.

Using the local copy in your child theme

Is Font Awesome specific to your theme? If so, there are a couple ways to add to your child theme.

Haven’t created you child theme yet? Don’t worry, here’s an easy way how.

Adding to the header

The header.php file is where the stylesheet link will go, and should be located between the opening and closing <head> tags. Before adding the file path information, make sure you have all the needed Font Awesome files.

font-awesome-font-css-location

Font files should be added to the font directory.Look for the <head> tag in the header.php file and then paste the path to the font-awesome.min.css file, it should look something like this:

<link rel="stylesheet" href="youropotionalfolder/font-awesome/css/font-awesome.min.css">

Add to the functions file

If you’d rather add this to the functions.php file, it can easily be done. Some designers prefer to keep all customizations in one place, and this is a great way to do that.

function add_font_awesome()
{
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'font-awesome', get_template_directory_uri().'youropotionalfolder/font-awesome/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'add_font_awesome' );

Like the example above, be sure to double check the path to the CSS file. If this path is not correct, the font will not work.

Use an external copy of Font Awesome

The same options apply when using an external copy, it’s just the path to the Font Awesome file that differs.

Adding to the header

The header.php file is where we will put a link to the hosted Font Awesome files. It’s pretty easy; all it takes is a copy and paste.

Look for the <head> tag in the header.php file and then paste this in the head:

link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Enqueue in the functions file

Or, better yet, use the wp_enqueue_style function. To load Font Awesome, add the following in child theme’s functions.php:

add_action( 'wp_enqueue_scripts', 'add_font_awesome' );

function add_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css

' );
}

Plugin options

There are a few existing plugins available that take care of the installation for you. This specific example, Better Font Awesome, also looks for updates. Because it uses the CDN, it will be up to date. Like you would with all new plugins, it’s a good idea to test it in a test environment first just to make sure it works as intended.

Not finding the perfect plugin? You may want to write your own plugin that you can use on multiple projects and across multiple themes.

Using Sass or LESS with Font Awesome

Are you a fan of preprocessors? If so, these will help you utilize Font Awesome. To work with the files, you’ll need to download and put the font-awesome folder into your project’s root.

If you’re using Less, open your project’s font-awesome/less/variables.less. If you’re using Sass, you’ll be making changes to the font-awesome/scss/_variables.scss file. Open and edit the @fa-font-path variable so it points to the correct directory, which is something like $fa-font-path: "fonts"; Once you recompile,  you can then test out the changes.

Resources

It’s easy to see why Font Awesome is so widely used. With easy setup, designers have a wide variety of icons available which are easy to customize and add to the web.

These resources will come in handy as you work with Font Awesome:

Comments ( 7 )

  1. Fabian

    February 22, 2016

    Girl, you rock! All those other tutorials on other websites are garbage. I just don't know why it only worked for me when I referenced to font-awsome.css instead of font-awsome.min.css?

  2. Fabian

    February 22, 2016

    Well, since I am here why not ask a question. I am using this to call up my main style sheet
    wp_enqueue_style( 'style', get_stylesheet_uri() );

    I plan on using media query rules, but I am not sure if the media query rules will take affect with just that piece of code. Do I need to add media 'all' somewhere in that code or will it work just like that?

    Thanks again!

  3. Hayden James

    May 14, 2016

    Thanks was able to use this guide to download the font-awesome folder from http://fontawesome.io/

    ...and then added the font-awesome.min.css in section to call it. Works like a charm!

  4. Agence web Limoges

    May 23, 2016

    Thanks for this useful post. Great ressource.

  5. Simeon Udoh

    July 2, 2016

    Thank you so much! I was able to set it up with Better Font Awesome! Thanks again. I am Commenting from Techviber

  6. Stylique

    September 6, 2016

    Thank you very much, this is a very useful info.

  7. David

    November 17, 2017

    Thanks so much for this info! Great help!!

Join the discussion