Adding Icons To Your Divi Menu
Another Divi Menu Tutorial
At this point we have quite a lot of Divi menu tutorials, and I know many of you are thrilled about that. We still have more in our series on the Menu module, but the cool part about the tutorial today is that we made the code work with both the default Divi menu and the Menu module. I have been wanting to show you how to add icons to the Divi menu, and I’m finally get to it!
Icons are a nice way to add a lot of interest to your menu. The right icon will give the use that sublte indication of what the link is about, but they also look really. I’ll also throw in a bonus at the end and show you how to achieve a cool hover effect!
▶️ 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.
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:
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.
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.
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.
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;
}
Hi!
Displaying icons before the menu item works fine. Now I want to show only the icon without the menu text. Unfortunately, I can’t find any code for this. How does it work?
Thanks for any help!
Hi there!
Please add the custom menu item in the menu and add the following HTML in the navigation label for adding the menu item without text
Hope it helps!
Hi! I only want to display the icon without the menu text. Unfortunately, I can’t find any code for this. How does it work?
Thanks for any help!