Using Font Awesome with WordPress (Part 2: Manual Set Up)

Host the Web Fonts yourself

To avoid any security issues involved when connecting with an API, we’ll host the Web Fonts inside our project folders. This way, the fonts can be reliably accessed on both a local and live server. The file paths will be linked to internal, rather than external, directories.

STEP 1. Download the Font Awesome files

• Go to the Font Awesome download page. You’ll need both the Web Fonts and the stylesheets. Click on the Download Free for Web button in the Font Awesome Free box.
• Extract the fontawesome-free-7.3.0-web.zip archive on your computer.
• You can change the name of the extracted folder to “fontawesome“. This makes it easier to replace the contents with updated files in the future. You won’t have to edit any file paths.

STEP 2. Add the Font Awesome files to Your Theme

• The extracted archive contains many more files than you will need. Delete the files you don’t need. In the screengrab, I have highlighted what we’ll actually use:
  • css folder: Be sure to use the core style file “fontawesome.css“. Also include the other style files you need. In our demo, we’ve kept the brands, regular, and solid CSS files.
    The all.css is too large for production sites and the Font Awesome developers recommend NOT using it.
  • webfonts folder: use all of the WOFF files.

• Move the extracted, cleaned-up archive to the theme folder.
  • I place the “fontawesome” folder inside my assets folder, where my other fonts also reside.
    
  • Keep the directory structure exactly the same. The relative paths are hard-coded into the CSS files. The css and webfonts folders must remain parallel to one another inside the fontawesome folder.

File Directory

wp-content/
 └── themes/
   └── your-child-theme/
      └── assets/
         └── fontawesome/
            ├── css/
            ├── webfonts/ <-- MUST sit next to "css/" inside "fontawesome/"
      ├── functions.php <-- Contains your custom PHP code

LOAD and register the Fonts

STEP 1. Load the Fonts in functions.php

To safely and efficiently load the Font Awesome library into our WordPress site, we must “enqueue” the style files inside a functions.php file. Custom features reside in this standard file. It’s like an orchestra conductor, telling the website where to find the files, and what sequence to use when loading them. It also prevents duplicate loading and plugin conflicts.

Create a Functions.php file

• If you don’t already have one, create a functions.php file. Open a code editor and create a new document named “functions.php”.
• Type in the first few lines to resemble this:

<?php
/**
 * Functions and definitions
 */
 
// Your custom WordPress code snippets will go here

Notice that you do NOT use an end tag — ?> — in the above code.

Enqueue Font Awesome

Add the enqueue code directly beneath the first few lines you just typed. The code should be similar to this (adjust as needed, based on your file paths, and font library):

 /**
 * Enqueue fontawesome
 */
// Font Awesome
function enqueue_optimized_fontawesome_7() {
    $fa_base_url = get_theme_file_uri( 'assets/fontawesome/css/' );
    // 1. Mandatory Core File
    wp_enqueue_style( 'fa-core', $fa_base_url . 'fontawesome.min.css', array(), '7.3.0' );
    // 2. Individual Lean Styles matching your webfonts
    $fa_styles = array(
        'fa-brands'  => 'brands.min.css',
        'fa-regular' => 'regular.min.css',
        'fa-solid'   => 'solid.min.css'
    );
    foreach ( $fa_styles as $handle => $filename ) {
        wp_enqueue_style( 
            $handle, 
            $fa_base_url . $filename, 
            array( 'fa-core' ), 
            '7.3.0' 
        );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_optimized_fontawesome_7' );
add_action( 'enqueue_block_editor_assets', 'enqueue_optimized_fontawesome_7' );

STEP 2. Register the Fonts in theme.json

Registering the font files in theme.json integrates the fonts into the FSE where it becomes a selectable option in Global Styles as well as a block’s typography dropdown. Normally, I would recommend adding fonts to the theme via the Full Site Editor (FSE). This process adds the fonts to the theme’s /assets/fonts folder and updates the theme.json with the font declarations. Yet, in our use case, it’s problematic for two reasons:

1. We need to retain the Font Awesome file structure: /assets/fontawesome/css and /webfonts
2. The FSE changed their original names!

Thus, the font names declared inside theme.json and their incorrect file paths essentially broke Font Awesome’s styling hooks.

So, I manually registered the fonts inside theme.json using this code:

"settings": {
    "typography": {
      "fontFamilies": [				
        {
	  "fontFace": [
	    {
	      "fontFamily": "\"Font Awesome 7 Brands\"",
	      "fontStyle": "normal",
	      "fontWeight": "400",
	      "src": [
	        "file:./assets/fontawesome/webfonts/fa-brands-400.woff2"
	      ]
	    }
	  ],
	  "fontFamily": "\"Font Awesome 7 Brands\"",
	  "name": "Font Awesome 7 Brands",
	  "slug": "fa-brands"
	},
	{
	  "fontFace": [
	    {
	      "fontFamily": "\"Font Awesome 7 Free\"",
	      "fontStyle": "normal",
	      "fontWeight": "400",
	      "src": [
	        "file:./assets/fontawesome/webfonts/fa-regular-400.woff2"
	      ]
	    },
	    {
	      "fontFamily": "\"Font Awesome 7 Free\"",
	      "fontStyle": "normal",
	      "src": [
	        "file:./assets/fontawesome/webfonts/fa-solid-900.woff2"
	      ]
	    }
	  ],
	  "fontFamily": "\"Font Awesome 7 Free\"",
	  "name": "Font Awesome 7 Free (Regular/Solid)",
	  "slug": "fa-free"
	}

Display the Icons in the Content Area

With manual configuration of the functions.php and theme.json for Font Awesome, the icons won’t display in the content area. I think it has something to do with the way the FSE renders blocks inside an iframe. If you are a developer, perhaps you know how to work around this caveat (or have the skills to figure it out) with additional code.

I found a simple solution: I installed the Font Awesome plugin. On a local development site, it won’t render the icons on the front-end due to LocalWP‘s API blocking. Yet, it does bypass the FSE’s iframe restrictions and manages the interface seamlessly. After plugin installation, you’ll be able to see the icons on the editor canvas!

Manual configuration in the theme files plus plugin installation adds up to a clean, compliant hybrid approach.

Use on a page or post

Now we’re ready to use Font Awesome icons!

Custom HTML Block

Without the WordPress Font Awesome plugin, we don’t have access to a block dedicated to these icons. So, let’s try the Custom HTML block.

STEP 1 – Copy the code from the 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.

STEP 2 – Insert the Custom HTML block

Back on our WordPress site, press Enter/Return to start a new, empty line of text. Then type a forwardslash “/” and “custom” to filter out the block options. When you see the Custom HTML 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 “custom” in the search field and select the block.

• Click the “Edit HTML” button
• In the HTML tab, insert the code snippet: <i class="fa-solid fa-dove"></i>
• Click the “Update” button

STEP 3 – Transform the Custom HTML block into a Group block

View the newly placed icon on the front-end of the page/post. Depending on your theme, it may display outside of the content width. When this happens, you simply transform the Custom HTML block into a Group block.

• Open the List View on the left side of the editorial area.
• Select the Custom HTML block.
• In the Toolbar, click on “HTML” and transform to “Group“.
• Save the page/post and view on the front-end. It should now be aligning with the rest of the content area:

Styling the Icon

There are various ways to style the icon on the Font Awesome site: size, color, rotation, flip, and animation. Play around with their options and copy the code that you like. In our demo, we’ll change the size and color.

• Open the List View on the left side of the editorial area.
• Select the Custom HTML block.
• In the Toolbar, click on “Edit Code“, edit the code with the following snippet, then click the “Update” button:

<i class="fa-solid fa-dove fa-2xl" style="color: #40831c;"></i>

You can add any inline code you want inside the Custom HTML block. Here, we’ve made the icon even larger than the “fa-2xl” class:

<i class="fa-solid fa-dove" style="color: #40831c; font-size: 3rem;"></i>

Placing the Icon

<p>Cupcake ipsum dolor sit amet soufflé. <i class="fa-solid fa-dove" style="color: #40831c; font-size: 3rem;"></i> Chocolate bar candy candy canes lollipop gummi bears cake marzipan. Lollipop tiramisu gummies topping fruitcake fruitcake. Sweet roll gingerbread cupcake carrot cake liquorice sesame snaps apple pie ice cream.</p>

Paragraph block > Edit as HTML

Type the content in a regular Paragraph block. Then, select the block, go to the Toolbar, click on the Options (3 vertical dots), select “Edit as HTML“. Insert the Font Awesome code. You can then return to the Toolbar and click on “Edit Visually“. This may feel easier, but the icon won’t display in the editor with this technique. It will display on the front-end.

<p>Sweet roll gingerbread cupcake carrot cake liquorice sesame snaps apple pie ice cream. <i class="fa-solid fa-dove" style="color: #40831c; font-size: 3rem;"></i> Marshmallow topping candy chocolate cake lollipop. Cotton candy sweet cake marshmallow sugar plum wafer. Pastry pie croissant lollipop tootsie roll brownie.</p>

Paragraph block > Edit as HTML results:

Sweet roll gingerbread cupcake carrot cake liquorice sesame snaps apple pie ice cream. Marshmallow topping candy chocolate cake lollipop. Cotton candy sweet cake marshmallow sugar plum wafer. Pastry pie croissant lollipop tootsie roll brownie.

In a Navigation Menu

In Part 1 of this series, I wrote about the plugin’s limited use in navigation menus. What does work are PNG files and the HTML code snippets, each accessed on the Font Awesome website. When you install Font Awesome manually, you can use both methods on a block theme and a classic/hybrid theme.

/* 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 */
}

HTML Code Snippet

Insert the code manually into a navigation menu. There are 2 parts to the process:

Part 1 – Font Awesome website

• Search for the icon on the Font Awesome website – in this example, “peace“
• Click on the dove. Copy the HTML code snippet.

Part 2 – Navigation Menu

(Classic/Hybrid Theme)

• Go to the nav 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

Part 2 – Navigation Menu

(Block Theme)

• Go to the nav menu you want to edit.
• Select a nav item
• Settings sidebar:
  • Content tab > TEXT field: spaceband for an empty space
  • Content tab > Fill in the URL field
  • Content tab > DESCRIPTION field: icon name
  • Settings tab > Additional CSS Class(es): add the class name(s) from the code snippet (“fa-brands fa-bluesky“)
  • Styles tab > Typography > Font: select the Font Awesome font from the dropdown menu