Icon Fonts FTW

download Icon Fonts FTW

of 25

  • date post

    20-Aug-2015
  • Category

    Technology

  • view

    759
  • download

    0

Embed Size (px)

Transcript of Icon Fonts FTW

  1. 1. Icon Fonts FTWMike AparicioUser Interface Engineer, Groupona.k.a. The Toolstrap Guymaparicio@groupon.com@peruvianidolTuesday, April 2, 13
  2. 2. Managing Icons & Images/images(eww!)Sprites!(yay!)Tuesday, April 2, 13
  3. 3. Why Sprites SuckDifficult to maintainOne giant file; may contain unnecessary iconsIcons look like ass on high pixel density displays (Retina)Temptation to include content imagesBrowsers dont print background images by defaultTuesday, April 2, 13
  4. 4. Whoops.Tuesday, April 2, 13
  5. 5. But Mike, who Prints out Websites?Tuesday, April 2, 13
  6. 6. But Mike, who Prints out Websites?My mom.Tuesday, April 2, 13
  7. 7. 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
  8. 8. GROUPON SPRITE INVENTORYDifferent sizes, colors, opacityMix of flat, gradients, shadowsDifferent icons representing similar conceptsJanky, outdated social iconsNo visual cohesionPixelated when zoomed inTuesday, April 2, 13
  9. 9. Icon Fonts Are AwesomeChris Coyier says so.http://css-tricks.com/examples/IconFont/Tuesday, April 2, 13
  10. 10. Making an Icon Fonthttp://icomoon.io/appTuesday, April 2, 13
  11. 11. Making an Icon FontSelect icons from libraries and/or import your own SVGsEdit tags to name your iconSelect Private Use Area encoding for best results, accessibilityBase64 encode icons in CSS if youre really hard coreName your fontSave your font to JSONDownload your fontTuesday, April 2, 13
  12. 12. 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
  13. 13. Using Your Icon FontTuesday, April 2, 13
  14. 14. SOCIAL ICONShttp://brandcolors.net/Tuesday, April 2, 13
  15. 15. User MenuTuesday, April 2, 13
  16. 16. RatingsTuesday, April 2, 13
  17. 17. QuotesTuesday, April 2, 13
  18. 18. AlertsTuesday, April 2, 13
  19. 19. ButtonsTuesday, April 2, 13
  20. 20. SPINNERSTuesday, April 2, 13
  21. 21. LOGOShttp://idol.pe/icon-font-demoTuesday, April 2, 13
  22. 22. Ligaturesicon-font-demo.ttfhttp://symbolset.com/Tuesday, April 2, 13
  23. 23. ICON FONTS ON GROUPON.COMBefore(Sprites)After(Icon Font + CSS)Tuesday, April 2, 13
  24. 24. 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/at-icons-icon-fonts/5 Use Cases for Icon Fontshttp://css-tricks.com/ve-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
  25. 25. Thank You!Questions?Mike Apariciomaparicio@groupon.com@peruvianidolhttp://idol.pe/icon-font-repoTuesday, April 2, 13