How to Add Font Awesome 5 Icons to WordPress Website– Complete Guide

Want to add Font Awesome icons to WordPress? Icons help add style and usability to your WordPress site. And of the many font icon collections out there, Font Awesome is one of the absolute best.

But unfortunately, you can’t just jump in and start using Font Awesome icons on WordPress right away. Instead, you’ll need to complete some setup steps before you can insert icons.

 

Below are two methods explaining how to Add Font Awesome Icons to WordPress Website . When you finish reading, you’ll know exactly how to:

  1. Manually add the Font Awesome to WordPress
  2. Add Font Awesome to WordPress with a free plugin

1)How to Manually Add Font Awesome Icons to WordPress

Step 1: Enqueue Font Awesome Stylesheet in Your WordPress Theme

Go to Appearance → Editor and select the functions.php file for your child theme.

Then, paste in this code:

add_action( 'wp_enqueue_scripts', 'tu_load_font_awesome' );
/**
 * Enqueue Font Awesome.
 */
function tu_load_font_awesome() {
    wp_enqueue_style( 'font-awesome', '//use.fontawesome.com/releases/v5.3.1/css/all.css', array(), '5.3.1' );
}

Step 2: Insert Font Awesome Icons

Once you’ve enqueued the stylesheet, you can insert Font Awesome icons into your site by going to the Font Awesome icon search and finding an icon that you want to insert:

Font Awesome icon search 

When you click on an icon, Font Awesome will give you the code that you need to use the icon:

Font Awesome icon code

All you need to do is place highlighted code in the Text tab of the WordPress Editor to add an icon to your site.

And that’s it! You’ve successfully added Font Awesome icons to WordPress. Now, all that’s left is to learn how to style Font Awesome icons on your WordPress site.

But before I show you that, I want to go over the plugin method for adding Font Awesome Support. Feel free to skip ahead if you went with the manual method over the plugin method.

2)How to Add Font Awesome Icons to WordPress With a Plugin

If you’d prefer to use a easy way instead of manually enqueuing the Font Awesome icons, there’s a solid free plugin listed at WordPress.org called Better Font Awesome.

In addition to always adding the latest stylesheet to your site, Better Font Awesome also:

  • Lets you use shortcodes to insert Font Awesome icons.
  • Gives you a drop-down menu in WordPress Editor to insert icons.

If you’re planning to regularly use Font Awesome icons, plugin might make your life easier. But for infrequent usage, I think the manual method is the better option because it’s the most lightweight and fast.

Step 1: Install and Activate the Plugin

To add Font Awesome, go to Plugins → Add New , then Search Better Font Awesome and press enter . Now all you need to do is install and activate the plugin. There’s really nothing else.

While there is a basic settings panel that you can access by going to Settings → Better Font Awesome, you’re totally free to leave everything as the default.

 

Wrapping Things Up

Font Awesome icons might take you few minutes to set up. But once installed, they’re there for good.

Leave a Reply