The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Icon Fonts Implementation (with Pen)

  • # February 21, 2013 at 8:25 pm

    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?

    # February 21, 2013 at 11:30 pm

    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.

    # February 21, 2013 at 11:37 pm

    Firefox doesn’t allow cross domain support of icon fonts

    That’s just my _guess_

    # February 21, 2013 at 11:41 pm

    Mmk, that makes sense.

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

    @ChrisP Thanks for the help troubleshooting!

    # February 21, 2013 at 11:47 pm

    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,

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed