Add Icons with WordPress

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).

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 via the CDN.

The icon chooser ready to search all Pro icons, across families and styles, as well as uploaded icons

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

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 and family of the 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="fa-solid"]

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

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

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 elements — 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.