Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS3 : L'ère des "Icon Fonts"
Search
iamcharp
April 23, 2013
Design
3
120
CSS3 : L'ère des "Icon Fonts"
Plongez à l'interieur du processus de creation et d'utilisation d'une "Icon Font".
iamcharp
April 23, 2013
Tweet
Share
Other Decks in Design
See All in Design
The Spectacular Lies of Maps
axbom
PRO
1
300
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
Liquid GlassとApp Intents
touyou
0
390
Findyのプロデチームの 歩みとこれから
satty9556
0
290
アプリ360onWeb使い方と裏ワザ?紹介!
ikejun360
0
300
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
420
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
3.8k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
860
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
560
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
3
1.5k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
130
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.3k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Why Our Code Smells
bkeepers
PRO
339
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Bash Introduction
62gerente
615
210k
How to Ace a Technical Interview
jacobian
280
24k
Building an army of robots
kneath
306
46k
Building Applications with DynamoDB
mza
96
6.6k
Transcript
Martin Charpentier & Thibaut Baillet CSS3 : L'ÈRE DES "ICON
FONTS"
Front-end développeur @bailletthibaut
[email protected]
Thibaut Baillet Lead Designer @im_charp
[email protected]
Martin Charpentier
MFG Labs www.mfglabs.com twitter: @mfg_labs
[email protected]
TECHNIQUES
Grilles guides et cercles (Pour conserver une unité d’un pictogramme
à l’autre il faut s’astreindre à respecter des règles)
Proportions et formes (Le respect strict de règles mathématiques n’est
pas indispensable. L’utilisation de formes géometriques permettent de structurer plus harmonieusement les courbes et formes qui constituent l’icône.)
Du fichier .AI au .OTF GLYPHS app
Glyphs
Copier / coller
Ascendante & descendante
Alignement
Assignement des unicodes
UNICODE
Unicode : standard pour les caractères Des milliers d’unicodes pour
les formes et symboles (Arrows, Currency Symbols, Geometic Shapes, etc...) Standardise l’utilisation d’icônes
Assignement logique d’unicode MFG Labs Icons Name Unicode Pencil 0x1f4c5
Cloud 0x2601 Fallback Anchor 0x2693
Private use area Assignement au gamme private use plutôt qu’à
des unicodes correspondant à des lettres Range : E000 ... F8FF (6400 UNICODES)
www.fileformat.info
http://www.unicode.org/charts/
HTML5 & CSS3
Les formats (compatibilités) EOT AA WOFF AA TTF AA
Compatibilités mobiles SVG AA TTF AA
@font-face
Font face Kit
Font face Kit
Class générique
Implémentation CSS HTML
Implémentation CSS Fix IE7 & 8 https://gist.github.com/Thibaut-B/5383783 HTML
Customisation 1x 2x 3x
Customisation
Customisation
Retina ready
Performance Image sprite : 650kb Yslow: 82 Google Speed Score
: 90 TTF Font : 11kb Yslow: 88 Google Speed Score : 96 * source : http://goo.gl/tpOKt
http://mfglabs.github.io/mfglabs-iconset/ http://www.fontello.com
MERCI Front-end développeur @bailletthibaut
[email protected]
Thibaut Baillet Lead Designer @im_charp
[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 Liens utiles
None