How to Replace Text with an Icon in the Divi Menu
In this tutorial, I show you how to Replace Text with an Icon in the Divi Menu. More specifically, how to create a little home icon in the Divi menu that links back to the home page. This is an addition to the method used in my previous tutorial on How to Add Icons to your Divi Menu and was a tutorial request in the comments of that post.
There are numerous ways to go about this and I’ve linked below to several similar and alternative methods; but the reasoning for doing it this way is that I want us to have full control of the icon styling, color, size, hover over state and more. This is also utilizing the built in Divi Icons (used for blurbs, buttons and other modules in Divi) so we don’t need to add any other extensions, 3rd party plugins or images.
Enjoy!
Step 1 – Copy Your Icon Code
Choose any icon from the ET Icon list.
Step 2 – Add Code to Navigation Label in Menu
The code will show up as a weird square symbol after you save but it’s ok. Keep it as is.
Step 3 – Add Class to Menu
We’ll use this class to style the icon.
Step 4 – Add Class to Stylesheet or Custom CSS section in Divi
You can now style the icon, the hover over state and more with this CSS.
Here’s the CSS I used in the tutorial but you can change the class to whatever you’d like. Just be sure to include “a” since it’s a menu link.
/*-----------------Menu Icons to Replace Text---------------- */
.menu-home a {
font-family: 'ETmodules';
font-size: 18px!important;
color: white!important;
}
.menu-home a:hover {
color: #8dc63f!important;
}
And that’s it! Now you have a handy little method for replace the text in the Divi menu with a home icon or any icon of your choosing!
Links mentioned in the video:
- Elegant Themes Icon Font List
- How to Add Icons to your Divi Menu – JoshHall.co
- Where to Put Custom CSS in Divi – JoshHall.co
Alternative Methods & Tutorials:
Ready to take your web design journey to the next level? I want to help.
Whether it's understanding the technical side of web design like Wordpress and Divi, learning the ins and outs of design, SEO and conversion, following a proven path for web design processes and systems or help with building your web design business, I have a course for you. Click below to check out my suite of web design courses and find out which one will help you level up and help you quickly become a more valuable and confident web designer!
- Josh
Hi Josh,
Can you make a tutorial on how to modify Divi tabs module to make:
1. (IMPORTANT) Tabs controllers slidable (just like Google search results page on a mobile device) not stackable on all devices, with an arrow right “>> icon” showing “more tabs ahead” (by clicking on it, it will slide to next tabs which are not visible before).(/IMPORTANT)
2. Tab’s content area fixed height, it means the user have to scroll down to see through remaining content (if content is too long).
3. Tab’s content area swipable, for next and previous tabs.
Please Josh it’s my humble request to you, if you can then please do it.
I will definitely consider some tab tutorials 🙂
What if we wanted the image *in addition* to the text (say, to the left); how would the code change?
Thanks for the tutorial, Josh!
mmm not sure Joseph, might take some playing around with that!
Hi, Josh.Loved it.
I’ve used this method in my development site, but as the home icon stays a little bit up in relation to the rest of the nav items, I’ve added a “bottom: -2px !important;” to fix it.
Hope this helps!
Perfect! Thanks.
Brilliant Tutorial, Thank you
hi, there i just have one question where do i paste the css when i open the styles.css file there are a bunch of random text should i place the css under all of the text ?
Yep under all other CSS!
Hi, josh Where do i put the css ? when i open the styles.css with a code editor theres like over 200 lines of code should i paste this under all the code ?
Yep I recommend putting that at the bottom!
hi josh great tutorial, but when i open my styles.css and put the code in nothing happens what am i doing wrong ?
Just be sure to clear cache, refresh browser and make sure nothing is overwriting it then it should work!
Just be sure to refresh browser, clear cache and make sure nothing is overwriting the CSS then you should be all set!
Thank you for the great tutorial. Quick question, what about active states for this treatment?
Good question, Marty. You should be able to target that with :active on that element and style it from there!
Hey Josh, great tutorial.
Just wondering if you can apply similar strategies to inserting an icon into Divi’s text module??
Don’t suppose you have a tutorial on that?
Cheers,
Phil.
I actually have that on my future tutorial list! Essentially you’d do the same steps but just insert a class in the text where you want the icon in the text module. I’ll move that up in my rotation 🙂
Hi, Josh.
Thanks for the tutorial. It looks so easy when you explain that. You have a great talent for explaining stuff.
Hey Josh, super simple tutorial and worked great. My only issue is I have a plugin Divi Toolbox that is customizing the mobile menu. Because of that the icon wont show on mobile. Is there some simple css I can add to make that happen? Been racking my brain all morning trying to figure that out.
Mmmm honesty not sure with that, Bryant. You may contact Ania via the DiviLover support to see if she knows a fix. Probably something that’s overriding it but I don’t support plugin conflicts.
Hi Josh,
Thanks so much – this worked a treat, but because I am using a different font colour for the mobile menu (dark on light, rather than light on dark), I have an issue with the icon not showing clearly.
I’m not a coder, so not sure of how to add this extra option. Am sure it’s a simple fix.
Yep easy peasy, Cath. You just need to swap out the color White with whatever color or hex you’re using!