Wordpress

Font Awesome and WordPress—two great tastes that can go great together! Especially now that we have the official Font Awesome WordPress plugin to make it easy.

Our official plugin lets you use Font Awesome with WordPress the way you want:

  • Use Free or Pro icons.
  • Leverage the latest release or a specific version of our icons.
  • Choose the tech, either SVG or Web Font.
  • Take your pick of loading your icons from a Font Awesome Kit—the easiest and most robust way to use our icons on the web—or the classic Font Awesome CDN.
  • Turn on automatic compatibility for Font Awesome Version 4 if you - or your plugins - are still using Version 4 syntax.
  • Troubleshoot and resolve problems when multiple versions of Font Awesome are loading on your site from other plugins/themes and causing display or technical issues.
  • Make things even awesomer using icons from Font Awesome Version 6.
  • Use your uploaded icons from your Pro Kits.

How can you get all this wonderful stuff? Head over to the Font Awesome plugin page on WordPress.org (opens new window) or install it directly via your WordPress admin plugins page by searching plugin authors for "fontawesome".

Get the Font Awesome WordPress plugin

# Get Set Up

Once you've installed the plugin, using Font Awesome with WordPress is easy, whether you want to use a Kit or classic CDN, with a Free or Pro Font Awesome account. But first, you'll need to get it set up.

Since every Font Awesome account comes with a free Kit, we recommend using a Kit in your WordPress plugin. Kits are super easy to set up and provide the most flexibility. (And when you use a Pro Kit, you'll get full access to Pro icons—including v6 styles!—in the plugin's Icon Chooser to add icons to your content easily. And any icons you've uploaded!)

Follow these steps to use a Kit in your WordPress plugin:

  1. Set up a Kit: If you don’t already have a Kit set up, create a new one. You can tweak the Kit to use Free or Pro icons, Web Font or SVG, a specific or the latest Font Awesome version, and other settings in the Kit's settings page to suit your needs.
  2. Get Your Font Awesome API Token: Go to your Font Awesome account page to generate and copy your API Token.
  3. Add Your Token to Your WordPress Plugin: Return to your WordPress site and open up the Font Awesome WordPress plugin settings. Select Use a Kit and paste your API token into the field. Save those changes.
  4. Select Your Kit in the Plugin: Pick a Kit from the list. You’ll see the settings for the Kit you’ve chosen listed below so you can double-check that it’s set up the way you want. Make your selected Kit active in your project by saving your settings.

The Font Awesome WordPress plugin set up to use Kits

The Font Awesome WordPress plugin set up to use Kits

To adjust your Kit settings, head to your Kits page on FontAwesome.com, select the Kit you're using, go to the Settings tab, make and save your changes, then hit "Refresh kits data" in the WordPress plugin.

# Use the Font Awesome CDN (default)

By default, we've set up our plugin with the following settings:

  • Font Awesome Free Icons
  • Web Font
  • Font Awesome CDN

You can make changes directly in the plugin's settings.

To use Pro icons with the CDN, you need to add your site’s domain to the allowed domains on your Font Awesome CDN page. Once you add your domain(s) and save your plugin settings with Pro icons selected, your Pro icons will start showing up on your site.

Why do we recommend Kits instead of CDN?

With Kits, you can use the Icon Chooser to find and add icons to your WordPress content easily. And you can only get the Version 6 icons and updates—including the new Thin style!—with a Kit.

# Adjust the Plugin Settings

If you're using the Font Awesome CDN, you can adjust your settings right in the plugin. If you're using a Kit, you can adjust these same settings in each Kit's settings on fontawesome.com.

# Free vs. Pro

With this plugin, you can use any of the Font Awesome Free icons with no additional set-up, and now you can easily enable Pro icons. If you’re using a Kit, select "Pro" when you set up the Kit. If you’re using CDN, select "Pro" and make sure to add your domain to your CDN settings on fontawesome.com.

# SVG vs Web Font

SVG allows you to do all kinds of fancy things with your icons that you can't do with Web Font—like Power Transforms, Masks, and Layering—but doesn’t work as well with pseudo-elements (learn more about using pseudo-elements).

# Versions

Your best option for versions is to select the latest—it gives you the newest icons and capabilities, but if you need a particular previous version for some reason, you can pick it from the list. When a new version of Font Awesome is released, you can update your settings to match. (Bonus! If you select the latest with Kits, you always get the newest version.)

# Version 4 compatibility

Suppose you haven't had a chance to update icon names in your HTML to Font Awesome 5. Or you're using plugins or themes that rely on Font Awesome 4. You can turn this setting on and we will automatically handle any references to old names and aliases from Font Awesome 4.

# Add Icons

Once you've set up your plugin, you're ready to add icons to your pages and posts, using the new Icon Chooser, shortcodes, or HTML snippets.

# Adding Icons Using the Icon Chooser

Starting with the official 4.0 plugin release, we added an icon search in the plugin to make it easier for you to find and insert the icons you need into your WordPress content.

You'll find the Font Awesome Icon menu option in the extended format bar when you're in a Gutenberg text block (or above the format bar in the WordPress Classic editor).

Font Awesome menu item in WordPress format bar

Find the Font Awesome menu item in the extended format bar

You'll be able to search Font Awesome icons by icon name, category, or keyword using the Icon Chooser search.

Stop! Hammer time!

Make sure you're using a Pro Kit if you want to add Pro icons using the Icon Chooser. (If you're using the CDN, you can still search and add Free icons, but you won't be able to add Pro icons even if you've set the CDN to Pro.)

The icon chooser set up to search all Pro icons, including the Light, Thin, Duotone styles, and uploaded icons

The icon chooser set up to search all Pro icons, including the Light, Thin, Duotone styles, and uploaded icons

Searching the icon chooser for a coffee icon with several styles selected

Searching the icon chooser for a coffee icon with several styles selected

Once you select an icon, you'll see the shortcode is inserted into your content, and you can see the icon when you preview or publish your post or page.

Icon shortcode inserted into content

Icon shortcode inserted into content

Viewing the icon in Preview mode

Viewing the icon in Preview mode

# Other Ways to Add Icons

You can also add icons by using their names in shortcodes or HTML.

When you use shortcodes, you add the name of the icon and a prefix, where the prefix is the style of icon you want to use. Note that you don’t need to include the fa- part of the name. And if you don’t include any prefix, the style will default to Solid. The shortcode for an icon looks like this:

[icon name="coffee" prefix="far"]

Or you can use basic HTML with standard Font Awesome syntax:

<i class="fas fa-coffee"></i>

# Add Styling and More

With the official 4.0 release of the WordPress plugin, you can add attributes to the icon shortcodes, including CSS classes.

This means you can make your icons extra fancy with all the features that Font Awesome offers via CSS classes, like:

Here's an example:

[icon name="yin-yang" prefix="fas" class="fa-2x fa-spin"]

Here are attributes that can be passed through the shortcode:

Attribute How you can use it
class Either your own or Font Awesome-specific CSS classes
style For your own custom CSS
title , aria-hidden , aria-labelledby , role Accessibility helpers
Icon name and style prefix Basic Font Awesome attributes

# Troubleshooting

Font Awesome icons are popular, and it is common for other themes and plugins to load Font Awesome. So we created a way to help you find and prevent those conflicting versions from affecting your icons: The Conflict Detection Scanner.

If the official Font Awesome plugin seems to be set up correctly, but your icons still aren’t loading and you're not sure why head over to the Troubleshoot tab. The Troubleshoot area of the plugin has two parts:

  • Detect Conflicts with Other Versions of Font Awesome
  • Versions of Font Awesome Active on Your Site

# Detect Conflicts

