This document discusses best practices for using icon fonts in CSS3, including using simple shapes to maintain harmony across icons, assigning unicode values logically, using the private use area for unicode values, file formats like EOT, WOFF, and TTF for compatibility, implementing icon fonts with @font-face in CSS and HTML, considerations for mobile compatibility and retina displays, and customization options. It provides links to resources for unicode charts, font creation tools, and examples of icon fonts.

1. Martin Charpentier and Thibaut Baillet
CSS3 : ICON FONTS

2. Front-end developer
@bailletthibaut
thibaut.baillet@mfglabs.com
Thibaut Baillet
Lead Designer
@im_charp
martin.charpentier@mfglabs.com
Martin Charpentier

3. MFG Labs
www.mfglabs.com
twitter: @mfg_labs
contact@mfglabs.com

4. CREATION

5. Grid, guides and shapesTo maintain a unity from an icon to another, you must compel you to stick to some rules

6. Shapes and MathStrict compliance with mathematic rules is not a goal. But using simple shapes allow you to build icons with
harmony.

7. From.AI to .OTF
GLYPHS app

8. Glyphs

9. Copy / Paste

10. Ascender and Descender

11. Alignment

12. Unicode Assignment

13. UNICODE

14. Unicode : a standard for typeface
Thousand of unicodes dedicated to
shapes and symbols
(Arrows, Currency Symbols, Geometic Shapes, etc...)
Standardize the use of icons in font

15. Logical Assignment to Unicode
MFG Labs Icons Name Unicode
Pencil 0x1f4c5
Cloud 0x2601
Fallback
Anchor 0x2693

16. Private Use Area
It’s preferable to pick unicode from Private
Use Area rather than using a unicode which is
already assigned to a letter.
Range : E000 ... F8FF (6400 UNICODES)

17. www.fileformat.info

18. http://www.unicode.org/charts/

19. HTML5 & CSS3

20. File Format (Compatibility)
EOT
AA
WOFF
AA
TTF
AA

21. Mobile Compatibility
SVG
AA
TTF
AA

22. @font-face

23. Font Face Kit

24. Font face Kit

25. Generic Class

26. Implementation
CSS
HTML

27. Implementation
CSS
Fix IE7 & 8
https://gist.github.com/Thibaut-B/5383783
HTML

28. Customization
1x 2x 3x

29. Customization

30. Customization

31. Retina Ready

32. Performance
Image sprite : 650kb
Yslow: 82
Google Speed Score : 90
TTF Font : 11kb
Yslow: 88
Google Speed Score : 96
* source : http://goo.gl/tpOKt

33. http://mfglabs.github.io/mfglabs-iconset/
http://www.fontello.com

34. Thank You!
Front-end developer
@bailletthibaut
thibaut.baillet@mfglabs.com
Thibaut Baillet
Lead Designer
@im_charp
martin.charpentier@mfglabs.com
Martin Charpentier

35. http://designshack.net/articles/graphics/twitters-new-logo-the-geometry-and-evolution-of-our-favorite-bird/
https://github.com/blog/1135-the-making-of-octicons
http://www.somerandomdude.com/2012/01/31/font-embedding-icons-the-right-way/
http://www.codestyle.org/css/at-font-face/StandardUnicodeIconsWebFonts.shtml
http://www.fileformat.info/info/unicode/char/a.htm
Useful link