Issue: Icons show up as squares

Browser?

Chrome. Icons show up fine on this site.

Having trouble seeing this issue just by stumbling around your site. Please PM a link.

Operating System and Chrome version? When I visit that page in the current Chrome under Windows 7 64-bit I cannot duplicate what is shown in the screenshots.

Windows 7 64x Ultimate
Chrome version 36.0.1985.143 m

I just asked another user to see if they get the same problem and indeed they do. They were using the same chrome version
It shows up as boxes on Firefox as well.

I can see the issue in Firefox.

First, try removing vault/resources/fonts/font-awesome.woff from your server's cloudflare cache.
Make sure your server is serving .woff files with mime-type: application/font-woff

Cloudflare is reporting a HIT for the file and sending the mime-type as text/plain. I don't know if that's standard for all cache hits, or if it's actually saying .woff files should be interpreted as plain-text, rather than as fonts.
For a Firefox browser with an empty cache, Cloudflare is returning empty Response data for the font in question, rather than the actual content of the file.

I realize now that Chrome was working okay for me because I have Font-Awesome installed in my OS so I can use it in Word and PhotoShop, and it must be using the system-installed version. I'm a little confused why Firefox didn't try to do the same thing.

How would I do that?

Depends. If you're using nginx, you have to modify the mime.types config file. It should be in the same directory as your nginx.conf
You probably have to restart nginx afterwards.

If you're using Apache, and have cPanel access, just find the section Advanced > Mime Types, and add the rule there.

I added the mime type to my server but it does not seem to make a difference. I purged the cache as well.

Is there a way you can exclude that file from Cloudflare entirely? At least until this issue is debugged, have it load the /vault/resources/fonts/ folder from your server?

EDIT: See this StackOverflow issue - http://stackoverflow.com/questions/1...ing-in-firefox
It seems that you either need to exclude your fonts folder from cloudflare, or you need to update your CloudFlare bucket's/your site's cross-domain policy.

I did both and it still doesn't display properly.

I fixed the issue by adding
into the headinclude template but I'm not sure how of an ideal fix that'd be for you.

That is just serving the font from a different server. Also, it didn't fix the issue for me under Firefox. Still appears the same, with squares.

I would recommend disabling Cloudflare completely until the problem can be isolated. As it is now, Cloudflare keeps caching the fonts and the CSS with the problem, so you can never tell if you've fixed it. Only once the site looks okay without Cloudflare, then you should turn Cloudflare back on.

Okay, I have disabled Cloudflare.

Thanks. I was finally able to determine that the file was missing 2 bytes, because Internet Explorer (of all the browsers to be helpful) kept suggesting the file was corrupt.

It turns out the file was being corrupted in the code that prepares it to be added to the ZIP download. For some reason, all the file contents were being processed in chunks with trim(). Apparently at least one of the chunks lined up with what could be considered whitespace characters in the font file. Why trim was implemented at all, I'm not really sure, but it's really unsafe to do in binary files as we have just seen, so I have removed that step from the ZIP maker. Hopefully there are no side effects in PHP files from doing that.

Marking this issue as fixed. You can turn Cloudflare back on.