Icons appear only as rectangular shapes (unicodes)!!!
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.
الحل المُختار
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)
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"
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!!!
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
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
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!!! :)
الحل المُختار
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