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 missing the "green padlock"? Are you getting insecure "mixed content" errors in your browser's console window, or from a testing site like Why No Padlock (see There's More! at the bottom of this post for a link to that)?

If you've just added SSL to your site to go from http:// to the more secure https:// protocol (for example, with a free Let's Encrypt certificate), 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 7 Ways to Fix Problems with Divi Menu Icons

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

1. Clear all caching areas
2. Fix database entries with a temporary plugin
3. Modify your .htaccess file
4. Use a permanent plugin
5. Check WordPress site settings
6. Check security plugin settings
7. Visit a padlock testing site

Method #1: Clear Cache Areas (Recommended)

There are several cache areas to be aware of when building a Divi site! You'll want to check these areas and clear whatever you can. This is a very popular way to fix most weird Divi problems. Here are some helpful links, since the main focus of this article is about mixed content issues.

• Divi, browser and CDN
• Popular WordPress caching plugins
• Hosting cache - for example, Kinsta caching, Cloudways breeze cache, Siteground (this one seems to constantly cause Divi problems!), etc. Contact your specific host for further information.

Method #2: Fix the Database (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. As far as your site, the best way to handle this (so you don't need to use a permanent plugin) is to use 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.

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 you want. Or, click the first table, then shift-click the last one to select them all (takes longer to run on large databases).

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:". If you have any issues because of this action, restore your backup, and carefully try the steps again.

Method #3: Modify Your .htaccess File to Ensure Forced SSL and Secure Redirection

Websites today need to be using the secure "https://" protocol when loading all assets from your own site as well as other sites. "Mixed content" errors occur when this doesn't happen.

Forcing the use of HTTPS:// on your site will ensure that visitors to your site are always using https://yoursitename.com and aren't able to access an insecure http://yoursitename.com URL. This is recommended since if a visitor does access your site as http://ginamelody.com many things will be marked as "Not Secure".

The below code is for forcing HTTPs on an Apache webserver. If you are using another webserver such as Lighttpd or OpenLightSpeed, Nginx, etc. you will need to contact your web hosting provider for assistance.

Add the following code to the .htaccess file in your webhosting account. Obviously, change yoursitename to  your own domain name, and edit .com to your own Top Level Domain (TLD) if needed.

RewriteEngine On
RewriteCond %{HTTP_HOST} yoursitename\.com [NC]
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yoursitename.com/$1 [R,L]

Once this change is made your site will no longer be accessible on the insecure "http://yoursitename.com" URLs and all visitors will be redirected to "https://yoursitename.com" instead. Again, your host should do this for you, especially if you are not familiar with modifying server files.

Method #4: Use an SSL Plugin (Not Recommended)

If you are uncomfortable 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.

But Wait, There's More!

• 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://.

• If you have security plugins, make sure they are set to use "https" secure protocol.
• You can get more information about mixed content and SSL errors by visiting Why No Padlock. Put in your URL and it will give you a report with errors and suggestions for fixing.