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:

• How to Add Icons to the Divi Menu – Elegant Themes
  
• Swap home text for icon in Divi – Divi Theme Examples
• Divi Menu Icons without Plugins or Font Awesome – DiviSpace