This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Icons appear only as rectangular shapes (unicodes)!!!

  • 6 replies
  • 23 have this problem
  • 5 views
  • Last reply by cor-el

more options

Icons such as the facebook or twitter appear only as rectangles: http://www.4shared.com/photo/n5x25lf2ba/Untitled.html While is has to show the following: http://www.4shared.com/photo/8km-7eNgba/Untitled1.html Apparently, the problem exists only in Firefox, for the icons are perfectly displayed on Google Chrome. This occurred to me that morning, without any change of the settings or so... knowing that everything was alright until then. I searched for solutions elsewhere, but nothing seems to work!!! Any assistance would be greatly appreciated, and I thank you previously for all attempts to help me find a solution for my problem.

Icons such as the facebook or twitter appear only as rectangles: http://www.4shared.com/photo/n5x25lf2ba/Untitled.html While is has to show the following: http://www.4shared.com/photo/8km-7eNgba/Untitled1.html Apparently, the problem exists only in Firefox, for the icons are perfectly displayed on Google Chrome. This occurred to me that morning, without any change of the settings or so... knowing that everything was alright until then. I searched for solutions elsewhere, but nothing seems to work!!! Any assistance would be greatly appreciated, and I thank you previously for all attempts to help me find a solution for my problem.

Chosen solution

Yes, they seem to have fixed this partly. The web console no longer shows an error for the fontawesome-webfont.ttf font and a check confirms that the server sends an HTTP access control header, so at least that font works. The fonts/fontawesome-webfont.woff is still rejected and shows size 0 in the web console.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000

Read this answer in context 👍 1

All Replies (6)

more options

Those missing icons are actually supplied by a font that is downloaded from the server (@font-face) as you can see by the little boxes that show the hex code of the characters.

You can check the gfx.downloadable_fonts.enabled pref on the about:config page and make sure that it is set to true (if necessary double-click the line to toggle its value).

Make sure that you allow pages to choose their own fonts.

  • Tools > Options > Content : Fonts & Colors > Advanced: [X] "Allow pages to choose their own fonts, instead of my selections above"
more options

Thank you for responding cor-el. I've checked the gfx.downloadable_fonts.enabled, and it's value is indeed set to true. And the same can be said about the second solution, I looked there, and it's already set as you said, but the problem persists. It's annoying, but I think I may get used to it. I thank you for taking the time to answer, and I hope you contact me whenever another solution appears. :) Have a good time!!!

more options

OK, I tested this and this looks like a CORS issue with the FontAwesome font not getting loaded.

The Web Console (Firefox/Tools > Web Developer) shows these errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://d1d4324mp0stc8.cloudfront.net/s/ec6f202e/bb0864f0d2462d32150451462ed909d5bb98f134/static/dist/fonts/fontawesome-webfont.woff?v=4.1.0. This can be fixed by moving the resource to the same domain or enabling CORS. fontawesome-webfont.woff

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://d1d4324mp0stc8.cloudfront.net/s/ec6f202e/bb0864f0d2462d32150451462ed909d5bb98f134/static/dist/fonts/fontawesome-webfont.woff?v=4.1.0 jarvis-lib.eb2c8ead.min.css

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://d1d4324mp0stc8.cloudfront.net/s/ec6f202e/bb0864f0d2462d32150451462ed909d5bb98f134/static/dist/fonts/fontawesome-webfont.ttf?v=4.1.0. This can be fixed by moving the resource to the same domain or enabling CORS. fontawesome-webfont.ttf

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: http://d1d4324mp0stc8.cloudfront.net/s/ec6f202e/bb0864f0d2462d32150451462ed909d5bb98f134/static/dist/fonts/fontawesome-webfont.ttf?v=4.1.0

There is a workaround possible to see these icon font images, but this is not recommended as this involves disabling security features that would make you vulnerable.

Modified by cor-el

more options

I see... Thank you again, I tried before to download FontAwesome, but I didn't found out how to install them, that doesn't work like any ordinary font installing (copying the .ttf files into fonts directory), I also attempted some kind of "import" stuff in the web console for the .css files, but it didn't work either. I think it's better not to mess up with similar security features, for I'm not expert enough for doing so!!! I though about those pop-up downloading fonts that show up when opening some web-pages, but it's not the case with that one, it never required me to install any kind of fonts before!!! Problems with fonts or unicodes never presented to me when I was on XP, now so many are occurring when I upgraded to Windows 7, (fonts I installed but didn't work and so on...) Thank you anyways, I really appreciate your assistance cor-el!!! :D

more options

Hi!!! :D The issue of the disappearing glyphs had been magically solved by itself. I think it source was from the web site, and now they've got everything right!!! Thank you cor-el for the time you took to look for a solution concerning it!!! Have a good day!!! :)

more options

Chosen Solution

Yes, they seem to have fixed this partly. The web console no longer shows an error for the fontawesome-webfont.ttf font and a check confirms that the server sends an HTTP access control header, so at least that font works. The fonts/fontawesome-webfont.woff is still rejected and shows size 0 in the web console.

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000