Why do I often see missing characters in FFox?

HTML & CSS
1

Many times I see a replacement icon with "E0’ stacked on top of “07” rather than font symbols in FFox. This happens frequently on codepen.
Today, I noticed it on http://www.sitepoint.com/store/the-ultimate-css-reference/ and finally decided to get to the root of the problem.

When I visit that page in FFox, each star in the ‘Customer Reviews’ section of the page is displayed with the replacement icon . When I view that page in IE or Chrome, I see the correct font symbol, which is a star. The replacement icon appears to be an image, but when I RMB over it or try to select it, it appears to be invisible to the mouse.

I assume that this is a common occurrence for FFox users - especially those who don’t know how to fix it (if there is a fix).
Thanks.

2

Weird - I’m using Firefox 26 on Ubuntu 13.04 and the stars are showing correctly for me.

Have you tried changing the character encoding from the “View” menu? Set it to UTF-8 and that page should work.

3

It was set to “Windows-1252”, I changed it to UTF-8, restarted FF, problem persists.
Thanks.

4

Definitely weird. :slight_smile:

Firefox usually picks up the page’s encoding, and I’ve never needed to over-ride it. This page is Windows-1252, and the CSS Refernce page is UTF-8. You can change it in the “view” menu, as I said, but you don’t need to restart FF for it to take effect. In fact, re-starting may cause it to reset - I’m not sure about that.

Which version of Firefox are you using, and which OS?

5

FF 26.0, Win7 Pro x64
Here are codePen examples:

6

OK - I’m stumped. :slight_smile: The answer seems to be that Firefox isn’t applying the CSS rules to display the icons, but why it works for me and not you with the same version of Firefox is a mystery. I’m going to move this to the CSS forum.

7

Using Firefox 26 Windows 7 Home, I see the stars for the SitePoint reference page.

<h2>Customer reviews</h2>
<i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i>
<i class="icon-star"></i> <i class="icon-star"></i>
<p>&ldquo;Serious resource/reference book. Definitely one to have on the shelf.&rdquo;</p>
<i class="icon-star"></i> <i class="icon-star"></i> <i class="icon-star"></i>
<i class="icon-star"></i> <i class="icon-star"></i> 

.icon-star:before{content:"\\e007"}
8

FWIW, I restarted FF in safe mode, it launched set to UTF-8 encoding and the problem persists :frowning:

9

Finally 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.

10

Thanks for coming back to share that, @pixeldroid. :slight_smile: