SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Exclamation Why do I often see missing characters in FFox?

    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-u...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.
    Attached Images Attached Images

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    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.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  3. #3
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It was set to "Windows-1252", I changed it to UTF-8, restarted FF, problem persists.
    Thanks.

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Definitely weird.

    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?
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  5. #5
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    FF 26.0, Win7 Pro x64
    Here are codePen examples:
    Attached Images Attached Images

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    OK - I'm stumped. 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.
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!

  7. #7
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,032
    Mentioned
    187 Post(s)
    Tagged
    2 Thread(s)
    Using Firefox 26 Windows 7 Home, I see the stars for the SitePoint reference page.

    HTML Code:
    <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>
    Code CSS:
    .icon-star:before{content:"\e007"}

  8. #8
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    FWIW, I restarted FF in safe mode, it launched set to UTF-8 encoding and the problem persists

  9. #9
    SitePoint Member
    Join Date
    Jan 2014
    Posts
    6
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,085
    Mentioned
    255 Post(s)
    Tagged
    5 Thread(s)
    Thanks for coming back to share that, @pixeldroid .
    Take plenty of exercise walk round and round the garden
    or
    sign up now for the Isle of Jura 10K or Half Marathon!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •