Elementor icons (FontAwesome) not showing – [SOLVED]

  • by

Elementor icons not showing on desktop or mobile

EASY STEPS TO SOLVE THE ISSUE

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:

  1.  FTP IP Рftp://xxx.xxx.xxx.xxx
  2. FTP USERNAME – xxxxxxxxxx
  3. FTP PORT – xxxxx
  4. 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!

Leave a Reply

Your email address will not be published. Required fields are marked *