THE ISSUE
You are using Elementor icons (as the ones above) but once you publish your website and navigate (doesn’t matter if with desktop or mobile), you just see an awful square with a X in the middle.
Don’t worry it happened to me too, right on this website and I am going to show you how to quickly solve it.
Follow these steps and you will have your awesome icons working.
STEP 1 - Retrieve your FTP account data
Login to your hosting service dashboard and look for the FTP profile.
In my case, it looks something like this
The data you will need are the following:
- FTP IP – ftp://xxx.xxx.xxx.xxx
- FTP USERNAME – xxxxxxxxxx
- FTP PORT – xxxxx
- PASSWORD – You will be able to set it up
STEP 2 - Login your Website through Filezilla
Filezilla is an open source software that allows you FTP data transfer to your website.
Open Filezilla and input the data you got in the step before in the appropriate field and login.
STEP 3 - Edit .htaccess file
Once connected, navigate to the “public_html” folder and open to edit the file “.htaccess“.
Add the following code:
<FilesMatch “\.(ttf|otf|eot|woff)$”>
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin “*”
</IfModule>
</FilesMatch>
In the file right below the # lines.
It should look something like this
Once you save the file, close Filezilla and enjoy your website with your awesome icons!