Icons showing square box on wordpress site

If icons are not appearing in your website there might be some problem related to fonts, CORS or CDN

1.Fonts

Browse the website select the square icons and you can see the image below



simply go to admin panel of wordpress >add plugins >

Better Font Awesome


add this plugin 
 go to setting

check remove existing font awesome

Validate Cross Origin Resource Sharing ( CORS ), If Applicable

Your icon font files could be loaded from a URL that has a different domain name structure than your website URL. This will result in Cross Origin Resource Sharing and browsers such as Firefox and Chrome will block your icon font files and prevent them from loading into your browser. This will result in your social icons showing up as squares.
There is two way to determine whether this is cause by CORS.
  1. View your website in Safari browser, you will be able to see your Social icons showing up properly. Your Social icons will only show up as squares in Firefox browser and Chrome browser.
  2. Look into the Console of developer tools such as Firebug for Firefox. You will see an error message Reason: CORS header ‘Access-Control-Allow-Origin’ missing.
How to fix this?
  1. Login to your WordPress dashboard.
  2. Go to Settings -> General
  3. Find the settings -> WordPress Address (URL) and Site Address (URL)
  4. Make sure both settings has identical values. For example :-
    • In your Site Address (URL), you have entered http://www.example.com
    • Make sure in WordPress Address (URL) input, you have entered http://www.example.com
    • A difference such as http and https or www will cause CORS issue.

Content Delivery Network, If Applicable

If you are using a Content Delivery Network ( CDN ) to load your font files and your social icons are showing up as squares, you will need to contact your CDN provider and ask them for the codes to add in your .htaccess to enable Cross Origin Resource Sharing. This is an example from MaxCDN.
You will need to contact your web hosting company for assistance, if you do not know what is a .htaccess file or how to alter it properly seek an expert as an error can take down your entire site.
Again, if I did not impress upon you the importance of backing up in the beginning then I will close with this:
Backup before troubleshooting your social media icons please.

Comments

Post a Comment

Popular posts from this blog

cpanel exam CPSP Answers

 Which of the following options best describes the role of Shared Hosting on a web server? Providing hosting for a single website owned by different people on multiple servers. Providing hosting for a single website owned by one person on one server. Providing hosting for multiple websites owned by different people on one server. Providing hosting for multiple websites owned by one person on one server. 3 Which of the following capabilities can a cPanel account user perform easily from within the cPanel account interface without the aid of a system administrator? File and configuration management. Relocating the physical server. Upgrading server hardware and equipment. Installing new database software. 1 File and configuration management. Which of the following options best describes a core benefit to using cPanel & WHM, as a web hosting provider operating on a cPanel & WHM environment? cPanel users are able to create new virtualization resources to help host their web applicat
Read more

How to install zimbra collaboration suite 8.8.11 on CentOS 7

Check system requirements  https://wiki.zimbra.com/wiki/Zimbra_Releases/8.7.0/Single_Server_Installation#System_Requirements prerequisites Before we get started, here are a few things that are required before we proceed with the installation. A clean installation of Centos 7 A Fully Qualified Domain (FQDN) for your server(Example mail.geekybum.com) An external DNS server with both A and MX records for your server to point to your Zimbra mail server IP Address A static IP Address assigned to network interface. Step 1: Root login to server through SSH Step 2: Install required packages for zimbra coloboration suite installation yum -y install unzip net-tools sysstat openssh-clients perl-core libaio nmap-ncat libstdc++.so Initial server setup To get started we need to configure a hostname for our server and a static IP address. vi /etc/hosts 135.125.30.56 mail.geekybum.com mail Replace the system hostname and FQDN values accordingly in order to match your own do
Read more

awstats installation

Set Up AWStats for Nginx on Ubuntu sudo apt-get install awstats add access log file to generate stats using this server { # ... all your other config ... access_log /var/log/nginx/yourdomain.com.access.log ; # ... all your other config ... } /etc/nginx/sites-available vi awstats.parleproducts.com.conf cd /etc/awstats/ vi awstats.parleproducts.com.conf #path to your nginx log file LogFile="/var/log/nginx/parleproducts.com.access.log" # Domain of your vhost SiteDomain="parleproducts.com" # Directory where to store the awstats data DirData="/var/lib/awstats/" # Other domains/subdomain you want included from your logs, for example the www subdomain HostAliases="www.parleproducts.com" # If you customized your log format above add this line: LogFormat = ""%host %other %logname %time1 %methodurl %code %bytesd %refererquot %uaquot"" # If you did not, uncomment and use this line: #
Read more