How to use Font Awesome in WordPress the right way

First of all use “enqueuing” in WordPress!

You should always use enqueuing when you load scripts or styles in WordPress. Yes, I know it is tedious, but sooner or later you will have to learn it. To be fair it’s not really complicated. Read more about why you should enqueue in WordPress here.

Alternative 1: Load Font Awesome with CDN

You can load the Font awesome from a CDN service 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/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'yourthemename_enqueue_fonts' );

Alternative 2: Load Font Awesome from 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 add icons

Not that these examples are 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:

HTML:

<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