Divi Menu Icons without Plugins or Font Awesome

Divi Menu Icons without Plugins or Font Awesome

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.

MENU ITEMS
  • Google+
  • Facebook
  • Twitter

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.

menu icons
  • Google+
  • Facebook
  • Twitter

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:

et blog
  • Google+
  • Facebook
  • Twitter

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.

 

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.