Your SlideShare is downloading. ×
  • Like
CSS3 : Icon Fonts
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS3 : Icon Fonts

  • 9,273 views
Published

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

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

Published in Design , Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,273
On SlideShare
0
From Embeds
0
Number of Embeds
11

Actions

Shares
Downloads
20
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Martin Charpentier and Thibaut BailletCSS3 : ICON FONTS
  • 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 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. www.fileformat.info
  • 18. http://www.unicode.org/charts/
  • 19. HTML5 & 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 & 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