Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Add Icons To The Divi Menu

Nelson Miller Profile Orange
In this tutorial I will show you how to add icons to the Divi Theme Builder Menu module, in the main menu, the submenu, or in a mega menu!

▶️ Please watch the video above to get all the exciting details! 👆

Add Icons To The Divi Main Menu Links

The first snippet here will apply to the top-level menu items. Again, this will work with the default Divi module, or it will work in the Theme Builder or anywhere else using the Menu module. After we copy and paste the code, we can talk more about customizing it like replacing the icon or colors.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*add icon to Divi main menu items*/

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

Add Icons To The Divi Menu Submenu Dropdown Links

This second snippet applies the icon to the submenu links. So this will add an icon to the Divi menu dropdown items in the Menu module or in the default menu. The same process applies here, just copy the code and paste the code into your website.

/*add icon to Divi submenu items*/

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

Different Icons For Different Menu Links

So far, the snippets above would apply the same icon to all the main menu or submenu links. That might be fine for you, and it works great on my site, but you can also set a different icon for each of the menu items. All we have to do is add a new CSS class for each menu item.

Here’s an example of adding a custom class to a menu item.

add css class to Divi menu

And here is how we would target that menu item. We want to add a cart icon, so we add “e015” to the CSS snippet (see step below for more information about this).

.pa-menu-shop > a:before {
    font-family: 'ETMODULES';
    content: '\e015';
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: -10px;
    color: #2cba6c;
    font-size: 1em;
    transition: all .3s ease;
}

Here is how that would look:

example of how to add menu icons to Divi

Now you can go ahead and repeat this for any icon next to any menu item!

Choosing The Icons For The Divi Menu

The obvious step here is to replace the icon (or keep the arrow if you like it). Here is where you get to choose an icon from either the built-in Divi ETModules icon font family or the Font Awesome icon font family.

There are several great choices for icons to add to your Divi menu Module. I’m going to talk about two in this tutorial, since the one set is built-in to Divi and the other is easily integrated.

1. ETModules

The first set of icons you can use are the one that come built-in to Divi by default and require no other steps to activate. All you have to do is choose an icon and then add that to the CSS snippet that I will give. You can learn more about these icons on the Elegant Themes blog post here. You will need to reference this to get the icon codes.

In the code snippets, we already have “font-family: ‘ETMODULES’;” as the font family, so if you any of these icons you won’t have to change anything. 

You can choose any icon you want. 

choosing a divi ETModules icon for your divi menu

This is just screenshot of some of the icons available. The part that can be confusing here is the icon code. You don’t actually need the first part of the code, so you can disregard the &#x part of it. So for the fourth one here you can see we only used “24” to get the arrow.

2. Font Awesome

The second set of icons you can use is Font Awesome. If you already have Font Awesome integrated with your website then you are good to go. Otherwise, check out our tutorial on How To Add Font Awesome To Divi.

How To Connect And Add Font Awesome Icons To Divi Tutorial by Pee Aye Creative

To use a Font Awesome icon, you will need to replace the font family in the snippets. But don’t worry, it’s very easy. Just change the “ETModules” to “Font Awesome 5 Free.”

The next line in the CSS is the icon code. You can replace the “24” with the icon code from Font Awesome. Simply go search their icon library and click on an icon. Then, copy the Unicode as shown in the image below.

choosing a Font Awesome icon for your divi menu

In this example, the icon Unicode is “f102,” so all we have to do is add this to the CSS snippet like “content: “\f102″;” and the icon will appear.

Adding Cool Hover Effects To The Divi Menu Icons

Now that we have pasted the snippets into our website and selected the icons, let’s customize the icons a little. On our site here, we have two things happen when you hover over the submenu items. The icon changes color, and the icon and link move to the right. Here’s a snippet you can add to achieve this:

/*change color and position of submenu icon on hover*/

