FontAwesome Icons Loading as Rectangles

Support
#1

Hi all,

Thanks for building an excellent theme that I get to work with - it’s a dream! Recently the FontAwesome icons on one of my sites stopped loading. It did not appear to be after an update and I do not believe there were any changes that happened which would have caused this to happen.

I’ve been able to replicate this in Opera, Chrome, and Firefox. However, it appears the icons load just fine when loaded on an iPhone and in Safari.

There are some errors in the console but I’m not quite sure what to do about them. Screen of the boxes instead of the icons below followed by a screenshot of the console.

Any assistance would be greatly appreciated - thanks so much!
Matthew

#2

Hello Matthew,

Thanks for writing in! I have checked your site and it appears that you are experiencing the CORS or (Cross Origin Resource Sharing) issue. Your site is http://www.example.com while the font files where coming from http://secureservercdn.net/184.168.47.225/147.43f.myftpupload.com/wp-content/themes/pro/cornerstone/assets/dist/fonts/fa-brands-400.woff2.

Please go to Settings > General and make sure that your Site URL and WordPress URL is the same as your WordPress dashboard URL.

You will need to resolve CORS issue by enabling it. Please edit your .htaccess and add this:

<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(cdn|sub)\.domain\.com$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

For reference, please check this out:

#3

Hello! Thank you for the helpful response! The sitemap URL and the WordPress URL in the admin dashboard are the same. I’ve also added the noted code into the .htaccess file and even after flushing the cache I’m not seeing any resolution for displaying the FontAwesome icons.

Do you have any further suggestions on resolution?

Thanks!
Matthew

#4

Hey Matthew,

Your web host should either enable CORS in their server setup or they need to set up a CDN as your sub-domain. Otherwise, you will encounter broken resources not only with our theme but plugins that display icons as well because your web host does not allow resources from a CDN of another domain to be displayed.

Although our theme is affected, this is not an issue with our theme but your web host.

We wish that this issue will be resolved by your web host.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.