Icon Fonts FTW
Upcoming SlideShare
Loading in...5
×
 

Icon Fonts FTW

on

  • 900 views

An overview of icon fonts with tips and tools for creating and using them. A lightning talk presentation for Geekfest, Tuesday, April 2, 2013.

An overview of icon fonts with tips and tools for creating and using them. A lightning talk presentation for Geekfest, Tuesday, April 2, 2013.

Statistics

Views

Total Views
900
Views on SlideShare
896
Embed Views
4

Actions

Likes
0
Downloads
14
Comments
0

1 Embed 4

https://www.linkedin.com 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Icon Fonts FTW Icon Fonts FTW Presentation Transcript

  • Icon Fonts FTWMike AparicioUser Interface Engineer, Groupona.k.a. “The Toolstrap Guy”maparicio@groupon.com@peruvianidolTuesday, April 2, 13
  • Managing Icons & Images/images(eww!)Sprites!(yay!)Tuesday, April 2, 13
  • Why Sprites Suck•Difficult to maintain•One giant file; may contain unnecessary icons•Icons look like ass on high pixel density displays (Retina)•Temptation to include content images•Browsers don’t print background images by defaultTuesday, April 2, 13
  • Whoops.Tuesday, April 2, 13
  • But Mike, who Prints out Websites?Tuesday, April 2, 13
  • But Mike, who Prints out Websites?My mom.Tuesday, April 2, 13
  • GROUPON SPRITE INVENTORYcommon.png61kplaces-profile-icons.png2kcheckout.png39kheartx.png5kmap-pointers.png2kpersonalization.png8kshare-sprite.png2kbg-refer_cta_sprite.png1kstar-rating.gif2kgift-wizard-calendar-icon.png1kTuesday, April 2, 13
  • GROUPON SPRITE INVENTORY•Different sizes, colors, opacity•Mix of flat, gradients, shadows•Different icons representing similar concepts•Janky, outdated social icons•No visual cohesion•Pixelated when zoomed inTuesday, April 2, 13
  • Icon Fonts Are AwesomeChris Coyier says so.http://css-tricks.com/examples/IconFont/Tuesday, April 2, 13
  • Making an Icon Fonthttp://icomoon.io/appTuesday, April 2, 13
  • Making an Icon Font•Select icons from libraries and/or import your own SVGs•Edit tags to name your icon•Select Private Use Area encoding for best results, accessibility•Base64 encode icons in CSS if you’re really hard core•Name your font•Save your font to JSON•Download your fontTuesday, April 2, 13
  • Making an Icon Font• style.css (5k)• lte-ie7.js (2k)• fonts/icon-font-demo.eot (11k)• fonts/icon-font-demo.svg (43k)• fonts/icon-font-demo.ttf (11k)• fonts/icon-font-demo.woff (6k)• index.html56 iconsTuesday, April 2, 13
  • Using Your Icon Font<span  class="icon-­‐ok"></span>Tuesday, April 2, 13
  • SOCIAL ICONShttp://brandcolors.net/Tuesday, April 2, 13
  • User MenuTuesday, April 2, 13
  • RatingsTuesday, April 2, 13
  • QuotesTuesday, April 2, 13
  • AlertsTuesday, April 2, 13
  • ButtonsTuesday, April 2, 13
  • SPINNERSTuesday, April 2, 13
  • LOGOShttp://idol.pe/icon-font-demoTuesday, April 2, 13
  • Ligaturesicon-font-demo.ttfhttp://symbolset.com/Tuesday, April 2, 13
  • ICON FONTS ON GROUPON.COMBefore(Sprites)After(Icon Font + CSS)Tuesday, April 2, 13
  • The Era of Symbol Fontshttp://alistapart.com/article/the-era-of-symbol-fontsHTML for Icon Font Usagehttp://css-tricks.com/html-for-icon-font-usage/The Big List of Flat Icons & Icon Fontshttp://css-tricks.com/flat-icons-icon-fonts/5 Use Cases for Icon Fontshttp://css-tricks.com/five-use-cases-for-icon-fonts/Four Custom Icon Font Generators Comparedhttp://designshack.net/articles/css/four-custom-icon-font-generators-compared/Making Accessible Icon Buttonshttp://www.nczonline.net/blog/2013/04/01/making-accessible-icon-buttons/Icon Stackshttp://conor.cc/posts/icon-stacksFurther ReadingTuesday, April 2, 13
  • Thank You!Questions?Mike Apariciomaparicio@groupon.com@peruvianidolhttp://idol.pe/icon-font-repoTuesday, April 2, 13