• Categories
    • Tutorials
    • Beginners Guide
    • WordPress News
    • WordPress Security
    • Best WordPress Plugins
    • WordPress Themes
    • Product Reviews
    • WP Tips & Tricks
  • Guides
    • Start a Blog
    • Make a Website
    • WordPress Hosting
  • WordPress Hosting
    • A2 Hosting
    • HostGator
    • Bluehost
    • Cloudways
  • Managed Hosting
    • WPEngine
    • Rocket.net
    • WPX
    • Kinsta
  • Coupons
    • WPEngine
    • Flywheel
    • Cloudways
    • A2 Hosting
    • WPX Hosting
WordPress Tutorials

How to Add Font Awesome Icons to WordPress Manually or With Plugins

Last Updated on: June 23, 2022 Colin Newcomer 2 Comments

How to Add Font Awesome Icons to WordPress Manually or With Plugins

Ever see those nifty icons on other people’s WordPress sites? The ones that grab your attention and give you added context for what you’re looking at. Pencils, hamburger icons, those sorts of things…

You know, the graphics that look something like this?

If you haven’t been living in a cave, I’m willing to bet that you’re nodding your head right now.

They’ve become popular because they’re a clever way to add both character and context to your WordPress site. Yup – they’re not just for fun, they actually have some very real benefits to user experience that I’ll discuss below.

Then, after the benefits, I’ll show you how to add Font Awesome icons to WordPress both manually and with some handy plugins.

What is Font Awesome?

Font Awesome is a popular, modern-looking icon set. Essentially, it’s thousands of different icons combined into one pack, which you can then insert into your WordPress site.

Font Awesome icons are great because they function much like any regular font you use. That means they’re:

  • Compatible across all browsers.
  • Vectors (meaning you can resize them as much as you want without losing quality)
  • Easy to style. You can essentially treat them like a regular “font”. Meaning you can easily change colors as needed.

It’s also easy to add Font Awesome icons to WordPress, thanks to a large support base.

What Are the Usability Benefits of Using Icons Like Font Awesome?

At first, I just thought that Font Awesome icons made your website look super cool. But then I actually thought about how I browse the web in this mobile-centric world. And that got me looking into the usability of icons like Font Awesome.

And what do you know? Iconic (!) user experience researchers Nielsen Norman Group (NNG) have actually delved into this very issue.

It turns out, when you incorporate icons into your website’s design, you’re not just making it look cool. You’re also:

  • Making it easier for readers to click on menu options. While this is especially beneficial for touch-based devices, NNG notes that it also applies to mouse-based devices, as well.
  • Using less space. Icons allow you to use less text and therefore condense your menus.
  • Letting readers understand menu options quicker. For example, we all know that the “pencil” icon means “edit”.
  • Internationalizing your website. Like above, it’s not just English-speaking users who know what the pencil icon means.

But when you use icons, always remember that you should still provide a text label to go along with them. Plenty of research says that icons alone can confuse readers. But when you include them as a part of the structure of your page, they enhance usability and make your page more aesthetically pleasing.

How to Manually Add Font Awesome Icons to WordPress

Ok, so you can use a plugin to add Font Awesome icons. It will let you insert them in WordPress using shortcodes, though you’ll still need to manually style them. I’ll cover that in the next section. But for those of you who prefer a more hands-on approach, it’s actually really easy to insert Font Awesome icons manually.

Essentially, all you need to do is add the Font Awesome stylesheet to your site. Then you can insert and style your icons using CSS. Let’s get into it…

Step 1: Enqueue Font Awesome Stylesheet in Functions.php

The Font Awesome stylesheet is a constantly updated list of the latest icons. You can add it to your site in one of two ways:

  • Download the latest stylesheet from Font Awesome and upload it to your site via FTP.
  • Link out to the version hosted by Bootstrap CDN (I’ve been doing this without any issues).

No matter which option you choose, the following steps will be the same. The only thing that will change is the actual URL to the stylesheet.

To download the stylesheet, head here, then upload it to your site via FTP and copy the file path.

