How to Use Font Awesome On Your WordPress Website

Posted on October 28, 2016 by in Tips & Tricks | 26 comments

How to Use Font Awesome On Your WordPress Website

Interested in a fun way to make your WordPress site’s design even more appealing? Font icons let you spice up your posts, pages, or menus by including eye-catching icons. And when it comes to font icons, Font Awesome is definitely one of the biggest names out there.

If you want to add Font Awesome’s huge collection of icons to your WordPress site, keep reading to learn a little more about them and two quick and easy ways to add these icons to WordPress.

What Are Font Awesome Icons and Why Are They Beneficial?

If you’re a Divi user, you’re probably already familiar with font icons from the Elegant Icon Font that’s included in Divi.

Font Awesome operates on the same principle–it’s a font built with icons. Not a set of images. Why is this distinction so important? Because icon fonts like Font Awesome and Elegant Icon Font are:

  • Vectors – that means they look great no matter what size they’re displayed at.
  • Customizable – you can manipulate them like any other font. Change colors, add animation, and more!
  • Cross-browser compatible – icon fonts should work on pretty much any browser.

Font Awesome currently offers a massive 634 different icons that you can add anywhere on your WordPress site. It’s also compatible with both Divi and any other WordPress theme you’re using.

How to Add Font Awesome Icons to WordPress Manually

It’s easy to manually add Font Awesome to WordPress, but if you don’t want to deal with any code (even if it’s simple!), you can skip to the next section for a simple plugin solution.

There are two parts to implementing Font Awesome manually. First, you need to include the Font Awesome stylesheet in your theme’s header section. Then, you need to find the actual name of the icon you want to include and include it with another short code snippet. Here’s how to do both of those things:

Adding Font Awesome to Your Theme’s Header Section

The first step is adding Font Awesome to your theme’s header.php. This is the specific bit of code you need to add, though I’ll provide a slightly different version for non-Divi themes:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

This code brings in the Font Awesome stylesheet from Bootstrap CDN. You can also get a stylesheet directly from Font Awesome, but it doesn’t make any real difference.

If you’re using Divi, you can add this code by going to Divi → Theme Options → Integration. Scroll down a bit and find the Add code to the < head > of your blog box. Paste the code there. It should look like this:

font-awesome-wordpress-manually1

Make sure to click Save Changes and then you’re all finished for this part.

If you’re using another theme, you’ll want to use a slightly different bit of code:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {

	wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );

}

Instead of the header.php, you’ll want to add it to your child theme’s functions.php by going to Appearance → Editor:

font-awesome-wordpress-manually2

Definitely make sure you’re using a child theme so that your additions don’t get accidently overwritten by a theme update.

Inserting Font Awesome Icons

Once you’ve added the code to your theme, you’re ready to start using Font Awesome icons wherever you want.

To find a full list of icons, go to the Font Awesome website and search for any icon you want. For example, if you want a “download” icon, just search for download and pick one from the list by clicking on it:

Insert Font Awesome

After you click on your desired icon, you’ll see a screen showing that icon in various sizes. Around the middle of the screen, you should see a little code block:

font-awesome-wordpress-insert-2

You need to copy all the code for whichever icon you choose. Then, you can insert that code anywhere in WordPress, no matter if you’re using the Divi Builder or the WordPress Editor. Just make sure you insert it in the Text tab of whichever editor you’re using. You can go back to the visual tab after you’re finished adding icons.

Here’s what that looks like using a normal text module in Divi:

font-awesome-wordpress-insert-3

Here’s what that looks like on the frontend:

font-awesome-wordpress-insert-4

It’s the same idea with the normal WordPress Editor. Just add the icon code in the Text part of the editor:

font-awesome-wordpress-insert-5

And then you should see this when you publish the post:

font-awesome-wordpress-insert-6

Making Font Awesome Icons Bigger

As you can see in the above examples, the icons are pretty small by default. If you need them to be bigger, all you need to do is add a tiny bit of code to the icon. For example, to make the icon twice as big, you just need to add “fa-2x” to the icon class.

That means that this:

<i class="fa fa-download" aria-hidden="true"></i>

Becomes this:

<i class="fa fa-download fa-2x" aria-hidden="true"></i>

So, when I change my earlier example to that code, my icon shows up like this instead:

font-awesome-wordpress-insert-7

Here’s a list of code bits you can add to manipulate the size:

  • fa-lg – increase size by 33%
  • fa-2x – double the size
  • fa-3x – triple the size
  • fa-4x – …
  • fa-5x – …you get the point!

