Add Icons with WordPress

Once you’ve set up your plugin, you’re ready to add icons to your pages and posts.

The plugin has full support for adding icons as a block element or inline with text. And you can add them anywhere you can edit content - whether it’s pages, posts, or templates.

Add an Icon

Icon as a Block Element

To add an icon as a block element, open up the page or post where you want to add the icon, and add a new block element. Search for “icon” and select “Font Awesome Icon”.

Select the Font Awesome block type

This will add a Font Awesome Icon block to your page. Click the “Choose Icon” button to open the Icon Chooser.

Inline Icon with Text

You can also add an icon inline with text, like headers. Place your cursor in the text element where you would like to add an icon, and select the Font Awesome icon item from the in-context menu. (Note: Inline icons require at least WP 6.3.)

Select the Font Awesome menu item

Click the Font Awesome menu item to open up the Icon Chooser.

Find Icons Using the Icon Chooser

Search for icons by icon name, category, or keyword and select from a variety of styles using the Icon Chooser.

Stop! Hammer time!

Make sure you use a Pro Kit to add Pro icons using the Icon Chooser. If your plugin is set to use 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 for icons

Searching for a Duotone Solid style space icon in the icon chooser

Once you select an icon, you’ll see the icon inserted into your block editor view just like it will appear when you preview or publish your post or page.

A Note About Updating Icons

Icons Don't Auto Update with the Block Editor

Since icons added with the Block Editor and Icon Chooser are inserted as embedded SVGs, they do not automatically update when new versions are released.

Here’s an example…

Suppose you add an icon to a page using the Icon Chooser in the block editor. The icon is added as an inline SVG, as it’s defined in Font Awesome 6.7.2.

Then, let’s say we release Font Awesome 6.42.0 and change the design of that icon. You prefer that newer design. Even though your Kit is set to use “Latest Version 6”, your web page will continue to show the version of that icon as it was in Font Awesome 6.7.2 since it’s an SVG embedded into the content of your post or page.

To get the newer icon design, manually re-add the updated icon to your page using the Icon Chooser.

But if you’re not using the block editor, icons will update automatically.

If you’re using <i> tags or [icon] shortcodes to add icons with a Kit set to use the latest version, they will update automatically. As long your Kit is being loaded on the page (and isn’t being undermined by conflicting versions of Font Awesome loaded by other plugins or themes), then when the page or post with icon reference is loaded, it uses the Kit to render the latest icon on the page.

Other Ways to Add Icons

Shortcodes or HTML

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 in a custom HTML block 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.

You can get the best of both worlds by using a Web Font Kit to enable pseudo-elements, while using the Icon Chooser in the block editor to add inline SVG icons. These two technologies work well together, independently from one another.