Icon Fonts FTW - Speaker Deck

Slide 1

Slide 1 text

Icon Fonts FTW Mike Aparicio User Interface Engineer, Groupon a.k.a. “The Toolstrap Guy” maparicio@groupon.com @peruvianidol

Slide 2

Slide 2 text

Why Sprites Suck •Difficult to maintain •One giant file; may contain unnecessary icons •Icons look like ass on high pixel density displays (Retina) •Browsers don’t print background images by default

Slide 3

Slide 3 text

Whoops.

Slide 4

Slide 4 text

But Mike, who Prints out Websites?

Slide 5

Slide 5 text

But Mike, who Prints out Websites? My mom.

Slide 6

Slide 6 text

GROUPON SPRITE INVENTORY common.png 61k places-profile-icons.png 2k checkout.png 39k heartx.png 5k map-pointers.png 2k personalization.png 8k share-sprite.png 2k bg-refer_cta_sprite.png 1k star-rating.gif 2k gift-wizard-calendar-icon.png 1k

Slide 7

Slide 7 text

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 in

Slide 8

Slide 8 text

Icon Fonts Are Awesome Chris Coyier says so. http://css-tricks.com/examples/IconFont/

Slide 9

Slide 9 text

Making an Icon Font http://icomoon.io/app

Slide 10

Slide 10 text

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 font

Slide 11

Slide 11 text

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.html 56 icons

Slide 12

Slide 12 text

Using Your Icon Font http://idol.pe/icon-font-demo

Slide 13

Slide 13 text

SOCIAL ICONS http://brandcolors.net/

Slide 14

Slide 14 text

User Menu

Slide 15

Slide 15 text

Ratings

Slide 16

Slide 16 text

Quotes

Slide 17

Slide 17 text

Alerts

Slide 18

Slide 18 text

Buttons

Slide 19

Slide 19 text

SPINNERS

Slide 20

Slide 20 text

LOGOS

Slide 21

Slide 21 text

Ligatures icon-font-demo.ttf http://symbolset.com/

Slide 22

Slide 22 text

ICON FONTS ON GROUPON.COM Before (Sprites) After (Icon Font + CSS)

Slide 23

Slide 23 text

• The Era of Symbol Fonts http://alistapart.com/article/the-era-of-symbol-fonts • HTML for Icon Font Usage http://css-tricks.com/html-for-icon-font-usage/ • The Big List of Flat Icons & Icon Fonts http://css-tricks.com/ﬂat-icons-icon-fonts/ • 5 Use Cases for Icon Fonts http://css-tricks.com/ﬁve-use-cases-for-icon-fonts/ • Four Custom Icon Font Generators Compared http://designshack.net/articles/css/four-custom-icon-font-generators-compared/ Further Reading

Slide 24

Slide 24 text

Thank You! Questions? Mike Aparicio maparicio@groupon.com @peruvianidol http://idol.pe/icon-font-repo