CSS3 : Icon Fonts

Download CSS3 : Icon Fonts

Post on 28-Jan-2015




0 download

Embed Size (px)


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


<ul><li> 1. Martin Charpentier and Thibaut BailletCSS3 : ICON FONTS</li></ul> <p> 2. Front-end developer@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin Charpentier 3. MFG Labswww.mfglabs.comtwitter: @mfg_labscontact@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 withharmony. 7. From.AI to .OTFGLYPHS app 8. Glyphs 9. Copy / Paste 10. Ascender and Descender 11. Alignment 12. Unicode Assignment 13. UNICODE 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. Logical Assignment to UnicodeMFG Labs Icons Name UnicodePencil 0x1f4c5Cloud 0x2601FallbackAnchor 0x2693 16. Private Use AreaIts preferable to pick unicode from PrivateUse Area rather than using a unicode which isalready assigned to a letter.Range : E000 ... F8FF (6400 UNICODES) 17. www.fileformat.info 18. http://www.unicode.org/charts/ 19. HTML5 &amp; CSS3 20. File Format (Compatibility)EOTAAWOFFAATTFAA 21. Mobile CompatibilitySVGAATTFAA 22. @font-face 23. Font Face Kit 24. Font face Kit 25. Generic Class 26. ImplementationCSSHTML 27. ImplementationCSSFix IE7 &amp; 8https://gist.github.com/Thibaut-B/5383783HTML 28. Customization1x 2x 3x 29. Customization 30. Customization 31. Retina Ready 32. PerformanceImage sprite : 650kbYslow: 82Google Speed Score : 90TTF Font : 11kbYslow: 88Google 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@bailletthibautthibaut.baillet@mfglabs.comThibaut BailletLead Designer@im_charpmartin.charpentier@mfglabs.comMartin 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-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 </p>