Otherwise, just use this URL to the external Bootstrap CDN stylesheet: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

Then, you need to add this code to the functions.php file of your child theme (I hope you’re using a child theme!).

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}

If you uploaded the stylesheet to your site, all you need to do is replace the link to Bootstrap CDN with the URL to the stylesheet hosted on your site.

It should look something like this:

How to Add Font Awesome Icons to WordPress Manually or With Plugins

While some people will tell you to just insert the link to the stylesheet in your header.php file, don’t do that. While it will probably still work, enqueueing it like this is the proper way to do it.

Step 2: Adding Font Awesome Icons to WordPress

Once you’ve added the stylesheet, you’re ready to start including Font Awesome icons in WordPress. It’s really quite simple. To add any basic icon, you just need this snippet of code:

<i class="ICON NAME" aria-hidden="true"></i>

So where to find the ICON NAME? Easy, just head to Font Awesome’s website and browse or search for icons:

Clicking on an icon will take you to its dedicated page. Then, just scroll down and find the HTML code:

If you’re looking to use the icons in posts, you’ll need to make sure to add them to the Text tab of the WordPress Editor. For example, this addition to the Text tab:

Renders this on the frontend:

Step 3: Styling Font Awesome Icons

As you can see in the example above, the default icon size is very small. Most of the time, you’ll want your icons to be a little larger. Luckily, that’s super easy to do with CSS (remember how I told you it’s just like a font!).

To make your icon larger, you just need to add a simple addition to the icon class. For example, to make the address book icon I used above three times larger, you just need to add “fa-3x” to the end of the class like this:

<li><i class="fa fa-address-book fa-3x"></i>

And that gives you this:

You can also rotate icons, animate icons, and lots more. For a full list of all the manipulations that you can make, you should check out Font Awesome’s Examples page.

How to Add Font Awesome Icons to WordPress With a Plugin

If you don’t want to do things manually, you can also use a plugin called Better Font Awesome.

To be honest, I don’t think it saves you that much time over doing things manually. But it does give you a nice shortcode builder in the WordPress Editor.

It’s a free plugin, so you can install and activate it directly from your WordPress dashboard:

Once you activate it, there’s not much to configure. You’ll see a new Insert Icon shortcode builder in the WordPress Editor. Just click it, filter your icons, and insert your desired choice:

To style your icons, you’ll need to use the same classes I showed you for the manual example above. For example, to make the icon 3x bigger, you need to add this class to the shortcode:

The fact that you still need to manually style your icons is why I don’t find the plugin that much better than the manual option.

Adding Font Awesome Icons to Menu Items

If you want to add Font Awesome icons to actual WordPress menu items, there’s another good plugin called Font Awesome 4 Menus.

Once you activate it, you can add Font Awesome icons to your menu items by just entering the Font Awesome name in the CSS Classes (optional) box:

Just like all of the other options, you can use the same styling options to increase icons’ sizes, animate them, or more.

If you don’t see the CSS Classes box right away, you might need to go to Screen Options and enable it:

Wrapping Things Up

Adding Font Awesome icons to WordPress is a great way to improve the aesthetics of your site as well as make it easier for your users to navigate.

My personal preference is to add Font Awesome manually by enqueuing the style sheet in the functions.php file of your child theme. But if you don’t want to deal with it, both the plugin options I provided also make it easy to get started.

If you want some other ways to improve the fonts on your WordPress site, I recommend you also check out our guide to Google Fonts and WordPress. 

+ Share
Disclosure

Colin Newcomer

Colin Newcomer is a WordPress writer for WPKube. He uses WordPress more often than any sane person should.

Related Posts

Back to all articles
  • How to Increase the Memory Limit in WordPress

    How to Increase the Memory Limit in WordPress

  • What is WordPress? A Beginner's Guide!

    What is WordPress? What Can it do & Is it Right for You? A Beginner’s Guide

  • How to Use Git to Push Your Local Site Live

    How to Use Git to Push Your Local Site Live

Coupons

