Missing or broken icons on OpenCart website

Do you have broken icons displaying as squares on your website? This was and still is very common issue on many websites and it can be annoying because it impacts the first impression of a webpage. Even if the website has super fast loading time but if it doesn’t display properly all of its content that can still lead to poor UI/UX. Learn what I did to solve missing or broken icons on OpenCart website.

The case of missing icons is related to fonts actually. Font Awesome to be more precise. Some browsers (most commonly Firefox) enforce a Cross-origin resource sharing (CORS) restriction policy for fonts. As a result, if you serve the Font Awesome fonts from a separate domain, Firefox (and depending on your server configuration, other browsers as well), will not load the fonts due to this policy, so the icons are not displayed.
The most common occurrence is using a CDN. For example, if your site is yourwebsite.com, but your stylesheets are served from cdn.yourwebsite.com, or cdn.otherwebsite.com, the browser will not load the fonts because they are served from another domain.

There are different approaches in solving this issue and my case was the following:

1. Set the font headers to allow cross-origin resource sharing

This means to configure the server to tell the browser that it’s okay to load the resources from a different domain. For the Apache server this generally just means dropping an .htaccess file into the directory containing the font with the following configuration:

<FilesMatch “.(eot|ttf|otf|woff)”>
Header set Access-Control-Allow-Origin “*”
</FilesMatch>

Please note that the path to the fonts folder may vary depending on the theme’s structure. In my case the path for the .htaccess file was:

/catalog/view/theme/THEME-NAME/fonts/

That solves the missing or broken icons on OpenCart website.

Special thanks to J.F. for digging this up! You can check his great blog here and see some additional info on the topic.

DISCLAIMER: I used the domain names yourwebsite.com and otherwebsite.com only for the sake of this tutorial and ease of understanding the process described here. I do not own these domains and mentioning it in this post is for identification purposes only. Use of this domain name does not imply endorsement.