Broken icons in Divi can disrupt the visual appeal and functionality of your website, leading to a poor user experience. These issues can occur due to various reasons, such as missing font files, incorrect paths, or conflicts with other plugins.
This article will guide you through the steps to diagnose and fix broken icons in Divi, ensuring your website looks professional and operates smoothly.
Check if WordPress is correctly configured to use the correct HTTP protocols
Go to WordPress Dashboard → Settings → General
Both WordPress Address (URL) and Site Address (URL) should be set correctly depending on your server configuration:
If the server has a valid SSL certificate enabled, ensure that both addresses are set to use the HTTPS protocol
If the server doesn't have a valid SSL certificate enabled, ensure that both addresses are set to use the HTTP protocol
Note: If the two addresses are not set with the correct protocols, please contact your hosting support team and ask them to set the correct URLs for you.
Ensure to take a full backup before changing either one of the settings above.
The Cross-Origin Resource Sharing (CORS) policy blocks the font file
In some cases (depending on how the server has been set up and the WordPress installation), the server can block the icon's font file due to its CORS policy.
This is most likely to happen if the website was transferred from one domain to another and the links were not updated.
In the browser's console, you might see errors like this:
In cases like this, the domain's CORS policy can be updated to allow the loading of the icon font file.
Plugin(s) Conflict
Sometimes, plugins can conflict with a theme or with each other. The plugin's CSS code can override icons if developers use common CSS selectors.
Disable all your plugins and see if the problem persists. If everything is working after the plugins are disabled, it means there's a conflict with a plugin or maybe even a set of plugins.
Enable the plugins one by one to identify the one creating the conflict.
Custom CSS
The CSS code can be used to display theme icons in other places on the website where modules were not used.
The Divi theme checks the page load icons that were used in the modules, but the custom CSS code can't be checked in the same way.
Go to WordPress Dashboard → Divi → Theme Options
Click on the Performance tab
Deactivate the Dynamic Icons option
