Share Posted April 21, 2014 My apologies for being a bit off topic... On my computer it is very common to see a replacement icon rather than font symbols in FFox. Attached are examples from Codepen and SitePoint. The symbols on both these pages display properly in Chrome and IE. I can't be the only person who has this experience - it probably happens to many of our clients. Any ideas what causes it and how to avoid? Thanks. Link to comment Share on other sites More sharing options...
Share Posted April 21, 2014 Not really sure about that. Don't use FireFox enough to notice that day to day. Perhaps one of our community experts has some ideas and can help further. I would suggest writing a little note to the CodePen guys. Those guys are experts on this stuff and its been my experience that their support team is excellent at answering questions. http://codepen.io/support/ Link to comment Share on other sites More sharing options...
Share Posted April 21, 2014 Hello pixeldroid Im on PC Windows 7 (64-bit) and see the font icons. What OS are you seeing this on? What version of Firefox do you see this on? I see them, so have you tried clearing your cache? If you look in the console and inspector do you see the missing font icon point to a file that does not exist? Where there errors in the console when you saw these missing font icons? What was the exact URL you saw this on? It also could be that the Devs on codepen were just in the middle of uploading their changes. But like Carl said.. Try contacting their great support team.. they welcome any issues you bring to their attention! 2 Link to comment Share on other sites More sharing options...
Author Share Posted April 21, 2014 FF 28.0, Win7 Pro x64Codepen is actually working today. I've been out of town for 6 weeks and didn't check it before posting. Probably FF or CodePen adjusted something.However, the star icons on this SitePoint page, http://www.sitepoint.com/store/the-ultimate-css-reference/, don't work (see pic above). The volunteer icon on this orphanage page (and others in the same row), http://indianorphanage.com don't display correctly. Both work in Chrome.I see this so commonly that I think of it as normal.When I inspect one of the stars ("icon-star") on the sitepoint page, both FF and Chrome show a number of CSS properties which have a strikethrough but the stars do display correctly in Chrome. Same occurs for the 'volunteer' icon on the orphanage page.When I load http://indianorphanage.com in FF, I get these console errors:Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:64ReferenceError: jQuery is not defined jquery.themepunch.plugins.min.js:51ReferenceError: jQuery is not defined jquery.themepunch.revolution.min.js:10Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:64Use of getUserData() or setUserData() is deprecated. Use WeakMap or element.dataset instead. requestNotifier.js:64Same page in the Google Console:Uncaught ReferenceError: jQuery is not defined jquery.themepunch.plugins.min.js?rev=4.1.4&ver=3.9:51Uncaught ReferenceError: jQuery is not defined jquery.themepunch.revolution.min.js?rev=4.1.4&ver=3.9:10Resource interpreted as Font but transferred with MIME type x-font/woff: "event.returnValue is deprecated. Please use the standard event.preventDefault() instead. www-embed-player-vflWfXjsU.js:29Thanks. Link to comment Share on other sites More sharing options...
Share Posted April 21, 2014 That's weird because i see the font icons (review stars) on that sitepoint page too.. I do get this console error though: TypeError: container.offset(...) is undefined http://www.sitepoint.com/wp-content/themes/sitepoint/assets/javascripts/scripts-foot-c8a0ec73e59e2ffba7cd12638f61110f.js?ver=3.8.1 Line 7 Do you have any scripts blocking add-ons in Firefox that might be blocking scripts or assets? I know this is a stupid question.. but have you deleted your cache? Link to comment Share on other sites More sharing options...
Author Share Posted April 21, 2014 Actually, that is not a stupid question - I hadn't done that. However, it didn't help. Further, I ran FF in safe-mode and that didn't fix it either. Maybe I am the only guy in the world with this problem... Link to comment Share on other sites More sharing options...
Author Share Posted April 21, 2014 Found the answer on the Mozilla forums: Edit menu > Preferences > Content In the Fonts & Colors section, click Advanced Check the box for "Allow pages to choose their own fonts" and OK out. Reload, and the icons should appear. Thanks for the suggestions! Link to comment Share on other sites More sharing options...
Share Posted April 21, 2014 Firefox has that checked by default in fresh installs.. also i had that option already checked in Firefox. Found here: Tools -> Options -> Content -> Fonts & Colors -> Advanced -> Allow pages to choose their own fonts (checked) But if you have the File bar unchecked then you would do this instead: Firefox (orange button top left corner) -> Options -> Content -> Fonts & Colors -> Advanced -> Allow pages to choose their own fonts (checked) Glad you got it figured out! Link to comment Share on other sites More sharing options...
Author Share Posted April 21, 2014 Me too. Its been bugging me for over a year! Link to comment Share on other sites More sharing options...
Share Posted April 22, 2014 Perhaps this article will clear things up, and certainly explain some issues on codepen recently: http://css-tricks.com/icon-fonts-vs-svg/ 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now