Grey Square Icons on Everywhere on Chrome for Mac

(Jongnam Lee) #1

It looks okay on iOS and even on Safari on Mac. But the icons displayed as grey square on Chrome for Mac.

  • Chrome version = 51.0.2704.103 (64-bit)
  • Discourse version = v1.6.0.beta11 +132

(Jeff Atwood) #2

Something is blocking font assets in your browser.

(Jongnam Lee) #3

Thanks for helping me out. How can I find the root cause? Is there a way to identify that and fix?

This problem does not happen always, but it shows up at a sudden time, keep the problem happening a couple hours, and be resolved automatically. It heppens from two macbook laptops at the same time so it is not client who blocks them; it may either server blocked the font or the discourse’s web UI is somewhat incompatible with Chrome for Mac. But not clear what the root cause is.

(Rafael dos Santos Silva) #4

This looks like a proxy or firewall blocking Font Awesome download.

Do a full refresh with Dev Tools open (F12) and you will see the problem.

(Jongnam Lee) #5

If the download was blocked by proxy or firewall, that problem should be reproduced on a single laptop in consistent manner.

But on my own laptop, Safari was working good while Chrome has this issue.

(Rafael dos Santos Silva) #6

Can you share the link of the board so we test it and try to reproduce the behavior?

(Jongnam Lee) #7

Thanks for the help! You can see it here: And this is what I see from Developer Tool:

(Rafael dos Santos Silva) #8

FontAwesome is on the

Going to it, gets me a 301 redirect back to

This results in a block by CORS policy:

Redirect at origin '' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.

(Jongnam Lee) #9

Thanks for the point. How can I resolve that issue? Fyi, is CNAME to AWS CloudFront distribution, which its origin is agin

(Neil Lalonde) #10

Adding to your cors origins setting might solve it.