CSS3 : Icon Fonts

9,288 views

Published on

Dive into the creative process of Icon Fonts, and understand how to build your own.

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

No Downloads
Views
Total views
9,288
On SlideShare
0
From Embeds
0
Number of Embeds
7,688
Actions
Shares
0
Downloads
23
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

CSS3 : Icon Fonts

  1. 1. Martin Charpentier and Thibaut BailletCSS3 : ICON FONTS
  2. 2. Front-end developer@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin Charpentier
  3. 3. MFG Labswww.mfglabs.comtwitter: @mfg_labscontact@mfglabs.com
  4. 4. CREATION
  5. 5. Grid, guides and shapesTo maintain a unity from an icon to another, you must compel you to stick to some rules
  6. 6. Shapes and MathStrict compliance with mathematic rules is not a goal. But using simple shapes allow you to build icons withharmony.
  7. 7. From.AI to .OTFGLYPHS app
  8. 8. Glyphs
  9. 9. Copy / Paste
  10. 10. Ascender and Descender
  11. 11. Alignment
  12. 12. Unicode Assignment
  13. 13. UNICODE
  14. 14. Unicode : a standard for typefaceThousand of unicodes dedicated toshapes and symbols(Arrows, Currency Symbols, Geometic Shapes, etc...)Standardize the use of icons in font
  15. 15. Logical Assignment to UnicodeMFG Labs Icons Name UnicodePencil 0x1f4c5Cloud 0x2601FallbackAnchor 0x2693
  16. 16. Private Use AreaIt’s preferable to pick unicode from PrivateUse Area rather than using a unicode which isalready assigned to a letter.Range : E000 ... F8FF (6400 UNICODES)
  17. 17. www.fileformat.info
  18. 18. http://www.unicode.org/charts/
  19. 19. HTML5 & CSS3
  20. 20. File Format (Compatibility)EOTAAWOFFAATTFAA
  21. 21. Mobile CompatibilitySVGAATTFAA
  22. 22. @font-face
  23. 23. Font Face Kit
  24. 24. Font face Kit
  25. 25. Generic Class
  26. 26. ImplementationCSSHTML
  27. 27. ImplementationCSSFix IE7 & 8https://gist.github.com/Thibaut-B/5383783HTML
  28. 28. Customization1x 2x 3x
  29. 29. Customization
  30. 30. Customization
  31. 31. Retina Ready
  32. 32. PerformanceImage sprite : 650kbYslow: 82Google Speed Score : 90TTF Font : 11kbYslow: 88Google Speed Score : 96* source : http://goo.gl/tpOKt
  33. 33. http://mfglabs.github.io/mfglabs-iconset/http://www.fontello.com
  34. 34. Thank You!Front-end developer@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin Charpentier
  35. 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-octiconshttp://www.somerandomdude.com/2012/01/31/font-embedding-icons-the-right-way/http://www.codestyle.org/css/at-font-face/StandardUnicodeIconsWebFonts.shtmlhttp://www.fileformat.info/info/unicode/char/a.htmUseful link

×