Using Font Awesome Icons with WordPress (Part 1: Plugin)

PART 1 in a series

Font Awesome offers thousands of free icons, and thousands more with a Pro account. There are 2 primary ways to use Font Awesome icons with WordPress: plugin and manual install. I started with a plugin, which is the easiest method. For the most part, it works fine on a live site. But, I discovered some limitations, especially in a local development environment. So, I learned how to manually integrate the icons. I’ll take you on my journey down the rabbit hole as I share with you both approaches in a 2-part series. This first tutorial will demonstrate the plugin.

Plugin

Install and Activate

I used the official WordPress Font Awesome plugin, developed by the Font Awesome team. It’s downloadable from the WordPress plugin repository. You would then upload it to your site via the Admin Plugins page. Or, instead of downloading, you could go directly to that same Admin Plugins page, click the “Add Plugin” button and then search for it. Next, click the “Install Now” button.

Once installed, click the “Activate” button.

Configuration: Defaults

Now we configure the plugin. The settings are accessed through the Admin Settings > Font Awesome flyout menu.

The plugin’s settings options are very simple. We will start with the defaults:

• Use CDN
• Icons – Free
• Technology – Web Font
• Version – 7.3.1 (latest)
• Other Version Compatibility – On

There are limitations when using their CDN: connects to Font Awesome v5 and the free icons only. I’m not sure why the plugin offers up to the latest 7.3.1 Version number if the CDN only supports up to v5.

Configuration: Kit

If you want access to the most current version of icons as well as the Pro icons, change the plugin settings to “Use A Kit“. It’s like your own personal CDN that provides more flexibility and can be used in multiple ways. You need a font awesome account to create a Kit. There are great instructions about the Kit setup on the Font Awesome website. After the Kit is created, generate an API Token for it.

Copy and paste the API Token into the WordPress plugin settings. Click the “Save API Token” button. Pick a Kit from the dropdown list. You’re done!

Use on a page or post

It’s pretty darn simple to place an icon on a page or post. You can use a block or place it inline with other content. Let’s look at both options.

Block

Press Enter/Return to start a new, empty line of text. Then type a forwardslash “/” and “font awesome” to filter out the block options. When you see the font awesome block, select it. You could also click on the “Add block” + icon on the left side of the document window to reveal the entire list of blocks. Type “font awesome” in the search field and select the block.

Click the “Choose Icon” button to add an icon. In the pop-up window that appears, search for the icon you want.

In this example, I searched for “peace” and selected the dove icon:

Here’s my dove inside a block:

Inline

It’s easy to display an icon inline with the content. Just keep typing and when ready to insert an icon, go to the toolbar. Click on the Font Awesome icon to open the pop-up window.

Search for the icon and select it. Here’s my dove: . I can continue typing after inserting the icon!

In a Navigation Menu

The plugin has limited use in a Navigation Menu. With block themes, it fails completely. With Classic / Hybrid Themes, you’ll have success if you use the code snippet.

Block Themes and FSE

The plugin seemingly works on the back-end of a Block theme. You can see the icon in the Full-Site Editor (FSE) preview, yet it actually does NOT display on the front-end. Furthermore, the FSE strips out HTML code snippets in any navigation menu. So, the only ways to place an icon into a block theme menu are to use an inline image or go with pure CSS. I went with the inline image.

PNG icon

You can export the PNG icon file from Font Awesome. No matter what size styling you might use on the Font Awesome site, the PNG will always export at 640px square. To ensure crisp rendering, use your own image editor to rescale the downloaded PNG at 2x the size you’ll need. With some CSS magic in WordPress, you can get the icon to render beautifully. Let’s get started!

My PNG icon file was rescaled to be 48 x 48px. My code snippet forces it to be rendered at 24 x 24px, resulting in a nice, crisp icon.

Edit the Menu

Find your way to the navigation menu you want to edit.

• Appearance > Editor > Navigation > desired Menu
• Click on the Actions icon (3 vertical dots) > Edit
• Click on the Document Overview icon (3 horizontal lines) to open the List View. Then click on the down arrow to reveal all of the items.
  OR
  Click directly on the navigation menu itself in the content area.
• Place your cursor next to a nav label. Click on the down arrow (More) icon in the toolbar.
• Select Inline Image from the dropdown menu.
• Upload or select the PNG icon file from the Media Library.
• Save the updated menu.

Additional CSS

Next, go to the Additional CSS section of the Full Site Editor. Here, we’ll resize the icon and adjust the alignment.

• Appearance > Editor > Styles > More icon (3 vertical dots) > Additional CSS
• Add this code snippet:

/* Fix alignment and force crisp high-res scaling for inline navigation icons */
.wp-block-navigation-item img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin-right: 6px; /* adjust as needed */
}

Classic / Hybrid Themes

In Classic and Hybrid themes, the plugin does work, but not in the same way as on pages and posts. The plugin’s UI doesn’t operate in the Menus area. You have to insert the code manually into a navigation menu. There are 2 parts to the process:

Part 1 – Font Awesome website

• Go to the Font Awesome website. Select the Icons tab.
• Search for the icon – in this example, “peace“
• Filter the list by clicking the “Free” tab
• Click on the dove. Copy the HTML code snippet.

Part 2 – Navigation menu

• Go to the navigation menu: Admin Appearance > Menus
• Select the menu you want to edit
• Select Custom Links
• Fill in the URL field
• Fill in the link text field with the HTML code snippet:

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

• Click the Add to Menu button
• Click the Save Menu button

Styling

You can do some basic styling with the plugin.

• Once the icon is added to the page/post, select it.
• You’re given the choice of changing it or styling it. Click the Style button.
• Make the edits you want: color, rotation, size, flip, animation.

I enlarged the icon and changed its color:

Video Tutorial

If you prefer learning by watching, check out my video tutorial where I share my journey with Font Awesome and WordPress.