Add Font Awesome CDN to WordPress Without a Plugin

In case you’re not familiar, Font Awesome is a regularly-updated icon font from the people behind Twitter’s Bootstrap. According to their website:

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

If you’re going to use font icons, the Font Awesome CDN version is wise choice for a number of reasons. Because the icons are served out using a global content delivery network, they’ll load quickly no matter where your website visitors are. Plus, because the Font Awesome CDN is used by tons of other sites, there’s a good chance your visitors will already have it cached in their browser. Mo’ speed!

There are a few different ways to use the Font Awesome CDN in WordPress. You could use a plugin, but I think the simplest method is to enqueue Font Awesome’s free CDN directly into your theme. It’s really easy to add to just about any WordPress theme.

Add the Following Code to Your Theme’s functions.php File:

<?php
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' );
/**
 * Register and load font awesome CSS files using a CDN.
 */
function prefix_enqueue_awesome() {
	wp_enqueue_style( 
		'font-awesome-5', 
		'https://use.fontawesome.com/releases/v5.3.0/css/all.css', 
		array(), 
		'5.3.0' 
	);
}

And that’s pretty much it. Once you’ve got the Font Awesome CDN loaded into your WordPress theme you can start adding scalable, retina-friendly font icons until your heart’s content.

It’s Like Icon Magic!

Neat, eh? Here’s a complete list of all the available Font Awesome icons you can use. If you have any questions or comments, leave ’em bellow.

2 Comments

  1. Kanika

    Someone said:
    wp_enqueue_style( $this->plugin_name, ‘https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css’, array(), $this->version, ‘all’ );

    What’s the last param?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.