How to Add Icons to the Divi Menu

Your website’s navigation menu is the roadmap for your visitors, guiding them through your content. While text links are functional, adding icons can dramatically enhance visual appeal, improve user experience, and even save valuable space, especially in modern, minimalist designs.

Imagine a little house icon next to your “Home” link, a shopping cart icon by your “Shop,” or a mail icon beside “Contact.” These small visual cues make your menu more intuitive, scannable, and engaging, guiding users with a glance rather than just text.

A Visually Enhanced Divi Menu

In this tutorial, we’re going to show you how to easily integrate beautiful icons directly into your Divi menu items. This customization allows you to create a more polished, modern, and user-friendly navigation system that stands out. We’ll be leveraging custom CSS to place these icons right where you want them, adding that extra layer of visual polish to your Divi website.

Whether you’re using Divi’s standard header, a custom Theme Builder header, or a full-width menu module, this technique can be applied to give your menu items that visual pop.

For a complete, step-by-step visual guide on how to add icons to your Divi menu, be sure to watch our detailed video tutorial:

[Coming Soon]

Implementing Icons in Your Divi Menu

To add icons to your Divi menu, you’ll primarily be working with custom CSS to target specific menu items and insert the icon via CSS pseudo-elements. The video tutorial will walk you through the precise steps in WordPress Dashboard (Appearance > Menus) and then where to apply the CSS code (e.g., within Divi’s Theme Options Custom CSS, a Code Module, or your child theme’s style.css file).

Pay close attention to the video for how to identify the correct menu item IDs or classes to target for each icon.

Custom CSS Code

This CSS will be responsible for inserting the icons and styling them. We will be using Elegant Themes icons to get the icon’s content code. You can access all the codes at the following article: https://www.elegantthemes.com/blog/resources/elegant-icon-font

Single Icon Added to Divi Menu

If you want to have just one icon that will display before every menu item then you can use the code below.

nav li a:before {
    font-family: 'ETMODULES';
    content: '\e009'
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: 0px;
    color: #d3eb58;
    font-size: 1em;
    transition: all .3s ease;
}

Quick Tip: The codes can also be entered using only the last two digits of the code. If that does not work then add an e with the last three digits and that should work.

If by any chance you want to let each menu item have their own icon, then use the code below.

Multiple Icons Added to a Divi Menu

Before you can get started with the CSS here, you will need to add a CSS Class to each of your menu items.

Assigning CSS Classes to Menu Items (Crucial Step!)

The first crucial step, which is demonstrated in the video, is assigning a unique CSS Class to each specific menu item in your WordPress menu settings (Appearance > Menus) where you want to add an icon. This allows our CSS code to target only that specific link. If you do not see this option, please be sure to watch the video above to see how to activate it.

As an example I want to add a house icon to my home menu item, I will add the class:

dd-menu-home

and then I will target this class in the CSS:

nav li a:before {
    font-family: 'ETMODULES';
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: 0px;
    color: #d3eb58;
    font-size: 1em;
    transition: all .3s ease;
}

/* To add more menu items just repeat the code below with the class names you added to your menu */	
.dd-menu-home >  a:before {
    content: '\e009';
}

For the other menu items you will only need to repeat the code at the bottom.

A Polished & Intuitive Divi Navigation

And there you have it! With a straightforward application of custom CSS and a clear understanding of how to target your Divi menu items, you can effortlessly integrate eye-catching icons into your navigation. This simple yet effective enhancement makes your menu more scannable, visually engaging, and ultimately, more user-friendly.

We’re excited to see how you use icons to make your Divi menus pop! Experiment with different icon styles and placements to find what works best for your site’s aesthetic. Happy Divi designing!