Okay
  Public Ticket #258724
Arrows don't display properly in Firefox
Closed

Comments

  • Nathan started the conversation

    I've noticed since updating to the most recent Salient version that all arrows show instead as boxes with EOO7, EOO6, EOO8 etc. This includes carousel arrows (if you view on a narrow browser) and the down arrow I use on my home page. See attached as example.

    Is this a .htaccess issue? I know Firefox is touchy with that sort of thing.

    Thanks!

    Nathan

  •  8,839
    Tahir replied

    Hey Nathan!

    I can see the icons on latest Firefox ?. 

    Thanks


    ThemeNectar Support Team 

  • Nathan replied

    Hey Tahir,

    I booted into Windows and found the same issue with Firefox in Win as I have on Mac.

    Today I tested this on a Mac with Firefox that is on a completely different network to me (and on the other side of town), but it still fails to show the down arrow on the nectar slider on the front page of my website. Instead I see the square with four numbers inside (just like the attached image in my first post of this thread).

    Are you certain you can see the down arrow on the slider?

    If so, I'll ask a few other people around the world to test on their Firefox.

  • Nathan replied

    Sorry, I'm now talking about a different arrow to the first post. See attached for the arrow that is not showing.

  •  8,839
    Tahir replied

    Hey!

    You need to put in the correct mime types as the fonts files are not recognized by your server. Please see url : https://gist.github.com/lindsayevans/794800

    Thanks


    ThemeNectar Support Team 

  • Nathan replied

    I'm trying to get help from MediaTemple on this but they're not being very helpful.

    In the meantime, I noticed that most Font Awesome icons look fine on Firefox, it's just this one particular icon.

    The ones that work have their icons set by font-awesome.min.css.

    For example:

    .icon-youtube-play:before { content: "ï…ª"; }

    The box above is actually FI6R or something inside a box (hard to read on the screen so I'm just guessing the characters there).

    In Chrome, the content is shown as "\f16a".

    Whereas the problematic icon is being set by Salient's style.css

    If I try to manually enter this into Firefox's inspector, it just shows as actual text.

    This probably isn't very helpful, so I'll report back when MediaTemple help me.

  • Nathan replied

    Fixed!

    I did this by overriding Salient's down arrow with my own. I add it in using icomoon's premium set. I used a different glyph code altogether. This displays correctly.

    I'm using icomoon's Ultimate Pack in addition to Salient's free icomoon icons. To avoid conflicts, I have always been using different glyph codes so they don't override any of Salient's codes. For example, Salient's are e600, so I set mine to fxxx instead.

    Nathan