Adding Font Awesome Kit to your WordPress website

Font Awesome has changed the way it allows people to integrate Font Awesome icons into their websites. It is actually pretty simple, here are three approaches.

Copy-Paste to functions.php

Take the following code and copy-paste it to your child-theme’s functions.php file:

// Add to front-end
add_filter( 'wp_head', 'tdm_fakit', 100 );

// Add to back-end
add_filter( 'admin_head', 'tdm_fakit', 100 );

function tdm_fakit() {
	?>
	<script src="https://kit.fontawesome.com/xx##xx##xx.js" crossorigin="anonymous"></script>
	<?php
}

Remember to change the kit code to yours in the script line, other wise it will not work. 🙂

As a plugin

It’s easy to create a plugin from the above code, which you then will need to upload to your wp-content/plugins folder.

Create a blank php file on your PC and add this code to it:

<?php
/**
 * Plugin Name:       Font Awesome Kit
 * Description:       Adds Font Awesome Kit code to the header
 * Version:           1.0.0
 * Author:            Andras Guseo
 * Author URI:        https://andrasguseo.com/
 */

// Add to front-end
add_filter( 'wp_head', 'tdm_fakit', 100 );

// Add to back-end
add_filter( 'admin_head', 'tdm_fakit', 100 );

function tdm_fakit() {
	?>
	<script src="https://kit.fontawesome.com/xx##xx##xx.js" crossorigin="anonymous"></script>
	<?php
}

Again, don’t forget to change the kit code!

Save and then upload to wp-content/plugins. Then go to Plugins in your dashboard and activate it. Done.

The advantage of this approach is that you will still have the code running after you change themes. If you put it in your functions.php file it will not work any more if you change themes.

With the official plugin

Yeah, and there is that. 🙂 You can download it for free from the .org repo from here.

It allows you to use the old CDN or the new Kits approach.

You can even use shortcodes like this [icon name="stroopwafel"].

Make sure to read the plugin page on usage instructions. 🙂