ISSUE: Social media and/or share icons show boxes instead of (or next to) the icons.
If you see boxes in place of icons, or duplicate versions of the same icons, it means you're running a plugin that is loading a conflicting version of the icon font needed to display these icons.
The easiest way to fix this is installing the Font Awesome plugin. Font Awesome is a popular icon library used not only by our themes and plugins, but many other plugins, apps, and websites across the Internet. Using their official plugin ensures that the latest version of the icon library is always loading on your site.
If you'd prefer NOT to add the Font Awesome plugin, here are some additional ways to troubleshoot this issue:
1. Update your EmPress products
If you are using an EmPress theme and or our Grid Plugin, please make sure you are running the latest version of both Grid and/or your theme, especially if you use both. If you’ve updated Grid but not your theme, your share icons won’t show properly, as your theme will be loading one version of FontAwesome while Grid will be loading another. You can check out our Changelog page to see what version we’re on for all products. Additionally, here is information on how to update your products to the latest versions.
2. Flush your cache, via plugins, your browser, or with your hosting company
If you’ve updated your theme to the latest version, and your social media icons are loading properly BUT there’s a box displaying next to them, your site is loading an older, cached version of the stylesheet, and your site cache needs to be be reset. Please purge or reset any caching plugins and check your web hosting settings for any caching options. You can find out more about caching in our blog post here. Please note that you will likely need to give it some time for the cache to reset.
3. Install the Font Awesome Plugin
If you’re completely up-to-date, have given the cache at least 48 hours to reset, and are still having issues with your icons, it’s likely that another plugin on your site is loading an older version of FontAwesome. Check the settings for any plugin that loads icons — some include the option not to load FontAwesome. If you cannot identify which plugin is loading Font Awesome, you will need to install the official FontAwesome plugin, which will resolve conflicts between themes and plugins loading different versions of the library.
A little more context if you like to take a deep dive into the whys:
In 2019, FontAwesome reworked their icon library from the ground up. Their recent changes prompted our own updates to our themes and the Grid plugin, for continued compatibility. While it’s exciting they improved the design and functionality of their icons, it can also create complications and frustrations when things don’t work as they did before. With their latest update, FontAwesome 4 and 5 can’t run seamlessly on the same site, and some of the FontAwesome 4 rules overwrite the new 5 rules. This is what often leads to bugs if step 3 (above) is what’s causing conflicts on your site, as it's up to individual product developers to update their own code to work with Font Awesome 5.