Your SlideShare is downloading. ×

Icon Fonts FTW

717

Published on

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.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
717
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Icon Fonts FTWMike AparicioUser Interface Engineer, Groupona.k.a. “The Toolstrap Guy”maparicio@groupon.com@peruvianidolTuesday, April 2, 13
  • 2. Managing Icons & Images/images(eww!)Sprites!(yay!)Tuesday, April 2, 13
  • 3. 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
  • 4. Whoops.Tuesday, April 2, 13
  • 5. But Mike, who Prints out Websites?Tuesday, April 2, 13
  • 6. But Mike, who Prints out Websites?My mom.Tuesday, April 2, 13
  • 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. 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
  • 9. Icon Fonts Are AwesomeChris Coyier says so.http://css-tricks.com/examples/IconFont/Tuesday, April 2, 13
  • 10. Making an Icon Fonthttp://icomoon.io/appTuesday, April 2, 13
  • 11. 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
  • 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. Using Your Icon Font<span  class="icon-­‐ok"></span>Tuesday, April 2, 13
  • 14. SOCIAL ICONShttp://brandcolors.net/Tuesday, April 2, 13
  • 15. User MenuTuesday, April 2, 13
  • 16. RatingsTuesday, April 2, 13
  • 17. QuotesTuesday, April 2, 13
  • 18. AlertsTuesday, April 2, 13
  • 19. ButtonsTuesday, April 2, 13
  • 20. SPINNERSTuesday, April 2, 13
  • 21. LOGOShttp://idol.pe/icon-font-demoTuesday, April 2, 13
  • 22. Ligaturesicon-font-demo.ttfhttp://symbolset.com/Tuesday, April 2, 13
  • 23. ICON FONTS ON GROUPON.COMBefore(Sprites)After(Icon Font + CSS)Tuesday, April 2, 13
  • 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/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
  • 25. Thank You!Questions?Mike Apariciomaparicio@groupon.com@peruvianidolhttp://idol.pe/icon-font-repoTuesday, April 2, 13

×