nav li ul li a:hover:before {
    margin-left: -7px;
    color: #e03574 !important;
    transition: all .3s ease;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

34 Comments

  1. Jeremy

    One more question,would you let me know how to add a custom icon on the submenu?

    Reply
  2. Sara

    What CSS would I use to add an icon to the right of a fullscreen menu item on hover?

    Reply
  3. Streater

    This worked great on my header navigation menu! Just what I was looking for because I wanted the icons next to the link to respond the same way as the link (hover, and clicking)…

    BUT I can’t get it to work on the mobile drop down menu… tried messing around with the code in every way possible… either I can get the icon to respond with the link BUT the customizations for the appearance of the icon are gone/not being used. OR the old way where the icon appearance is customized but the icon isn’t clickable or it doesn’t have the same hover settings as the menu link.

    Is there anyway to get this to work on the mobile menu???? I know these instructions are for a menu on a page and not for navigation… BUT I’ve been searching all over the internet for days AND this is all I’ve found that has worked at all… funny enough after all my long searches, I always find the answers from your site

    Reply
    • Streater

      Nevermind… finally figured this out with the select element… works! Thanks for this post… literally spent 2 days finding how to make the pseudo element a part of the parent element so you can click on it and make the hover respond the same way and all I needed was to add the letter ‘a’ in front of :before … this was the only article that event mentioned this

      Reply
    • Nina

      Can you explain this to me please, I’m struggling with mobile menu too 🙁

      Reply
  4. Vicky Etherington

    This is great – thank you so much. I wonder if it would be possible to include an icon above the menu link to get this kind of effect: https://jimmysfarm.com/

    Would you use a similar technique?

    Reply
  5. tabasko

    Hi there ! thanks for the tuto.
    I feel like “Font Awesome 5 Free.” or even “Font Awesome\ 5 Free” etc. are not recognized.

    .menu-login > a:before {
    font-family: ‘Font Awesome 5 Free’;
    content: “\f102″;
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    margin-left: -10px;
    color: #2cba6c;
    font-size: 1em;
    transition: all .3s ease;
    }

    Reply
  6. Spencer

    Another great tutorial Nelson, thanks. Has the new divi icon updates changed the way this works at all?

    Reply
  7. Walter

    Great tutorial. Thank you. Two quick questions:

    I was wondering, how you can show just the icon without the label in Divi’s classic primary menu?

    Also, with the latest Divi update new icons have been integrated. But I could not find a blog which features the code for all the new icons added to Divi. Any ideas?

    Thanks,
    Cheers,
    Walter

    Reply
    • Hemant Gaba

      Hey Walter,

      The Divi icons show up when we use a font family ETMODULES but that font family can be applied to the Divi Builder header and not on the default one. So to add the icons to the menu you can set up Font Awesome on the website(whose guide is available) and then you can place the icon code before the Menu item name in WordPress Dashboard > Appearance > Menus and by doing that you will have a lot of icon options and you can display the icons in the menu successfully.

      Let me know how it goes.

      Reply
  8. Tim

    I’m getting two arrow icons now showing up after I create a child theme instance. Even after deleting the child theme, they are remaining. Any advice?

    Reply
  9. Marcoduv

    Hi,
    Thank you for the great tuto.

    I use the “nav li ul li a:hover:before” to change color and position of submenu icon on hover as you mentioned. It works fine!

    But how I can apply the same value on the icons when the menu item is active?
    Thank you for your help.

    Reply
    • Hemant Gaba

      Hey Marcoduv,

      Could you please share the URL of the page for me to investigate it further for you?

      Reply
  10. Chris Herrera

    Hi Nelson, incredible tutorial! it was so cool, but i need some help with it, recently i added some icons to my menu like the tutorial said, but, my icons look like other icon than that i really put 🙁 its more like this ” 7 home – (insert here another random icon that obviously im not put it there) know how – 8 contact ” i cant find any idea of whats the problem, i hope you can help whit it 🙂

    Cheers!”

    Reply
    • Hemant Gaba

      Hi Chris
      Could you let me know what code you’re using for adding the icons?

      Reply
      • Chris Herrera

        Of course, the code is:

        .pa-menu-inicio > a:before {
        font-family: ‘ETMODULES’;
        content: ‘\e0d5’;
        text-align: center;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: -10px;
        color: #6B4400;
        font-size: 1em;
        font-weight: 900;
        transition: all .3s ease;
        }

  11. Tomás Saint-Romain

    I loved the tutorial!
    But unfortunately the icons are not working on my website neither with ETModules nor with Font Awesome 5 Free.
    The problem is that it shows it in the visual builder but not in the front end of the web. I do not know what is happening since I did everything the same as in the tutorial, is it a plugin or something like that? If you have any solution I would be grateful, likewise if you could see if it still works it would be great!

    Reply
  12. Nate

    Any reason why the icon would show up while I was logged into the wordpress admin but not show up when I’m not logged in?

    Reply
  13. Sagar

    its not working in mobile view submenu, is there anything wrong i might be doing?

    Reply
    • Hemant Gaba

      Hi Sagar!

      Could you please share the URL of the page for me to investigate it further for you?

      Reply
  14. Zoe

    Hello. This was working fine in older versions, but I cannot get it to work with Font Awesome 6. I changed the verbage in the code to “Font Awesome 6 Free” to no avail. Any suggestions?

    Reply
    • Hemant Gaba

      Hey Zoe!

      Font Awesome 6 is not available via the Font Awesome CDN till now. How are you integrating the Font Awesome 6 with WordPress so that I can check via same process?

      Reply
      • Zoe

        Hi. I textbook followed above which worked fine on my other websites.My other sites arent using the FA plug-in or anything. Just the code above. For example this works fine on the another website: nav li a:before {
        font-family: ‘Font Awesome 5 Free’;
        content: ‘\45’;
        text-align: center;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: -10px;
        color: #3F4E71;
        font-size: 1em;
        transition: all .3s ease;
        }

        .fl-menu-home > a:before {
        font-family: ‘Font Awesome 5 Free’;
        content: ‘\f654’;
        text-align: center;
        vertical-align: middle;
        margin-right: 10px;
        margin-left: -10px;
        color: #53658E;
        font-size: 1em;
        transition: all .3s ease;
        }

      • Zoe

        Hi. Its the exact code above that worked fine for me all this time. Now since Font Awesome 6 the code above doesnt work anymore.

  15. Daniel Cooper

    Please help, is there any way to change the style of the icons when it is fixed? I would like to change the color of the icons when it’s a fixed header. Thanks so much!

    Reply
    • Hemant Gaba

      Hi Daniel!

      For the default header, add the following code to change the color of the icon fixed header:

      .et-fixed-header nav li a:before, .et-fixed-header nav li li a:before {
      color: red;
      }

      For theme builder sticky header, add the following code:

      .et_pb_sticky nav li a:before, .et_pb_sticky nav li li a:before{
      color: red;
      }

      Let me know how it goes!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart