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 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.
# Use a Kit (recommended)
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:
- 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.
- Get Your Font Awesome API Token: Go to your Font Awesome account page to generate and copy your API Token.
- 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.
- 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.
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.
# 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).
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).
You'll be able to search Font Awesome icons by icon name, category, or keyword using the Icon Chooser search.
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.
# 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:
- Sizing your icons to be bigger or smaller
- Rotating icons to give them a different orientation
- Animating icons to create motion
- And a bunch more styling options!
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|
| ||Either your own or Font Awesome-specific CSS classes|
| ||For your own custom CSS|
| ||Accessibility helpers|
|Icon ||Basic Font Awesome attributes|
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:
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:
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.
# 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.
# 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.