Icons are a great way of making your menu items pop. As it’s not a feature of WordPress or Divi, adding them can be a bit of a task. There are plenty of plugins of course. There are also plenty of tutorials for adding icon support from third party services like Font Awesome, but it struck me that Divi already comes with icons baked in, so why not use those?

You won’t need a plugin or Font Awesome to add menu icons using this tutorial. A little CSS is all that’s needed.

The ‘ETmodules’ Icon Font

Divi uses its own icons font for modules like the blurb as well as for the hamburger menu and the phone and mail icons in the top header. It’s called ‘ETmodules’ and because it is built in, we won’t have to import any external fonts. We can simply call the font like this:

selector { font-family: ‘ETmodules’; }

Making Space for the Icon

By default, there is no padding or space to the left of menu link to accommodate for icons. We’ll need to add some, but to make sure we only affect links with icons we’re going to add a CSS class of ‘.menu-icons’ to the items we wish to change. We can then use this CSS:

.menu-icons a { padding-left: 20px; }

We’re going to be adding our icons using the :before pseudo-class, so next we’re going to make sure that any content we add is formatted properly for the different menu areas, and knows we’ll be using the ETmodules font:

.menu-icons a:before { font-family: ‘ETmodules’; position: absolute; }

#main-header .menu-icons a:before { top: 0; left: 0; }
.sub-menu .menu-icons a:before { margin-top: 6px; left: 0; }
#top-header .menu-icons a:before { left: 0px; top: 0px; }

That’s pretty much all the formatting we need to do. The next step is to add a list of icons to use and create a way of calling them into the different menu items.

We’ve used the .menu-icons class to format the menu item, now we’re going to create a class for each of the icons:

/********************* MENU ICONS ***************************/

/*** QUOTE MARKS ***/ .menu-icon-1 a:before { content: “\7c”; }
/*** CLOCK FACE ***/ .menu-icon-2 a:before { content: “\7d”; }
/*** CLOSED PADLOCK ***/ .menu-icon-3 a:before { content: “\7e”; }

As you can see we’re using the CSS property ‘content’ to call our icons into place and adding a different class to each one. so that it can be easily added from the menu options.

 

How to Add the Icons

Add the Menu Icons CSS to your child style sheet or Divi panel. Here it is all together to make it easier:

/***************************** DIVI SPACE MENU ICONS *******************************/

@media (min-width: 981px) {

.menu-icons a { padding-left: 20px; }
.menu-icons a:before { font-family: ‘ETmodules’; position: absolute; }

#main-header .menu-icons a:before { top: 0; left: 0; }
.sub-menu .menu-icons a:before { margin-top: 6px; left: 0; }
#top-header .menu-icons a:before { left: 0px; top: 0px; }

/************************************ MENU ICONS **********************************/
/*** QUOTE MARKS ***/ .menu-icon-1 a:before { content: “\7c”; }
/*** CLOCK FACE ***/ .menu-icon-2 a:before { content: “\7d”; }
/*** CLOSED PADLOCK ***/ .menu-icon-3 a:before { content: “\7e”; }
/*** KEY ***/ .menu-icon-4 a:before { content: “\e001”; }
/*** CLOUD ***/ .menu-icon-5 a:before { content: “\e002”; }
/*** LANDSCAPE IMAGE ICON ***/ .menu-icon-6 a:before { content: “\e005”; }
/*** LIGHTBULB ***/ .menu-icon-7 a:before { content: “\e007”; }
/*** CAMERA ***/ .menu-icon-8 a:before { content: “\e00f”; }
/*** ENVELOPE ***/ .menu-icon-9 a:before { content: “\e010”; }
/*** CREDIT CARD ***/ .menu-icon-10 a:before { content: “\e014”; }
/*** SHOPPING CART ***/ .menu-icon-11 a:before { content: “\e015”; }
/*** LOCATION PIN ***/ .menu-icon-12 a:before { content: “\e01d”; }
/*** CALENDAR ***/ .menu-icon-13 a:before { content: “\e023”; }
/*** CONTACTS BOOK ***/ .menu-icon-14 a:before { content: “\e026”; }
/*** HEART ***/ .menu-icon-15 a:before { content: “\e030”; }
/*** COFFEE CUP ***/ .menu-icon-16 a:before { content: “\e105”; }
/*** WALLET ***/ .menu-icon-17 a:before { content: “\e100”; }
/*** BRIEFCASE ***/ .menu-icon-18 a:before { content: “\e0fe”; }
/*** STAR ***/ .menu-icon-19 a:before { content: “\e031”; }
/*** HOME ***/ .menu-icon-20 a:before { content: “\e009”; }
/*** LINK CHAIN ***/ .menu-icon-21 a:before { content: “\e02c”; }
/*** LIKE THUMBS UP ***/ .menu-icon-22 a:before { content: “\e106”; }
/*** HOURGLASS ***/ .menu-icon-23 a:before { content: “\e0e1”; }
/*** PIE CHART ***/ .menu-icon-24 a:before { content: “\e029”; }

}
/************************************* END *****************************************/

In your appearance > menu options, add the option to include CSS classes from the drop-down menu on top.

In the menu item where you would like to add an icon, you’ll need to add the ‘menu-icons’ class AND the class for the specific icon: In this example, an envelope would be added, because that is the icon we call with the .menu-icon-9 class.

And that’s it. A bit of CSS in your style sheet and you can call any ETmodules icon you want into your header. I’ve included 24 icons in the css for you but if you’d like to add more of your own then here’s how you would do it…

Adding your own Icons

Head over to this blog by Elegant Themes where at the bottom, you’ll find all of the icons you can use:

Right click on any of the icon images and inspect the element. Expand the html and you’ll see the ::before pseudo class. Click on that and in the styles section on the right you will see the ‘content code’ you would need to user to add that icon to your header. Then you just have to give it its own class and add it to your list of icons. Like so…

/*** FLOPPY DISK ***/ .menu-icon-25 a:before { content: “\e0e4”; }

Then .menu-icon-26 and .menu-item-27 etc.

Now you can add fonts to your header (or anywhere else really) without a plugin or third party icon fonts. I hope you’ve found this tutorial useful.

Hello

I’m Farjana

I am Wordpress web designer and developer.
I work one on one with creatives, small businesses, and entrepreneurs from all over to give them clean and effective brand identities & websites that grab attention and make money.   Read more

Newsletter

Subscribe For Next update