Social Icons Missing or Appearing as Squares

Social Icons are the symbols that link the individual or a company profile on different social networks such as LinkedIn, Facebook, Twitter, Pinterest, etc. Adding social icons on the website helps make people connect with your brand on various social media platforms.

You can see the social media icons appearing at the top section and on the footer area on every site. Each of the icons has its symbols to distinguish them from each other.

As a site creator or owner, you might have faced the issue with the social icons showing up as squares instead of their original symbol. There are some recommendations below that can help you fix the issues:

1. Enable Font Awesome 4 Support in Elementor

Elementor has switched to Font Awesome 5, whereas ThemeGrill theme uses Font Awesome 4. So you’ll need to load Font Awesome 4 for solving this issue.

You can follow the steps below for loading Font Awesome 4:

1. From your WordPress Dashboard, go to Elementor > Settings > Advanced. 
2. Select Yes on Load Font Awesome 4 Support.
3. Click Save Changes.

Once done, please preview your site on the front-end, which must fix the issues with the icons appearing as square boxes on your site.

However, the solution works only if you have used Elementor on your site. If you do not have Elementor on our site, you can use the other solution below.

2. Adding Additional CSS Code:

The second method is using the additional CSS code, which will override the font loading on your site. You can use the code here:

.fa{

font-family: FontAwesome;

}

Please use the code inside WordPress Dashboard > Appererances > Customize > Additional CSS box. You can also follow the guideline for adding Custom CSS to your site.

3. Clear Cache Plugin or Server Cache

You might have installed the Cache plugin on your site to improve the WordPress site speed and performance. However, you will need to clear the cache content, which will help you load the front-end site content.

Likewise, you can also contact the hosting server to clear the server contents so that the site will be fully loaded on your front end.