Hello,

If your font awesome icons or custom fonts are not showing up in a certain browser (mainly Firefox or IE), then you have two solutions you can take.

Solutions:

1. Host the font on same domain as the domain from where the website is accessed

2. Create .htaccess file in the root folder on the same domain where fonts are hosted and add the following code into it:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
 Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Detailed Steps:

So first you log in to your FTP server and find the root folder of your wordperss installation (you can see the ‘wp-admin’, ‘wp-content’ etc folders there)

Create a new file, name it just ‘.htaccess’ (without quotes),

Next select that .htaccess file and edit it. (or if you don’t see the edit option, copy this file to your local PC, edit it locally in a text editor, add the code I’ve shown below save the file) then move the file back to the ftp server into same location)

Then, paste this code into that file, save the file and upload it back to your FTP server into the same folder.

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
 Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Your icons should be working now.

Hello there,

Thanks for writing in.

The icons not showing up is always a server related issue. And only knowledge of server configuration we know is the one provided below:

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
 Header set Access-Control-Allow-Origin "*"
</FilesMatch>

You can try installing WordPress on your local machine using "XAMPP" or similar server applications and you will see that the Icons are working fine.

So, what I would do is try disabling all 3rd party plugins and reverting website to http and seeing if icons work. And then contacting hosting provider to if you need any other help with Cross-Origin error.