How to add Font Awesome to a WordPress theme

Learn enqueuing in WordPress first!

You should always use enqueuing when you load scripts or styles in WordPress. Yes, I know it is tedious, but to be fair it’s not really that complicated.

Enque…what? Enqueuing is a function in WordPress that allows you to add styles or scripts.

Alternative 1: Load Font Awesome with CDN

You can load the Font awesome from a CDN (content delivery network) instead of a local file. It might actually reduce load times. Just enqueue the CDN link in your functions.php file in your theme directory like this:

function yourthemename_enqueue_fonts() {
    wp_enqueue_style( 'font-fontawesome-CDN', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css' );
}
add_action( 'wp_enqueue_scripts', 'yourthemename_enqueue_fonts' );

Alternative 2: Load Font Awesome from the theme directory

1. Download Font Awesome from the official site. Extract the files.

2. Copy the EOT, SVG, TTF, WOFF and WOFF2 files to your theme directory root folder under a new folder called fonts. I do not believe you need to copy the OTF file.

3. Copy “font-awesome.css” to a folder called “CSS” under your theme root directory.

4. Enqueue the font in your functions.php file.

function yourthemename_enqueue_fonts() {
    wp_enqueue_style( 'font-fontawesome-local', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}
add_action( 'wp_enqueue_scripts', 'yourthemename_enqueue_fonts' );

How to apply the icons

Note that these examples are from Font Awesome 5, not Font Awesome 4, but the method is the same except the icon names have changed. So for example “FA4 would be fa fa-user while FA5 would be `fas fa-user.

Alternative 1: Style prefix

If you are at liberty to edit the HTML markup you can use the “style prefix” and the icon’s name like this:

<i class="fas fa-user"></i>

Nice thing here is that you don’t need any CSS as long as you have loaded the Font Awesome CSS from CDN or locally.

Alternative 2: Pseudo-elements

If you are not at liberty to edit the HTML markup you can always use CSS to add icons using Pseudo-elements.

<p class="abc">Login</p>

CSS:


p {
  font-family: "Font Awesome 5 Free";
  font-size: 5em;
  font-weight: 900;
  margin: 0;
}

.abc::before {
  content: "\f007";
}

Sources:

Sitepoint: Using Font Awesome with WordPress