Pictos @font-face Icon Font

cameronmoll:

I’ve not used it yet, so I can’t weigh in on the pros and cons. But Drew Wilson’s concept seems ingenious: Instead of image-based application icons, why not use icons that are rendered as an @font-face web font and can scale indefinitely?

Update: Jason Santa Maria and Jonathan Moore both point out the issue of having random letters throughout your markup.

Update II: Shaun Inman and Adam Michela mention that using :before or :after along with content: could eliminate the random letters in your markup. Probably still not terribly accessible, but an option.

Update III: Last update. This one from Drew Wilson himself, who suggests you “keep doing what you’ve been doing for years. You have been marking up your icons in html as background images and placing the fallback text within the html element itself, and then hiding that text using CSS (specifically ‘text-indent: -9999px’). This is a great way to display icons on the web using images and still giving meaning to the page markup.”

Tagged:
font-dace
typography
font
  1. torrent-sites reblogged this from jonathanmoore
  2. free-registry-cleaner reblogged this from jonathanmoore
  3. dimitriokunev reblogged this from cameronmoll
  4. jiewmeng reblogged this from cameronmoll
  5. theseareyourdreams reblogged this from cameronmoll
  6. jonathanmoore reblogged this from cameronmoll and added:
    Wilson is one of my favorite sets...have made their way into virtually every design...
  7. smack416 reblogged this from cameronmoll and added:
    there’s always...for fancier scaleable icons.
  8. ialreadydontlikeyou reblogged this from cameronmoll and added:
    Interesting, though at 49 dollars I’m inclined to just make my own...(I’m a cheap frugal...
  9. cameronmoll posted this