You can also do other cool things like use Font Awesome icons as bullet points, add animation, and more. The official Font Awesome site has a great guide on how you can manipulate font icons in different ways.

How to Add Font Awesome Icons to WordPress With a Plugin

If you don’t like the manual way, you can also get Font Awesome up and running by installing a plugin. There are a variety of plugins which offer this functionality, but one of the more popular and regularly updated options is called Better Font Awesome Icons.

You can try one of the other options, but I think this one is a good choice because it:

  • Is updated fairly regularly. This is important because several popular Font Awesome plugins haven’t been updated in years.
  • Automatically fetches the latest set of Font Awesome icons.
  • Lets you add icons via shortcode or the same code I used in the manual example.

To get started, install and activate the plugin like you would any other.

The plugin will add a new Better Font Awesome link under the Settings menu in your dashboard. You don’t really need to configure anything – it mainly just gives you instructions on how to use the plugin:

better-font-awesome-1

Adding Icons

To add the actual icons to posts, you can either use the same method I showed you in the manual section, or you can use shortcodes. The advantage of using shortcodes is that you don’t need need to switch to the “Text” tab of your editor.

The shortcode format you need to use is:

[icon name="NAME"]

Where NAME is the name on the Font Awesome website:

better-font-awesome-2

You can add this shortcode in Divi modules or the regular WordPress text editor. Here’s an example where I include an icon via a shortcode in a text module while using the Divi Visual Builder:

better-font-awesome-3

The Visual Builder renders that like this:

better-font-awesome-4

You can use the exact same shortcodes in the regular WordPress editor, too.

If you want to change the size of your icons via shortcode, just add a class tag with the exact size you want like this:

[icon name="NAME" class="fa-2x"]

All the same size options from the manual examples will work with the shortcodes.

Wrapping Up

There you go! Two different ways to add Font Awesome icons to your WordPress site. I prefer the manual method, because it’s not really much more work and then you don’t have to worry about a plugin potentially breaking down the road.

But if you don’t want to fuss with your theme’s code, the Better Font Awesome Icons plugin is a great option!

Now it’s your turn. What’s your favorite way to use Font Awesome icons?

Article thumbnail image by tulpahn  / shutterstock.com

26 Comments

  1. How would we use a font-awesome icon in something like the Divi blurb module?

  2. Is there a way to use Font Awesome as Blurb icon?

  3. I’d argue that even Divi users should just go ahead and use the Enqueue code you’ve provided in functions.php rather than paste the stylesheet straight into the code.

    Unless, does Divi have some sort of built-in enqueue function from pasting in these boxes? If so, that’s pretty cool.

  4. I was wondering if it was possible to use Font Awesome, this was helpful. Thanks

  5. I just love the theme, And love your blog too. Great collections.

  6. By the way, Font Awesome was updated to version 4.7.0.

  7. Font Awesome 5 is coming. Just got an email from Dave of Font Awesome. Their Kickstarter campaign is running great. Can’t wait for the launch day.

  8. I have seen them used in menus too. Would have love to have see this included.

  9. I downloaded suggested plug-in and am still learning CSS.

    How do I write one inline line of code for Font Awesome icon “fa-envira” to enlarge it (fa-2x), re-color (#xxxxxx), and flip horizontally (fa-rotate-180)?

    Am trying to embed icon into a text module, enlarge it, re-color, and flop it other direction, and make icon a hyperlink.

    • Add a new class to your stylesheet, something like

      .envira-flip { color: #eaeaea }

      Then in your html add your enlarged, rotated icon and include the new class e.g.

      <i class="fa fa-envira fa-2x fa-rotate-180 envira-flip"></i>
  10. for some reason, I use the examples from the fontawesome site, and they don’t render the same in my divi install.

  11. I have updated my theme with FontAwesome 4.7.0 and I love it.

  12. I heard first time about Font Awesome. It is so simple to add to a WordPress blog. Thanks for the awesome share.

  13. Great tips! For a while, I’ve been designing an image that would include the font I wanted (when not using one of the default fonts) and I would upload it on the site but this didn’t always work so this post is really helpful for me

  14. Can I use it for my Category list? If so how to integrate it with category list?
    Basically I want to show one icon for each category.
    Please advise

  15. Is there a way of keeping the CSS and fonts on my local server? GTMetrix reports usually penalizes externally loaded files.

  16. this was helpful for me. Thanks

  17. This article needs some updates as the Font Awesome CDN is no longer available. Actually, it is very costly…

  18. I wonder where did you find this nice RGB-Icon once can see on the top of this article 🙂

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest