Note: This troubleshooting guide may require that you make server-side changes to your website. If you are not comfortable making those changes, you will need to contact your hosting provider for assistance.
All icons of the theme are located in one font file.
The font file is blocked by Cross-Origin Resource Sharing (CORS) policy.
The font file can be blocked by your web browser. Different protocols of the website and of the link to the font file. It may happen when the domain name was changed and the old domain was not changed in all parts of the website or when SSL was installed incorrectly.
If the font file is blocked then the error message can be seen in the browser console. Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the Console.
Example of the error:
"Font from origin 'http://domain.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.domain.com' is therefore not allowed access."
In both cases, the CORS can be adjusted using this resource in order to load files between two domains without any restrictions.
PHP version
Running an outdated PHP version can cause the icon code to be processed incorrectly on the back-end and on the front-end.
We recommend running the PHP 7.0+ version (or at least PHP 5.6). Most hosting providers have an option to change the PHP version from their cPanel, however, if that is not the case you can always reach out to them and they should be able to take care of it for you. To check what PHP version is installed on your server you can use this plugin. If you are using the Divi theme, you can check the PHP version in the Divi > Support Center.
Plugin(s) Conflict
Sometimes plugins can conflict with a theme or with each other. Icons can be overridden by the plugin's CSS code if plugin developers are using common CSS selectors.
Disable all your plugins and see if the problem persists. If everything is working once the plugins were 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 that is creating the conflict.
Custom CSS
The CSS code can be used to display icons of the theme in other places of the website where modules were not used. The Divi theme is checking the page load icons that were used in the modules, the custom CSS code can't be checked in the same way. The following option can be disabled if custom CSS code was used and icons are not showing up correctly:
