Divi Menu Icons Are Messed Up!

I'm constantly seeing posts on Facebook and Reddit about people having Divi menu icons change between frontend builder mode and "live" mode. How do we keep this from happening? Are you getting "mixed content" errors in your browser's console window?

If you've just added SSL to your site to go from http:// to the more secure https:// protocol, then this is the most common reason for those problems. When you add SSL, it's possible to suddenly break things!

If your host provides SSL services, you likely won't have any problems, but it can still happen depending on the quality of the host. Managed WordPress hosts should give you a complete transition, for example. Some hosts simply add SSL without updating any database content. In that case, it's up to you to fix the problem!

Where Do Divi Menu Icons Come From?

The Divi theme uses a built-in font family called ETmodules. This font family has been around for many years and is used in many places within Divi, including menu icons.

The problem with the icons happens when that font is not being loaded!

The Best 3 Ways to Fix Problems with Divi Menu Icons

In this tutorial, we'll discuss 3 different ways to mend your Divi menu icon problems. If, after trying all 3 methods and you still can't fix the problem, then leave a comment below or post a topic in the Divi General forum.

  1. Fix database entries with a temporary plugin
  2. Modify your .htaccess file
  3. Use a permanent plugin

Method #1: Fix the Database (Most Recommended)

You might have issues with your Divi menu icons after you've implemented SSL on your site. A new SSL certificate might cause some browsers to fail to load a font try the Better Search Replace plugin. This is the most popular and best (but not easiest) way, (unless your host can do it for you!) to fix "mixed content" errors and missing icons/images.

Once the plugin is activated, check the "Tools" admin menu to access the plugin functions.

Better Search Replace admin menu

Better Search Replace admin menu

The best way to do this is do a search for http://mysite.com and change to https://mysite.com. Notice the addition of the "s" in the change to indicate the "secure" transfer protocol. This will fix any hard-coded links to assets on your site.

If you decide to use that plugin, be sure to make a "dry run" where you can see the changes that will be made, but where the updates won't actually take effect. Dry run is automatically checked as the default option so you don't accidentally change anything right off the bat. (If you have a very large database and have problems, check the "Settings" tab.)
Go ahead and use ctrl/cmd-click to select all the tables.

Better Search Replace settings page

Better Search Replace settings page

That way you can look for mistakes, such as changing http://mysite.com/wp-content/uploads/2021/08/image.wepb to https://mysite.comwp-content/uploads/2021/08/image.wepb (missing "/" after ".com").

Once you're satisfied that things look good, go ahead and uncheck "dry run". The plugin will now replace all "http:" to "https:".

More things to do!

You need to check your site's "Address" and "Site Address" URL settings. Go to the the Settings -> General page and make sure both settings have your https://.

 

WordPress URL Settings

WordPress URL Settings

If you have security plugins, make sure they are set to use https.

Note: If you are uncomforable making changes to your database, you might consider the popular Really Simple SSL plugin. This works in the background to make sure everything is using the secure protocol. The only problem is that it will have to stay continually active, adding another plugin to your site.