The Detect Conflicts with Other Versions of Font Awesome section lets you enable the conflict scanner tool which then looks for versions of Font Awesome loading on your site. Once you click the button to enable the scanner, a blue scanner box will appear in the lower right corner of your browser window, like this:

Conflict detector shows in the bottom right of your browser for 10 minutes

Conflict detector shows in the bottom right of your browser for 10 minutes

It will run in the corner (but only be visible to admins) while you visit any page or area of your site having trouble loading icons correctly. As you browse, it will scan and let you know if it finds other versions of Font Awesome on any page you visit, and save them to the lower part of the Troubleshoot tab. Once you’re done, you can view the results in the Versions of Font Awesome Active on Your Site section.

# Review Active Font Awesome Versions

The upper area of the Versions of Font Awesome Active on Your Site section shows any registered themes or plugins using Font Awesome. These have opted to show you what settings they prefer and you can adjust your plugin settings to align. If you have multiple plugins with different needs, you can decide which is more important to align with.

The lower area lists any other versions of Font Awesome that may be loading on your site—these are the results from the conflict scanner. If the scanner finds a potential conflict, it adds it here and you can choose to block it from loading that other version of Font Awesome. Since we can’t tell who or what is loading those other versions, we provided a little information that may help you figure it out: the type of resource and the URL that is loading Font Awesome. The results will remain there until you clear it, even if you remove the plugin or theme that generated it. If you think you’ve removed a plugin or theme that was creating a conflict, you can clear that result and see if it pops up again. Or you can clear them all and start fresh anytime. Remember to save after you clear or block an item.

# Conflicts in the CDN or Kit Settings

If a plugin or theme has registered preferred settings and you are changing the settings to something different, you’ll see a warning message about which plugin or theme might have issues with the new settings, like this:

A settings conflict will warn if you select different settings than a plugin is expecting

A settings conflict will warn if you select different settings than a plugin is expecting

You can still save the conflicting settings but the plugin or theme may not work as expected. You can also visit the Troubleshoot tab to see what settings the plugin(s) or theme(s) prefer—the differences with your settings will be highlighted.


# Tips

# Generating an API Token

Font Awesome Kits use an API Token to securely get your Kits in WordPress without needing to share your Font Awesome credentials with your WordPress server. If your token ever gets compromised, you can easily generate a new one in your Font Awesome account.

# Using Pseudo-elements

CSS pseudo-elements are a way to add icons before or after content in the HTML without editing the HTML, like adding a caret next to a drop-down menu item or an arrow next to an external link. Some plugins or themes rely on pseudo-elements—If you disable them, be sure to check your site for missing icons.

You should avoid using SVG with pseudo-elements if possible. In fact, for performance reasons we don’t have the SVG-with-pseudo-elements option when using a Kit. You can enable pseudo-elements with SVG when using the CDN, but know that it can cause your site to be very slow in some situations. Be sure to check your pages—especially ones with lots of icons—after enabling pseudo-elements with SVG to verify that they aren’t loading significantly slower.

Pseudo-elements are enabled by default with Web Font (in both Kits and CDN) since they don’t impact performance with that technology.


# Manual Installation (Advanced)

You can add Font Awesome into the files of your WordPress system if you are an advanced user who doesn’t have conflicts with other versions of Font Awesome from other themes or plugins, is comfortable modifying the WordPress functions.php file, or can’t install the Font Awesome plugin for some reason.

Learn more about advanced integration into WordPress

Negative, Ghostrider, the pattern is full.

You might want to avoid this method unless you've got tons of experience with WordPress, have no other choice, or are flying with Goose as your wingman.


# For Plugin and Theme Developers

Help us help you! Use our official plugin as a composer package to include Font Awesome icons in your plugin or theme development the right way and keep your plugin or theme—and your users' sites—running at their best.

Learn more on the Font Awesome WordPress plugin GitHub repo (opens new window).

You're viewing the Version 6 Beta

It's all the awesome of 5 but now more six-y! Version 6 brings over 13,000 icons across 5 styles - including the new Thin style! - and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!