replacing home with icon

Replace home menu item with an icon

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