How to add Font Awesome to your WordPress site

How to add Font Awesome to your WordPress site

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.


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 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="">

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', '//

' );

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.


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:


Join the discussion

Get more great content in your inbox

More articles

Delightful managed WordPress hosting

The #1 choice of over 70,000 digital creatives

Tour the platform
[if lte IE 8]
[if lte IE 8]