In this guide I will be describing a simple way to add Font Awesome icons to your WordPress navigation menus. For example, if you want to add a user icon to your “my-account” link, you will be able to just add fas-user as a class to your menu-item.
Prerequisites
- You need to have some experience editing theme files. If you don’t have experience creating or editing themes, you should consider hiring a WordPress developer.
- Font Awesome should already be loaded on your page. You can install Font Awesome from their CDN, or use a package manager (npm/yarn). If you don’t use a lot of icons or you want to add custom icons, you should use npm/yarn.
How to
1. Create a custom walker
The name for our walker class will be Icon_Walker. I’m using Composer’s autoload feature, so my class will be located in App/Walkers/Icon_Walker.php.
If you aren’t autoloading your classes with composer, you will need to include the file containing the custom walker from functions.php. This file would typically be located in a directory named includes, but you can choose this location however you like.
You first need to define your class. If you’re not using composer, you don’t have to define the namespace.
<?php
namespace App\Walkers;
class Icon_Walker extends \Walker_Nav_Menu {
}
You only need one method inside this class: start_el. You can find the blueprint for this method in wp-includes/class-walker-nav-menu.php. Copy over the start_el method to your custom class.
Somewhere at the end of this method, the output is defined inside a variable called $item_output. You need to add some custom code inside the <a> tag. You can append this to $args->link_before.
Add this code at the very beginning of the start_el method:
foreach ( $item->classes as $key => $class ) {
preg_match( '/^(fa[srldbc]?-)/', $class, $matches );
if ( ! empty( $matches ) ) {
$fa_prefix = rtrim( $matches[0], '-' );
$icon = ltrim( ltrim( $class, $fa_prefix ), '-' );
$args->link_before .= '<i class="' . $fa_prefix . ' fa-' . $icon . '"></i>';
unset( $item->classes[ $key ] );
}
}This piece of code will
- Iterate over each class, and check if the class starts with
fas-(for solid icons),far-(for regular icons),fal-(for light icons),fad-(for duotone icons),fab-(for brand icons),fac-(for custom icons) - If it does start with one of these prefixes, get the prefix from
matches[0], and remove the trailing “-“ - Get the icon by removing the prefix + “-” from the class
- Put together the
<i>-tag - Remove this class from the list, to clean up our
<li>
2. Apply the custom walker to your navigation menu
Instead of calling
wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav']) in your template, you need to call
wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav', 'walker' => new \App\Walkers\Icon_Walker()])If you’re not using namespaces, you need to remove \App\Walkers\.
3. Add the custom class to your menu item
Go to the WordPress admin > Appearance > Menus. Select your menu item, make sure the “CSS Classes” – box is visible using Screen Options. Add the custom class in this format: [prefix]-[icon-name-without-fa]. E.g. fas-beer.