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.
We'll Cover the Basics of:
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
Once you've installed the plugin, using Font Awesome with WordPress is easy — whether you want to use a Kit to serve Free + Pro icons, or the classic CDN to serve Free icons. 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:
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.
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.
By default, the plugin starts with the following settings:
You can make changes directly in the plugin's 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.
With this plugin, you can use any of the Font Awesome Free icons with no additional set-up, and now, when using a Kit, you can easily enable Pro icons by selecting "Pro" in your kit's settings.
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.)
Suppose you haven't had a chance to update icon names in your HTML to match the latest version of Font Awesome. Or you're using plugins or themes that rely on older Font Awesome version (i.e. v4 or v5).
Kits automatically handle making v6 backwards compatible with projects using older versions.
The Font Awesome 5 Free CDN will also handle backwards compatibility with projects using Font Awesome 5. (The CDN does not support Version 6.) If you need support for Version 4, you can enable the "Older Version Compatibility" feature (which loads v4 specific shims) in plugin's settings.
If you'd rather not use the official plugin, you can configure your WordPress system to use Font Awesome via a Font Awesome 6 kit or Free CDN. To do so, make sure 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 installing Font Awesome manually in WordPress
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).