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
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
330
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
3
3.3k
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.3k
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
440
「Figmaプラグイン開発してみた」@スタメンデザイナーオープン勉強会
kiyoshifuwa
0
120
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
390
LLMによるRAG評価用合成テストデータの生成
licux
6
680
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
入社3ヶ月目のプロダクトデザイナー視点で見たヤプリ / Joining Yappli as a Product Designer: My Perspective After 90 Days
yappli_developers
0
120
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
It's Worth the Effort
3n
184
28k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Rails Girls Zürich Keynote
gr2m
94
13k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Unsuck your backbone
ammeep
669
57k
How to Ace a Technical Interview
jacobian
276
23k
RailsConf 2023
tenderlove
29
1k
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