Font Awesome (or other font) Icons Not Working

These are some troubleshooting steps if icon fonts (social icons, menu search icon, back to top button icon, etc.) aren’t loading on your site (show’s a square instead).

Some browsers refuse to embed some fonts, This problem can be seen in the browser console:

Font from origin 'http://cdn.example.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.<br>
This should solve your problem, just copy paste it into your .htaccess file en re-upload it, clear your cache and eventually also clear your CDN files and the problem is solved:
# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------

<FilesMatch "\.(gif|png|jpe?g|svg|svgz|ico|webp)$">
SetEnvIf Origin ":" IS_CORS
Header set Access-Control-Allow-Origin "*" env=IS_CORS


# &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;-
# Webfont access
# &mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;&mdash;-
# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like “subdomain.example.com”.

<FilesMatch “\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$”>
Header set Access-Control-Allow-Origin “*”<br>
Check the following links for more info:

Are you/your customers using Adblock Plus?

If “ Remove Social Media Buttons” option is enabled, you will miss some brand icons.