Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Icon Fonts Implementation (with Pen)

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #42913
    sloveland
    Participant

    I’m trying out icon fonts for the first time, I’ve got a sample working on my first pen, but it doesn’t appear to be working in Firefox 18 or Safari. Firefox isn’t rendering the font logos, and Safari gives a dreaded “white screen”.

    Checking the Inspector, it looks like the assets are loaded properly, and the font is recognized, yet the icons are not actually being rendered. Any hints?

    http://codepen.io/sloveland/pen/uHxcD

    #125644
    sloveland
    Participant

    Safari appears to be working fine now, it might have been my server. Still having the problem in Firefox though. I’ve tested on a few mobile devices and they seem to be working.

    #125645
    ChrisP
    Participant

    Firefox doesn’t allow cross domain support of icon fonts

    http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default

    That’s just my _guess_

    #125646
    sloveland
    Participant

    Mmk, that makes sense.

    Theoretically, the fonts should work once I actually implement this all on my site.


    @ChrisP
    Thanks for the help troubleshooting!

    #125647
    ChrisP
    Participant

    Doesn’t hurt to add this to your .htaccess for when you implement it on your site as well:

    # BEGIN @font-face fix for FF



    Header set Access-Control-Allow-Origin “*”

    # END @font-face fix for FF%

    credit to @JoshBlackwood, who pointed out the fix here, https://css-tricks.com/forums/discussion/comment/93173/#Comment_93173

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.