Best way to add Divi icons to navigation items (using the Divi Theme)

Adding some icons to your Divi menu makes it stand out such that your audience can easily naviagate around your site without having to think too much. Fortunately for us, Divi has icons already built into the builder and we just need to “activate” it with a simple class. Here’s how:

Create your WordPress menu as you would like normal (Dashboard > Appearance > Menu > Create a new menu) or go to the menu you’d like to add the icons to via Dashboard > Appearance > Menu and then select your menu.

You need to add the following code before the navigation label:

<span class="et-pb-icon menu-item">DIVI-ICON-ID</span>

So it will look something like this:

Use this link to browser through Divi’s Icon reference guide to get the icon ID you want and replace “DIVI-ICON-ID” in the code with this. In this case, I used “” for the solid home icon.

Repeat above steps for as many menu items you want to add icons to.

Save the menu and go to a place where you can write and save some CSS code. This can be your Theme Editor file, Theme Customizer (probably the easiest — Dashboard > Divi > Theme Customizer), a code module, or even your page setting’s CSS section.

Copy and paste the following code to style the icons:

.et-pb-icon.menu-item{
  position: relative;
  font-size: 14px;
  margin-right: 5px;
  color: #0067FF;
}

Change the font-size, margin, and colour parameters to suit your needs!

Save the code and you are done!

For more WordPress tips, tricks, and tutorials visit my site.