How to fix broken Font Awesome icons due to 'No Access-Control-Allow-Origin header'

by Thibault Seynaeve a month ago 1 min read

Did you just migrate a WordPress website to another server and now all your Font Awesome icons are suddenly broken? I know how you feel!

After migrating about 25 WordPress websites to new servers, I noticed that there were little cubes where there should have been icons:

A quick look at the browser console tells us that there's something wrong with the CORS rules:

No 'Access-Control-Allow-Origin' header is present on the requested resource

To fix this issue, you'll need to open up the virtual host file on your NGINX server (on Laravel Forge, simply go to your site, click on 'Edit files' and choose 'Nginx configuration file) and add this line:

location ~* \.(eot|css|otf|ttf|woff)$ {
  add_header Access-Control-Allow-Origin *;
}

You can simply put it under the existing location line. In my case it looks like this:

Then it's just a matter of restarting your NGINX server and the icons should appear again!