ikonfontok a mai weben
TRANSCRIPT
![Page 1: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/1.jpg)
Ikonfontok a mai weben
BOKROS GYÖRGY @hipra
13. szeptember 18., szerda
![Page 2: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/2.jpg)
“Egyszerű szimbólumokat csomagolunk fontkészletbe, hogy a weben GUI elemekként jelenítsük meg őket.”
- Captain Obvious
13. szeptember 18., szerda
![Page 3: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/3.jpg)
1997: WEBDINGS
Vincent Connare, Sue Lightfoot,Ian Patterson, Geraldine Wade
13. szeptember 18., szerda
![Page 4: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/4.jpg)
1990: WINGDINGS
NYC
1997: WEBDINGS
NYC
13. szeptember 18., szerda
![Page 5: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/5.jpg)
HASZNÁLJUK?MIÉRT
13. szeptember 18., szerda
![Page 6: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/6.jpg)
MIÉRT HASZNÁLJUK?
1; Ugyanolyan vektoros elemek, mint a betűk, bármekkorára nagyíthatók
minőségromlás nélkül.
13. szeptember 18., szerda
![Page 7: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/7.jpg)
MIÉRT HASZNÁLJUK?
2; Könnyen bővíthető, alakítható, mindenki jól jár vele:
• kevesebb designeri erőforrás szükséges, nem kell külön “retinás” (@2x) verziót készíteni minden grafikai elemből, ami hosszútávon egyébként sem megoldás
• egyetlen HTTP kérés (mint a png sprite-oknál, viszont nincs szükség CSS pozicionálásra)
• a fileméret jóval kisebb a képeknél
• széleskörű böngészőtámogatás (IE6 is)
13. szeptember 18., szerda
![Page 8: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/8.jpg)
MIÉRT HASZNÁLJUK?
3; Ugyanazok a CSS-szabályok érvényesek rájuk, mint a normál betűkre, vagyis egyszerűen lehet:
• színezni, színátmenetet adni
• méretezni
• árnyékolni
• átlátszóságot állítani
• forgatni
• stroke-olni
• :hover, :focus stílusokat
beállítani, on the fly
• css transition-ök
• ...
13. szeptember 18., szerda
![Page 9: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/9.jpg)
MIÉRT HASZNÁLJUK?
5; Illeszkedik az aktuális trendekhez:
• reszponzív design
• a böngésző a webdesigner eszköze, nem a Photoshop
• pixel-free css
• fl*t design
13. szeptember 18., szerda
![Page 10: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/10.jpg)
SEMMI SEM
TÖKÉLETES...
13. szeptember 18., szerda
![Page 11: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/11.jpg)
SEMMI SEM TÖKÉLETES...
1; Időrabló és komplex feladat, hogy “normál” pixelsűrűségű eszközön jól mutasson, igazán jó végeredmény sosem garantált.
gizmodo.com
13. szeptember 18., szerda
![Page 12: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/12.jpg)
SEMMI SEM TÖKÉLETES...
2; Renderelési különbségek böngészők és op. rendszerek között.
Win 7IE 10
Win 8IE 10
Win 8Chrome 29
OS XChrome 29
OS XFirefox 23
13. szeptember 18., szerda
![Page 13: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/13.jpg)
SEMMI SEM TÖKÉLETES...
Win 7IE 10
OS XChrome 29
OS XFirefox 23
iOS 7
Ezek a problémák nagy pixelsűrűségű eszközökön megszűnnek.
13. szeptember 18., szerda
![Page 14: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/14.jpg)
SEMMI SEM TÖKÉLETES...
3; Csak egyszínű ikonokat használhatunk
OH, WAIT!
13. szeptember 18., szerda
![Page 15: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/15.jpg)
SEMMI SEM TÖKÉLETES... forecastfont.iconvau.lt/
13. szeptember 18., szerda
![Page 16: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/16.jpg)
MOST MÁR CSINÁLJUNK
VÉGRE VALAMIT!!!
13. szeptember 18., szerda
![Page 21: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/21.jpg)
Az Icomoon által generált font formátumok:
13. szeptember 18., szerda
![Page 22: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/22.jpg)
13. szeptember 18., szerda
![Page 23: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/23.jpg)
OKÉ, KÉSZ A FONT,
ÉS MOST???
13. szeptember 18., szerda
![Page 24: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/24.jpg)
Az ikonfontunk markupja
1; data- tulajdonság használatával:
2; class használatával:
13. szeptember 18., szerda
![Page 25: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/25.jpg)
style.css
13. szeptember 18., szerda
![Page 26: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/26.jpg)
style.css
13. szeptember 18., szerda
![Page 27: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/27.jpg)
style.css
13. szeptember 18., szerda
![Page 28: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/28.jpg)
style.css
13. szeptember 18., szerda
![Page 29: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/29.jpg)
Példa:Markup:
CSS:
13. szeptember 18., szerda
![Page 30: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/30.jpg)
Példa:
13. szeptember 18., szerda
![Page 31: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/31.jpg)
Példa:
13. szeptember 18., szerda
![Page 32: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/32.jpg)
HA MÉG BÍRJÁTOK:MULTILAYERES IKONOK
13. szeptember 18., szerda
![Page 33: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/33.jpg)
A kívánt végeredmény:
13. szeptember 18., szerda
![Page 34: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/34.jpg)
A két ikon Illustratorban, 512x512 px-es canvason, 32-es griddel, pontosan ráigazítva
13. szeptember 18., szerda
![Page 35: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/35.jpg)
A markup:
A CSS:
13. szeptember 18., szerda
![Page 36: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/36.jpg)
Még nem tökéletes:
13. szeptember 18., szerda
![Page 37: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/37.jpg)
Vissza a CSS-hez:
13. szeptember 18., szerda
![Page 38: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/38.jpg)
13. szeptember 18., szerda
![Page 39: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/39.jpg)
B-változat:Multilayeres, de csak egyszínű
A CSS:
13. szeptember 18., szerda
![Page 40: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/40.jpg)
13. szeptember 18., szerda
![Page 41: Ikonfontok a mai weben](https://reader033.vdocuments.net/reader033/viewer/2022060117/55864b77d8b42a25158b4582/html5/thumbnails/41.jpg)
A témában még:
http://fontello.com/
http://fortawesome.github.io/Font-Awesome/
http://fontastic.me/
http://icomoon.io/
Letölthető:
Multilayeres ikonfont + html
A prezentációban látott ikonok változatai
A multilayeres változatokért kösz a segítséget, @freevo!
13. szeptember 18., szerda