Martin Charpentier and Thibaut Baillet CSS3 : ICON FONTS
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Martin Charpentier and Thibaut Baillet
CSS3 : ICON FONTS
Front-end [email protected]@mfglabs.com
Thibaut Baillet
Lead Designer@[email protected]
Martin Charpentier
CREATION
Grid, guides and shapesTo maintain a unity from an icon to another, you must compel you to stick to some rules
Shapes and MathStrict compliance with mathematic rules is not a goal. But using simple shapes allow you to build icons with harmony.
From.AI to .OTF
GLYPHS app
Glyphs
Copy / Paste
Ascender and Descender
Alignment
Unicode Assignment
UNICODE
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
Logical Assignment to Unicode
MFG Labs Icons Name Unicode
Pencil 0x1f4c5
Cloud 0x2601
Fallback
Anchor 0x2693
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)
HTML5 & CSS3
File Format (Compatibility)
EOT
AA
WOFF
AA
TTF
AA
Mobile Compatibility
SVG
AA
TTF
AA
@font-face
Font Face Kit
Font face Kit
Generic Class
ImplementationCSS
HTML
Implementation
CSS
Fix IE7 & 8
https://gist.github.com/Thibaut-B/5383783
HTML
Customization
1x 2x 3x
Customization
Customization
Retina Ready
Performance
Image sprite : 650kbYslow: 82
Google Speed Score : 90
TTF Font : 11kbYslow: 88
Google Speed Score : 96
* source : http://goo.gl/tpOKt
http://mfglabs.github.io/mfglabs-iconset/
http://www.fontello.com
Thank You!
Front-end [email protected]@mfglabs.com
Thibaut BailletLead Designer@[email protected]
Martin Charpentier
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
Related Documents
![[@NaukriEngineering] Icon fonts & vector drawable in iOS apps](https://static.cupdf.com/doc/110x72/5883041f1a28abe70d8b6109/naukriengineering-icon-fonts-vector-drawable-in-ios-apps.jpg){kind=icon}
