How to Add Icon to a Menu Item in WordPress (without Plugin)

Are you tired of your menu looking plain? Want to add visual flair and improve the user experience? Adding icons to your WordPress menu items is a simple yet powerful way to achieve both, and the best part? You don’t even need a plugin!

This tutorial will walk you through the process step-by-step, from uploading your icons to utilizing CSS snippets to style them. Regardless of your level of experience with WordPress, we will provide you with the skills and resources you need to turn your menu into an eye-catching masterpiece without relying on any plugins.

Steps to Add Icon to a Menu Item in WordPress

Step 1: Select your Preferred Icon

First of all, you need to choose which icon to add to the menu item. Many great icon libraries and toolkits are available online, such as Font Awesome, Iconify, etc.

In this tutorial, we will use Iconify to search for the icons we want to add to the menu item. Iconify allows you to use many open-source icon sets with a wide choice of open-source icon components, so we recommend you use Iconify to make it easier.

Alright, go to the Iconify site, then search and choose which icon you like to add to the menu item.

Step 2: Copy the SVG Icon’s Code

Once you choose the icon, please copy the SVG code of the icon.

For this example, we will choose a call center icon and then add it to one of our menu items.

Step 3: Edit the Menu Item

Here, you need to apply some changes to the menu item to which you want to add the icon: add the code of the SVG icon and add a CSS class.

Add the SVG Icon’s Code to the Navigation Label

On your WordPress dashboard, navigate to Appearance -> Menus.

Once you enter the Menus settings screen, select the menu item(s) to which you want to add an icon, then go to the Navigation Label by clicking the drop-down button.

Afterward, paste your SVG icon’s code into the Navigation Label field. You can put the SVG icon’s code before or after your menu item. This means if you want to place the icon before the menu item, you must paste that code before a menu item; it’s the other way around too.

In this example, we want to place the icon before the menu item “Contact Us,” so we paste our SVG icon’s code before the menu item.

Add the CSS Class

Next, we’re going to add a CSS class to the menu item.

Please add the CSS class “wpp-menu-item-icon” to the CSS Classes input field.

Note: If the CSS Classes (optional) do not appear on your menu items, please enable them on the Screen Options. Click on Screen Options at the top right corner of the screen. then check the box next to CSS Classes.

Once you’ve finished editing your menu item(s), apply the changes by clicking the Save Menu button.

Step 4: Add the Custom CSS

Well, the SVG icon is successfully added to your menu item (visit your site), but its looks are not good. So, we will add a simple CSS snippet to the WordPress Customizer CSS editor. to make their appearances look proper.

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS.

Copy the CSS snippet below and paste it into the input field. A little note. If you use a block theme, you may need to enable the theme customizer first.

Here is the CSS snippet you can use:

    .wpp-menu-item-icon {
        display: flex;
        align-items: center;
        }
    
    .wpp-menu-item-icon svg {
        width: 13px;
        height: 13px;
        margin-right: 4px;
        }
    
    .wpp-menu-item-icon svg path {
        fill: #ffffff;
        }

The Code Explanation:

Here’s a breakdown of the CSS code:

1. Targeting the Menu Item Element:
   • .wpp-menu-item-icon : This part targets all menu item elements with the class name “wpp-menu-item-icon“.
2. Styling the Container:
   • display: flex; : This makes the container a flexbox, enabling the flexible arrangement of its contents.
     align-items: center; : This centers the items within the flexbox vertically.
3. Styling the Icon (SVG):
   • wpp-menu-item-icon svg : This targets SVG icons within the container.
   • width: 13px; : Sets the width of the icon to 13 pixels.
   • height: 13px; : Sets the height of the icon to 13 pixels.
   • margin-right: 4px; : Adds a 4-pixel margin to the right of the icon, creating spacing.
4. Styling the Icon’s Path (Specific to SVGs):
   • .wpp-menu-item-icon svg path : Targets individual paths within the SVG icon.
   • fill: #ffffff; : Sets the fill color of the paths to white.

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

That’s it. Repeat the steps above (1–3) if you want to add the icon to other menu items.

The Bottom Line

Adding icons to your WordPress menu items is a great way to improve the visual appeal and usability of your navigation. By following the steps outlined in this article, you can easily add icons to your menu items without using a plugin.

This will not only make your website look more professional, but it will also make it easier for visitors to find what they are looking for.