My social media and/or share icons show boxes instead of (or next to) the icons. How can I fix this?

In February of 2019, we updated all of our themes and the Grid plugin to the latest version of FontAwesome, the library we use for all icons in our themes and the Grid plugin. If you have updated your theme or Grid plugin with this latest update release and are experiencing issues with the icons either duplicating or appearing with boxes next to them, please use the following tips for troubleshooting:

1. Please make sure you are running the latest version of both Grid and your theme, 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.

2. If you’ve updated your theme to the latest version, and your social media icons are loading 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. 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.

A little more context:

FontAwesome reworked the library from the ground up. Their recent changes prompted our own updates to our themes and the Grid plugin, for continued compatability. 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.

Our hope is that third party plugin authors will continue to update their own icon sets to version 5. Until then, if your icons stop working, check any plugins that might load icons. You may even have to deactivate one by one to find the culprit. We are working to update our Code Hacks library with fixes to override plugins using FontAwesome 4 where and if possible.