Adding icons to your menus

I will be showing how to use Font Awesome icons to a Classic WordPress theme and a Full Site Editing theme. I will also show how to use WordPress own Dashicons.

Adding Font Awesome icons to your menu

You can use the Font Awesome WordPress plugin. Another plugin such as Menu Icons plugin which uses multiple icon types or set it up manually with code.

The manual approach.

In your child theme functions.php file or a code snippet plugin add the following:

// Load Font Awesome version 6.
add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
  wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v6.2.0/css/all.css' );
} 

Or use this code: (DOES NOT WORK)
—> This code does not work and shows the wrong icon to signal that something is not working.

// Load Font Awesome version 5.
 add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
 function enqueue_font_awesome() {
 wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
 }

Depending on what kind of theme you are using the approach will be different.
One has the classic “regular” WordPress themes and the new Full Site Editing (FSE) themes.

A “Classic” WordPress theme.

Go to Appearance -> Menus.
Create a menu or use an existing menu.
Click Screen Options top right. Click the checkbox for CSS Classes. (See example below.)
In your menu decide which link to begin adding an icon to.

Choose from various Font Awesome icons. Do a search for a specific icon on the Font Awesome icons overview page, scroll the list or select a category in the left sidebar. In the below example I use an icon called user.

When you click an icon, a modal will open. Here we can decide on variations of the specific icon.
We need to copy the class name fa-solid fa-user which will be used in the Menu link CSS Class field.

User icon Font Awesome
User icon Font Awesome

Screen Options: CSS Classes has been clicked so that it seen for each link added to the menu.
Menu item – About: Notice that I have pasted the fa-solid fa-user Font Awesome code into the CSS Classes field.

Add Font Awesome icons into Menus in WordPress
Add Font Awesome icons into Menu in WordPress

Save the Menu and check your front page. This is what I see. The solid user icon has been added to the left of the About menu link.

Adding Font Awesome icon to menu in WordPress - Frontend
Adding Font Awesome icon to menu in WordPress – Frontend

Additional adjustments through CSS.

In the browser I right clicked the menu area and selected “Inspect”. HTML is seen on the left and CSS on the right (your layout might be different). I moved the cursor up and down the HTML code to highlight the elements seen on the frontend of the page to give an idea which element I had selected. I found the Font Awesome icon and in the CSS area I added some additional code.

Inspect Element in Browser. Seeing the HTML and CSS. Font Awesome icon is selected.
Inspect Element in Browser. Seeing the HTML and CSS. Font Awesome icon is selected.
.fa-user:before {
    content: "\f007";
    padding-left: 10px;
    color: green;
}

If you want to pin point the code further you can also add the class ahead of it like so.
.menu-item-675.fa-user:before (It can be seen in the above screenshot where the cursor is located.)

NB!
Adding the code through the CSS in the Elements area of the browser is only temporary and when you refresh the page the added code is gone. The code needs to be copied into your child theme style.css, a code snippet plugin, or the Appearance -> Customize -> Additional CSS section for it to become permanent.

Resource used: How to add Font Awesome icons.

Adding an icon to a Full Site Editing (FSE) theme

There are some differences between adding an icon to a Classic theme compared to a Full Site Editing theme. I will mention the differences.

In a full Site Editing theme the Appearance drop down has changed. The links Themes, Customize, Widgets, Menus and Theme File Editor has been replaced with Themes and Editor (beta). This makes adding custom CSS to the Customize area more tricky. One still has access but now only through a direct link: https://yourwebsite.com/wp-admin/customize.php

WordPress Appearance drop down in Full Site Editing
WordPress Appearance drop down in Full Site Editing

There are alternatives. Such as adding a child theme to where one can add CSS to the style.css file.
Or a code snippet plugin to where one can add CSS.

As mentioned at the beginning of this tutorial. Add the code to load Font Awesome icons. Be it through a child theme functions.php file or a code snippet plugin.

Choose from various Font Awesome icons, and select the icon you want to use. Copy the i class CSS. The difference here is that we can not copy the CSS into the Appearance -> Menus screen but instead adding it into the (Site) Editor. Go to the Editor, click the Nav block (Header is selected), click a link (Navigation is selected) and click again and notice the individual link is selected. Click Advanced in the settings sidebar. In the Additional CSS Class(es) ass the icon you want to use. I am adding fa-brands fa-font-awesome. Also notice the hierarchy on the bottom of the screenshot seen as breadcrumbs. It gives a good signal to where one is located.

Full Site Editing in WordPress. Adding a Font Awesome icon to Navigation link
Full Site Editing in WordPress. Adding a Font Awesome icon to Navigation link.

Save the page. Click the View button and in the drop down click View site. The icon is added but the result is not what I hoped for. (It will gradually be fixed through the Gutenberg Github repository. Or perhaps it is only the test site that is getting the error. Anyhow you get the idea of how it works.

Full Site Editing Navigation block in WordPress. Adding Font Awesome Icon - Results on the Frontend of the site.
Full Site Editing Navigation block in WordPress. Adding Font Awesome Icon – Results on the Frontend of the site.

Using Dashicons

Dashicons are used for the backend admin links can also be used in the menus or other places.

Add the following to your child theme functions.php file or a code snippet plugin.

//* Enqueue Dashicons	 	 
add_action( 'wp_enqueue_scripts', 'enqueue_dashicons' );	 	 
function enqueue_dashicons() {	 	 
 wp_enqueue_style( 'dashicons' );	 	 
}	

Go to Dashicons web site. Find an icon you want to use. Click Copy CSS and copy the code seen. Add the Dashicon icon and the font-family to your child theme style.css, customize CSS section or code snippet plugin. Experiment with the CSS.


The CSS:

/* Home link */	 	 
.menu-item-596 a:before {	 	 
 font-family: 'dashicons';	 	 
 content: "\f106";	 	 
 font-size: 16px;	 	 
 color: red;	 	 
 padding-right: 3px;	 	 
}

CSS Styling tips

Using a:before adds the icon before the menu title.
Using a:after adds the icon after the menu title.

One can add a hover effect to the icon by adding the word hover:
a:hover:before or a:hover:after.

An example.

/* Font Awesome icon */
.menu-item-30 a:before {
   content: "\f01c";
   text-shadow: 1px 1px 1px #000;
   font-size: 16px;
   cursor: pointer; /* Changes the cursor. */
}

/* Hovering over the link changes to another icon. */
.menu-item-30 a:hover:before {
 content: "\f003";
 text-shadow: 1px 1px 1px #000;
 font-size: 16px;
 cursor: pointer;
}

Another example of using Font Awesome icons is from my styling a Ninja Forms contact form tutorial.

Share the article:

Leave a Reply

Your email address will not be published.

one × 2 =