View more deals
  • Recipe Card Blocks Coupon
    15% OFF

    Recipe Card Blocks Coupon

    Running a cooking or food website can be fun (and tasty) – but
    Get This Deal
  • WP 2FA Coupon
    20% OFF

    WP 2FA Coupon

    Security should be at the forefront of all site owner’s min
    Get This Deal
  • Themskingdom Coupon
    20% OFF

    ThemesKingdom Coupon

    First impressions count. As such, you’ll want a WordPress t
    Get This Deal
2 Comments Leave a Reply
  1. JEBS says

    July 29, 2018 at 8:22 pm

    Thank You, Thank You, Thank You, Thank You, Thank You !

    I have been trying to fix FontAwesome on my site for Days !!!!

    Job Done – Happy Bunny !!

    Reply
  2. Anna says

    September 19, 2018 at 11:22 am

    I prefer wp and divi icons plugin, it’s free and has material design icons also..

    Reply

Leave a Reply Cancel reply

Full Disclosure This post may contain affiliate links, meaning that if you click on one of the links and purchase an item, we may receive a commission (at no additional cost to you). All opinions are our own and we do not accept payments for positive reviews.

THE BEST OF WPKUBE

Some of the best content we have published so far.

BEGINNER GUIDES & REVIEWS

18 Best Cheap WordPress Hosting Providers in 2023 (From $1.99)
210 Best WordPress Hosting Options for 2023 (Pros & Cons)
38 Best Managed WordPress Hosting Providers for 2023 Compared
45 Best WooCommerce Hosting Providers Compared in 2023 (All Budgets)
5Top 9 Landing Page Plugins for WordPress (2023)
69 Best List Building Plugins for WordPress In 2023
7How to Fix the 500 Internal Server Error on Your WordPress Website
8Thrive Themes Review: A Look At The Full Membership
9Beaver Builder Review: Is it The Best Page Builder Plugin for WordPress (2023)?
10OptimizePress Review: Create Landing Pages with Ease
11How to Make a Website: Complete Beginner’s Guide
12Top 22 Best Free Stock Photo Resources For Your Site
1317 of the Best Google Fonts for 2023 (And How to Use Them in WordPress)
14How to Start a Blog in 2022 (Step by Step Guide)
15How To Fix ‘503 Service Unavailable’ WordPress Error
1611 Best Contact Form Plugins for WordPress in 2023
17How to Add a Custom Logo to Your WordPress Site
18How to Fix Error Establishing a Database Connection in WordPress

WPEngine: 50% OFF Deal

Save 50% on one of the best managed hosting providers.

Get this Deal

Flywheel(our review)

Our Newsletter

Get awesome content delivered straight to your inbox.

Thank you!

You have successfully joined our subscriber list.

.
Featured In Forbes Huffpost Entrepreneur SEJ

About WPKube

WPKube is an online WordPress resource which focuses on WordPress tutorials, How-to’s, guides, plugins, news, and more. We aim to provide the most comprehensive beginner’s guides to anything about WordPress — from installing plugins, themes, automated installs and setups, to creating and setting up pages for your website.

We have over 500+ tutorials, guides, product reviews, tips, and tricks about WordPress. Founded by Devesh Sharma, the main goal of this site is to provide useful information on anything and everything WordPress.

Twitter Facebook

Useful Links

  • Behind the Scenes
  • Beginner Guides
  • WordPress Hosting
  • WooCommerce Themes
  • MeridianThemes
  • Exclusive WordPress Deals
View All Guides »

Reviews

  • WPEngine 33% OFF
  • Thrive Leads
  • Flywheel 33% OFF
  • Divi Theme 20% OFF
  • Thrive Architect
  • Elegant Themes
Reviews »

Deals

  • InMotion Hosting
  • LifterLMS Coupon
  • LiquidWeb Coupon
  • WPEngine Coupon
  • A2 Hosting
  • FloThemes
More Deals »
© Copyright 2023 WPKube ® All Rights Reserved.
  • Contact
  • Site Terms
  • Disclosure
  • Privacy Policy