How to Add Icons to Your Divi Menu

by | Sep 5, 2017 | Divi Tutorial | 91 comments

Welcome to part 3 of 12 in my Tutorial Tuesday series! Every Tuesday for 12 weeks, I’m dishing out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and Divi.

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

Here’s the CSS I used: (see revised code below)


/*-----------------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;
	}
	
}

To put a custom image in as your icon, use this as the content line and replace the URL with your uploaded image file:


    content: url(REPLACE_THIS_URL);

***Updated CSS (12/14/17)***

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;}