How to load and use Font Awesome 5 in WordPress

Updated on May 07, 2018

Font Awesome 5 has been recently released with SVG vector icons compared to the earlier icon fonts.

In this tutorial, I share detailed steps on how to load and use Font Awesome 5 in WordPress using both the methods (CSS Pseudo-elements and inline SVG) for free and Pro versions.

SVG with Javascript is the recommend method.

Web Fonts with CSS Pseudo-elements

Free

Add the following in child theme’s functions.php to load free version of the latest Font Awesome 5 in your WordPress site:

add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
/**
 * Enqueue Font Awesome.
 */
function custom_load_font_awesome() {

    wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.2.0/css/all.css' );

}

Replace 5.2.0 with the current latest version number which can be found at https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css after clicking on Free.

Example:

HTML:

<ul>
    <li><a href="#" class="fontawesome social-icon twitter">Twitter</a></li>
    <li><a href="#" class="fontawesome social-icon facebook">Facebook</a></li>
    <li><a href="#" class="fontawesome social-icon instagram">Instagram</a></li>
    <li><a href="#" class="fontawesome social-icon pinterest">Pinterest</a></li>
    <li><a href="#" class="fontawesome generic-icon email">Email</a></li>
</ul>

fontawesome is just a custom class and can be anything that helps you identify elements for which you wish to use Font Awesome icons before or after. It can very well be something else like fawesome. Do NOT use fa.

Other classes are also custom.

CSS:

.fontawesome::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.social-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Brands";
}

.generic-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
}

.twitter::before {
    content: "\f099";
}

.facebook::before {
    content: "\f39e";
}

.instagram::before {
    content: "\f16d";
}

.pinterest::before {
    content: "\f231";
}

.email::before {
    content: "\f0e0";
}

Unicode values can be obtained by searching for your desired icon at https://fontawesome.com/icons.

Click on Free in the left sidebar, search for the icon and click on the icon to go to its page.

Note the font-family values.

For generic non-brand icons, use

font-family: "Font Awesome 5 Free";

For brand icons, use

font-family: "Font Awesome 5 Brands";

font-weight can be one of

• 900 for Solid
• 400 for Regular or Brands
• 300 for Light

Reference: https://fontawesome.com/how-to-use/web-fonts-with-css#pseudo-elements

Pro

Log into your account at https://fontawesome.com/.

At https://fontawesome.com/get-started, click on Pro and add the domain on which you wish to use FA Pro.

Note the URL in the generated code (blurred area in the screenshot below).

To load Font Awesome 5 Pro in WordPress, add the following in child theme’s functions.php:

add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
/**
 * Enqueue Font Awesome.
 */
function custom_load_font_awesome() {

    wp_enqueue_style( 'font-awesome-pro', 'url-comes-here' );

}

Replace url-comes-here with the URL noted earlier.

The example in the Free section applies here as well except the following:

Change

.generic-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Free";
}

to

.generic-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Pro";
}

The advantage of Pro version is that you get more selection and variations of the icons.

SVG with JS (inline SVG)

Free

To load the free version of Font Awesome 5+’s “SVG with JS” in your WordPress site, add the following in the active theme’s functions.php:

add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
/**
 * Enqueue Font Awesome.
 */
function custom_load_font_awesome() {

    wp_enqueue_script( 'font-awesome', '//use.fontawesome.com/releases/v5.2.0/js/all.js', array(), null );

}

add_filter( 'script_loader_tag', 'add_defer_attribute', 10, 2 );
/**
 * Filter the HTML script tag of `font-awesome` script to add `defer` attribute.
 *
 * @param string $tag    The <script> tag for the enqueued script.
 * @param string $handle The script's registered handle.
 *
 * @return   Filtered HTML script tag.
 */
function add_defer_attribute( $tag, $handle ) {

    if ( 'font-awesome' === $handle ) {
        $tag = str_replace( ' src', ' defer src', $tag );
    }

    return $tag;

}

Replace 5.2.0 with the current latest version which can be seen at https://fontawesome.com/get-started/svg-with-js. This applies to the rest of the article as well.

An alternative method is to simply paste

<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>

in your theme’s settings page in the Header section (if such an option is present).

https://fontawesome.com/how-to-use/svg-with-js has comprehensive info on how to use the new Font Awesome 5.

Here’s an example (tested in Genesis Sample):

HTML:

<ul class="nav">
    <li class="home"><a href="#"><span class="fas fa-home"></span>Home</a></li>
    <li class="about"><a href="#"><span class="fas fa-info-circle"></span>About</a></li>
    <li class="contact"><a href="#"><span class="fas fa-envelope"></span>Contact</a></li>
</ul>

CSS:

.entry-content ul.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: 0;
}

.entry-content ul.nav > li {
    margin-right: 30px;
    list-style-type: none;
}

.entry-content ul.nav > li:last-child {
    margin-right: 0;
}

ul.nav li a {
    color: #333;
    text-decoration: none;
}

ul.nav .svg-inline--fa {
    margin-right: 8px;
}

Pro

If you have purchased Font Awesome Pro and would like to use the styles/icons available in it, log into your Font Awesome account, download the zip file and extract it.

Go inside svg-with-js folder, then js folder and upload the appropriate file(s) to your active theme’s js directory and enqueue it/them.

Ex.:

To use Light versions of the icons, replace

wp_enqueue_script( 'font-awesome-free', '//use.fontawesome.com/releases/v5.2.0/js/all.js', array(), null );

from the earlier step with

wp_enqueue_script( 'font-awesome-light', get_stylesheet_directory_uri() . '/js/fa-light.min.js', array(), null );

Replace get_stylesheet_directory_uri() with get_template_directory_uri() if your active theme does not have a child theme.

Then with

<ul class="nav">
    <li class="home"><a href="#"><span class="fal fa-home"></span>Home</a></li>
    <li class="about"><a href="#"><span class="fal fa-info-circle"></span>About</a></li>
    <li class="contact"><a href="#"><span class="fal fa-envelope"></span>Contact</a></li>
</ul>

and the same CSS as before, we get

Reference: https://matthewhorne.me/defer-async-wordpress-scripts/

---

There are many other options and FontAwesome specific classes that can be applied to elements for sizing and animating the icons etc. not covered here.

Go through https://fontawesome.com/how-to-use for the complete reference.