How to Add Icons to Your Divi Menu
In this tutorial, which is perhaps the most requested tutorial I’ve received, I show you How to Add Icons To the Divi Menu! And while there are numerous ways to do this, I’ll how you how I do it without the use of plugins, font awesome or unneeded imported images. My goal in all of my Divi website designs is to do things lightweight, flexible and without the use of external plugins or things that can break with updates. Ideally, I try to use CSS that’s global, easily customized and flexible. And that’s exactly what you’ll learn in this tutorial!
With that said…enjoy, have fun, let me know if you have any questions and if you use this on your own site(s), be sure to comment on the post with a link for me to check out! – Josh
/*-----------------Menu Icons---------------- */
.menu-home:before {
font-family: 'ETmodules';
content: "\e074";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-home {
width: 110px;
}
.menu-services:before {
font-family: 'ETmodules';
content: "\e035";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-services {
width: 132px;
}
.menu-about:before {
font-family: 'ETmodules';
content: "\e08a";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-about {
width: 150px;
}
.menu-blog:before {
font-family: 'ETmodules';
content: "\e086";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-blog {
width: 100px;
}
.menu-contact:before {
font-family: 'ETmodules';
content: "\e07e";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-contact {
width: 132px;
}
@media only screen and (max-width: 980px) {
.menu-home:before {
margin-top: 8px;
}
.menu-services:before {
margin-top: 8px;
}
.menu-about:before {
margin-top: 8px;
}
.menu-blog:before {
margin-top: 8px;
}
.menu-contact:before {
margin-top: 8px;
}
}
content: url(REPLACE_THIS_URL);
I did some digging around to see if I could figure out how to make this a little easier on all of us and I figured out a way to dramatically decrease the amount of CSS above. Instead of adding the icon to the container of the menu link, we can actually edit the link itself! For example, instead of “menu-services:before,” we can do “menu-services a:before” which will affect the link itself so we don’t need to add any particular width! I recommend now using the revised code below.
AND with this updated code, you don’t need to make any special customizations for mobile!
/*-----------------Menu Icons---------------- */
.menu-home a:before {
font-family: 'ETmodules';
content: "\e074";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-services a:before {
font-family: 'ETmodules';
content: "\e035";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-about a:before {
font-family: 'ETmodules';
content: "\e08a";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-blog a:before {
font-family: 'ETmodules';
content: "\e086";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-contact a:before {
font-family: 'ETmodules';
content: "\e07e";
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
Use this code to hide icons on the sub-menu. Otherwise, drop downs will automatically show the icon of the parent item above.
#top-menu li li a:before {display: none;}Other tutorials and resources like this:
- https://www.elegantthemes.com/blog/divi-resources/how-to-add-icons-to-the-divi-menu-divi-nation-short
- https://divi.space/divi-tutorials/divi-menu-icons-without-plugins-or-font-awesome/
- https://quiroz.co/adding-extra-fields-and-icons-to-the-top-header/
- https://divilife.com/creating-full-width-dropdown-menus-with-icons-in-divi/
- Tutorial using FREE a plugin.
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Love your tutorials Josh. For me the CSS isn’t the problem but I like seeing ideas I hadnt really thought of before. I was wondering what tool you use for the different views (mobile, tablet, etc). I use Window Resizer but yours looked much easier to handle.
Thanks, Natalie! I use Inspect Element on Google Chrome. If you use Chrome as your browser, it comes built in!
I had never seen Chrome had the responsive stuff build in too!!! OMG how could I miss that. I always use F12 (inspect element). Thnx Josh!
No worries, Natalie! I’m still finding things out about inspect element. I seem to find a new feature every week 🙂 I’m still learning this stuff one day at a time too!
Hello Josh
I’m new to Divi and CSS. How do I access style sheet ? Sorry not familiar with it.
Thanks
Here ya go! https://joshhall.co/where-to-put-your-custom-css-in-divi/
Thank you for this tutorial. I did this on one website using the Font Awesome icons and didn’t know that it’s possible even without it. Next time I’ll do it this way. 🙂
Thanks, Andrej! That’s awesome to hear. Yeah font awesome is another solid option, but I’ve found this method to be the most lightweight and flexible. Thanks for your feedback!
Hi Josh
Nice tutorial. It’s always great when you can avoid adding another plugin.
FYI – You can really shorten the css code by setting up the repetitious attributes under one declaration. I’ve pasted the code below. Not sure how that will present in a comment so here is a ink to a screenshot: https://www.dropbox.com/s/j369u6vfnws5znk/JoshHall_divi-icons.png?dl=0
[class^=”menu-“]:before,
[class*=” menu-“]:before {
font-family: ‘ETmodules’;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-home:before {
content: “\e074”;
}
.menu-home {
width: 110px;
}
.menu-services:before {
content: “\e035”;
}
.menu-services {
width: 132px;
}
.menu-about:before {
content: “\e08a”;
}
.menu-about {
width: 150px;
}
.menu-blog:before {
content: “\e086”;
}
.menu-blog {
width: 100px;
}
.menu-contact:before {
content: “\e07e”;
}
.menu-contact {
width: 132px;
}
This great, Jules! Thanks so much for recommending and posting that. I knew there was a way to shorten it but hadn’t looked into it further. I may do another tutorial like this and use this method in hopes to explain how it works for newbies to CSS.
Thanks again!
Great stuff Josh – your tutorials are really clear (unlike so many others I struggle with)!
I used the CSS only for my home link on the menu bar of the site I am working on (https://thaimassagekhaolak.com/) because of size issues. But I will use the CSS code for other sites with fewer internal linked pages.
Looks great, Eddie! Yeah I found with bigger menus, icons can be a little tricky. You can always lower the font size and adjust the padding but I think it’s probably safe to use them for menu’s with 5-7 items.
Cheers!
Another brilliant tutorial Josh! These are truly gems, not just because of what you accomplish in the tutorial, but rather the way it is presented, the unique ideas presented, and your easy to follow videos. You’re guaranteed to learn something! ? ?
That feedback is much, much appreciated Michael! Thanks for the encouragement man.
For me the CSS isn’t the problem but I like seeing ideas I hadnt really thought of before. I was wondering what tool you use for the different views (mobile, tablet, etc). I use Window Resizer but yours looked much easier to handle.
Thanks, Ingic. Yeah figuring out the concept idea is most of the battle 🙂 I use inspect element on Chrome!
Hi Josh,
What plugin do You use to put CSS code and save it right in to Divi WP site?
I use Custom CSS box in Divi Theme options and would know how U do it
THX!
Hey Tom, I’m actually planning on doing a tutorial on how I do it. But in short, I go through FTP and open up the stylesheet to my child theme directly. Will have that tutorial up soon!
Here you go, Tom! https://joshhall.co/where-to-put-your-custom-css-in-divi/
Thank you for the update. I was wondering why it looks different of Safari & Firefox? (Looks great in Chrome)
The updated version should look much better on Safari and FF now! Yeah now I need to record a new one 🙂
Hi Josh,
Great tutorial. It works for me for the home page but none of the other pages unfortunately. I’ve duplicated the code and only changed the ‘menu-x’ so it should work for the other pages but only the icon for the home page is appearing. Any idea as to why this may be happening?
Thanks in advance.
mmm not sure, Dylan. If you followed each step on my tutorial, it should work! Haven’t seen that before. Sorry wish I could be of more help on that.
Hi Josh.
This is going slightly off the topic of menu, but it’s icon related & hope you can help! I’ve spent the last few hours hunting and am stuck. Reading though the comments in ET’s Divi Icon list article you linked to, it seems like people either know how to do it or don’t! I’m one of the don’t!
I’m trying to put a phone icon right next to the phone number centered on the page – simple!! Not for me! I’ve done it before using Font Awesome, but I’m trying to figure out how to do it using ET’s icon font and without a plugin.
If I put the following code into the .before section in Divi’s advance tab, it puts the icon on top of the text. If I add a float: left, it puts the icon way on the left of the row while the text is in the middle.
font-family: ‘ETmodules’;
content: “\e074”;
Tried to do it inline like this with no luck either – icon doesn’t appear at all.
abc
Thanks, Josh.
Hey Sharon, you just need to assign a class to the actual menu item THEN put the code in that I have listed above. Please not the revised code I posted on 12/14/17 above. I need to do a 2.0 version of this tutorial 🙂
Please follow that and let me know if it works! Going through the tutorial step by step should work for you!
Morning Josh, I think you might have misunderstood what I was trying to do. It’s not the menu I want to add the icon to, it’s a text module in the page content – I’m trying to apply what you showed for the menu to the text module. Here’s a link to a page to show you what I mean. I’m trying to get the icon to sit next to “my dummy centered text”!
https://mungbeansetc.com/
And this is what’s in my stylesheet;
.dummy-class:before {
font-family: ‘ETmodules’;
content: “\e074”;
margin-right: 10px;
margin-top: -2px;
color: red;
font-size: 18px;
float: left;
}
.dummy-class{
width: 110px;
}
Revision – I took out the width statement so that it would span the width of the whole row. Cache wasn’t clearing when I was with the width – that problem again! For this exercise, I ended up moving the CSS to Divi’s CSS section.
Awesome so did you get it worked out? Yeah I misunderstood ya there 🙂 I’ll need to play around with that and do a adding icons to text tutorial 🙂 I usually use blurbs but it is nice to be able to do it without an extra module.
No! Didn’t still can’t get it to work 🙁
With the blurb module, I icon ends up on top of the text if it’s centred. And if I choose the option to have the icon next to the text, it left aligns the whole thing.
Sharon, try this:
Then just put this in your CSS:
.dummy-class a:before { font-family: ‘ETmodules’; content: “\e074”; margin-right: 10px; margin-top: -2px; color: red; font-size: 18px; float: left; }See if that works!
No joy with that either! Okay, I need to put this aside for now and get this website done. I’ll come back to it when I have a bit of breathing space. As always, thanks for your help anyway!
Weird…yeah I’m not sure about that one. Might be a question for our Divi Web Designers FB group 🙂
Hi Josh, fantastic tutorial as usual. I have a small problem. When I go into mobile/tablet view, the icons for the main categories repeat for the sub-categories. How do I resolve this?
Many thanks.
Hey Ferdinando, great question. I’ve actually updated the post with the solution to this. Just drop in this code and it’ll take icons out of the sub-menu!
#top-menu li li a:before {display: none;}Awesome! I didn’t realise that was the way to go about it. Always over-complicating the code. Thanks, Josh
Awesome to hear. Be sure to check out the revised code on the post page. I figured out an even easier way to do it without using a set width. Need to redo this tutorial with that new method 🙂
Great Tutorial Josh, much appreciated.
How do I change the code to reference Icons by their Class Names and not their Unicode Ref’s?
mmm that I’m not sure. Probably a good question for my Divi group if you’re not a member yet! https://www.facebook.com/groups/diviwebdesigners
Shopping cart icon () not showing up……….what should i do pls?
Hey John Paul, are you referring to my site or are you adding a shopping cart icon on your site?
Hello Josh, Am trying to add the icon to my site ( its a shopping site)
As long as you’re using Divi, the tutorial will work just fine! If it’s a different theme, this method won’t be of any help.
Hi Josh,
Thanks for this, you can try
.menu-home > a:before {
font-family: ‘ETmodules’;
content: “\e074”;
margin-right: 10px;
margin-top: -2px;
font-size: 18px;
float: left;
}
instead of
.menu-home a:before {
font-family: ‘ETmodules’;
content: “\e074”;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
With this, you dont have to use the code to hide icons on the sub-menu
Wow that’s great! Thanks so much for the trick. I’m not too familiar with using the > attribute so I need to look into that more…
Hello ! Thanks for the tutorials. I am building my own website.
I am not a programmer but I would like to know exactly in which file should I add the additional CSS to modify my menu?
Here you go, Baaly! https://joshhall.co/where-to-put-your-custom-css-in-divi/
Hi Josh, I am adding these icons to my blank divi child theme. My Home Icon shows on my mobile but not on my PC or Laptop. I have cleared the cache etc but no luck. Any suggestions as to what to do next?
Can’t say for sure, Linda…as long as you follow the tutorial step by step it should work across all browsers and devices!
Hi Josh,
The icons are now appearing! Only issue is that when you click on a menu item the active menu icon disappears. I have no idea why this would be happening. I hope you can help.
mmmm not sure, Linda. I’d need to see a link.
Hey Josh,
Thank you. This has been excellent. I managed to get it working on a new site as well as some of the drop down stuff from your other tutorials.
I am having an issue on my mobile site though.
The icons shift into the text when open on mobile.
Tried both the old and the new code with no change.
If you are able to point out my error I’d appreciate it 🙂
mmm as long as you’re using the new code it should work! should go .menu-icon a:before then all alignment should be alright!
Hi Josh!. Great Tutorial as usual! Just one question, how do I do to remove the text? I just want the icon to show on the home link. Is there a way?
Great question Daniel. I’m working on a tutorial on this as it’s something I haven’t done yet. There are a couple quick solutions like adding an image file in the menu title but it could be nice to keep the before element an icon or make the menu content the icon. Look for that tutorial soon!
Daniel…check it out! https://joshhall.co/how-to-replace-text-with-an-icon-in-the-divi-menu
Wasn’t easy to figure out with this method but now that I have it…it’s pretty darn sweet.
Yo Josh, you are great! I’m a webdesigner from Germany and I started using Divi a few months ago. It’s potential and time saving is just stunning! Thank you very much for your tutorials. Customers are amazed and even partners are astound about the Divi phenomenon.
Thanks for the comment! Yeah Divi is awesome, the community around it is second to none and it keeps getting better and better. If you’re not already a member, I’d recommend joining my Divi FB group!
Hi Josh
I tried to follow your tutorial but it didn’t work. The first menu item (home) icon showed OK but I get two icons for all sequent menu items. The first icon is the one I enter in the in CSS but there is always the same arrow down that looks like right next to my icon. It’s on all menu items except the first one. As a result; I too the CSS from all menu items except the home link. Below is the cutdown CSS I used.
/*—————–Menu Icons—————- */
.menu-home a:before {
font-family: ‘ETmodules’;
content: “\e074”;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-about a:before {
font-family: ‘ETmodules’;
content: “\e01d;”;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-faq a:before {
font-family: ‘ETmodules’;
content: “\75;”;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
#top-menu li li a:before {display: none;}
I can’t send you a screenshot but if I have a question mark as my icon, the menu looks something like that ?^, except the arrow points down and is surrounded by a circle. I couldn’t find HTML code to replicate it but I can send the screenshot if you want me to do it.
Do you have any suggestions?
Didn’t work for me.
I used the following CSS (stripped down version below)
/*—————–Menu Icons—————- */
.menu-home a:before {
font-family: ‘ETmodules’;
content: “\e074”;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-about a:before {
font-family: ‘ETmodules’;
content: “\e01d;”;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
.menu-faq a:before {
font-family: ‘ETmodules’;
content: “\75;”;
margin-right: 10px;
margin-top: -2px;
color: #ffffff;
font-size: 18px;
float: left;
}
#top-menu li li a:before {display: none;}
The first menu item works great. I can see the home icon and Home (content: “\e074”;). However; the second and all other menu items show 2 icons when viewed in the browser, the first icon is the one I chose for the menu item but the second one is a pointer like ^ tured upsidedown surrounded by a circle. The same applies to all other menu items. I couldn’t find the HTML code for the symbol to show you and I can’t see any way to attach a screenshot.
This is what’s in the source code for FAQ menu item when I view the page in my browsers.
FAQ
Any idea what’s happening?
Thank you for yur assistance.
Not sure…as long as the code is in there, cache is cleared and Divi is active is should work as shown!
I had the same problem. It can be solved by using regular letters.
content: “a”; instead of content: “\61;”;
Try to use this:
.menu-products a:before {
font-family: ‘ETmodules’;
content: “a”;
margin-right: 4px;
margin-top: 0px;
color: #2c3531;
font-size: 24px;
float: left;
}
sir it is responsive or not
Yep!
Hi Josh,
I added the: #top-menu li li a:before {display: none;}
But I am still getting the icons showing in mobile view for the sub menus.
Cheers
Try adding !important after none and see if that works!
Tutorials like this are few and far between. It is good quality, not out of date AND IT WORKS – thank you, specially as the Elegant Themes site seems to be down at this time.
Awesome to hear, Andrew! Thanks.
Hi Josh! Thanks for the great tutorial! I used float: top to bring the icons above the text. I noticed that the icons are not clickable and only the text is. Do you know if there is a fix to this? Thanks again!
mmm good question. I’m actually not sure on that one…
Hi Josh! I’m trying this on my footer menu, but icons don’t show.
Could you take a look at this?
https://caramelos.com.co/inicio/
Thanks
Nevermind! Now (somehow) it works!
Thanks for this tutorial
Hi Josh,
Your highly informative lessons has really helped me a lot. Will the cs code above slow my site down.
Hi Josh, love this tutorial. You make it so easy to follow 🙂 I have a problem, I have followed the updated version of the CSS. The icons are appearing on my mobile, however I cannot seem to get my CSS to show up on Chrome OR Firefox?? I have cleared the cache, I have restarted my computer ….. Can you suggest any ideas to fix this problem. It is happening with other CSS I have as well. Thanks
Thanks, Aly 🙂
Not sure without seeing a URL. Maybe the code is put inside a media query or something that’s making it appear only on mobile?
can you assign more than one CSS class to a menu intem? i already have a CSS class assigned to the menu button i wish to add an icon too. in that case how can i separate the classes?
Thanks
Hey Emanuele,
Yep you can add as many classes as you want. Just add a space in between each class! No comma or any other symbol.
Hi Josh!
Thanks a lot for this tutorial, very helpful! Only thing is, I’ve used this code to hide the icons from the sub menu but it’s not working:
#top-menu li li a:before {display: none;}
Any idea what could be the issue? I can email you the URL of the website so you can see what’s happening if that would help. Please let me know, thanks a lot in advance!
Hey Britte, I show this in more detail in my CSS Course but can actually add “>” in the classes to make them appear on just the parent menu item!
So for example, it’d be:
.menu-contact > a:before { font-family: 'ETmodules'; content: "\e07e"; margin-right: 10px; margin-top: -2px; color: #ffffff; font-size: 18px; float: left; }Hope that helps!
That just made my Monday morning. You’re a legend! Thanks heaps!
Yes sir that little “>” is the right place totally fixed up my mobile sub menu icon issues… as usual you’re the best.
Splendid. Glad it worked!
your sub-menu code is not working please check it out please
Be sure to follow the tutorial and all instructions and clear cache once the CSS is in place as it all still works 🙂 It’s what I use on my site.
#top-menu li li a:before {display: none;}
this code is not working in mobile
Be sure to clear your cache and refresh. All still works. It’s what I use on my site here.
Thanks for the tips. Hi everybody,
I’m having an issue when trying to use icons in the menu, the codes appear wrong. For example, I enter ‘\ 69’ and, instead of the double document, play appears, which is the code ‘\ 49’. Any suggestion?
My CSS style is:
Thanks!!
thanks you, iam using this for icon my account woocommerce
Hi Josh,
Thanks for this excellent tutorial.
I’m having one small problem that I can’t seem to resolve as I’m new to CSS which I hope you may be able to help me fix.
How do I stop icons appearing on mobile drop-down sub-menus? When I preview my site on a mobile/tablet display the icons on the sub-menu drop-down menu appear for every subpage.
Many thanks
Hi Josh,
Thank you for this toutorial, was great help! Just one thing I’d like to do further and I can’t figure out how.
I have disabled the hamburger icon for my mobile site and would like to only show the icons there without text. But I don’t figure out how I can target the #text “Home” for example in the css to hide it within my media query.
Maybe you can give me a hint!?
Josh, love the tutorials!
Combined two, the CTA Buttons & Icons into the Secondary menu, got it working so far, except the colour of the icon on hover. Tried everything I can think of and inspecting etc, but no luck.
Missing something, can you help!
https://lymph.org.au/home/
Cheers, Reid
Hi Josh,
Thank you for this tutorial, was a great help!