Noriu pasidžiaugti, dar vienu sparčiai dėl patogumo populiarėjančiu web dizainerio arsenalo ginklu - ikonomis šritais (icon fonts). Norėčiau atkreipti kalbos specialistų (kalba.obų) dėmesį, kad pats laikas dar vieną žodžių kombinaciją sulietuvinti.
Gerai, kas tos ikonos-šriftai?
Ikonos-šriftai yra tie patys šriftai, tik sudaryti iš ikonų, o ne raidžių. Geriausias dalykas yra tai, kad šie šrfitai paklūsta visoms CSS taisyklėms, kaip ir bet koks kitas šriftas.
Kurdamas puslapį sutaupai laiko, nes nebereikia paveikslėliams kurti rollover’ių, ar atskirų taisyklių. Puslapiai atsidaro greičiau ir užima mažiau srauto.
Dar vienas geras dalykas, kad fontai ikonos yra vektorinės grafikos elementai, taigi juos galima didinti ir mažinti kiek tik nori ir tokios ikonos nepraranda ryškumo, tiksliau, neišryškėja pikselių kvadratėliai paveikslėlio kraštuose.
Na, o kaip tas ikonas paveikslėlius įkelti į kuriamą interneto puslapį?
1. Šriftas pakraunamas per @font-face taip pat, kaip ir bet kuris kitas šriftas.
Šriftą išsaugai serveryje ir nurodai pavadinimą ir vietą, kaip pavyzdyje.
1 2 3 4 5 6 7 8 9 10 | @font-face { font-family: 'unicons'; src:url('fonts/unicons.eot'); src:url('fonts/unicons.eot?#iefix') format('embedded-opentype'), url('fonts/unicons.svg#unicons') format('svg'), url('fonts/unicons.woff') format('woff'), url('fonts/unicons.ttf') format('truetype'); font-weight: normal; font-style: normal; } |
2. Pritaikyti CSS taisykles kiekvienai ikonai
Kadangi šriftai jau yra puslapyje, galime pritaikyti CSS taisykles.
Pavyzdyje naudojama pseudo class, o klasės pavadinimas paprasčiausiai “.icon”. Paprasta ir aišku.
1 2 3 4 5 6 | .icon:before { font-family: "unicons", sans-serif !important; -webkit-font-smoothing: antialiased; -o-transform: scale(1); text-rendering: optimizeLegibility; } |
Ką reiškia CSS savybės:
-font family - šrifto pavadinimas
-webkit-font-smoothing - raidžių kraštų padarymas lygiais.
-o-transform: scale(1) čia, kad Opera suprastų, apie ką kalbama.
-text-rendering - šrifto atvaizdavimas su visomis smulkmenomis.
Visos pavyzdyje esančios CSS taisyklės gali būti keičiamos.
3. Aprašysime kiekvieną simbolį kaip CSS klasę ir pridėsime šešiatainius kiekvieno simbolio kodus (jie būna pridedami atsisiunčiant šriftą). Čia kalbama apie CSS failą. Jeigu naudojate WordPress, failas dažniausiai vadinasi style.css
Eilutė turi atrodyti taip:
.facebook:before {content: "CHARACTER";} |
Šiuo atveju simbolis yra “e06b”
Eilutė atrodys taip:
.facebook:before {content: "\e06b";} |
4. Kaip ikona atrodys HTML faile
<span class="”icon">Like Us On Facebook</span> |
Dabar turėtume pamatyti ikoną naršyklėje.
5. Čia pavyzdys, kaip ikonas galima patiuninguoti naudojat CSS:
1 2 3 4 5 6 7 8 9 | icon-green:before {color: #008000;} .icon-red:before {color: #ff0000;} .icon-blue:before {color: #0000ff;} .icon-yellow:before {color: #ffff00;} .icon-12:before {font-size: 12px; margin-right: 3px;} .icon-24:before {font-size: 24px; margin-right: 6px;} .icon-36:before {font-size: 36px; margin-right: 9px;} .icon-48:before {font-size: 48px; margin-right: 12px;} |
HTML atrodys taip:
<span class="”icon">Like Us On Facebook</span> |
Šiuo metodu galime taikyti praktiškai visas CSS taisykles, skirtas tekstui redaguoti.
Nemokamos ikonos šriftai:
- aristeides.com/elusive-iconfont
- mfglabs.github.com/mfglabs-iconset
- fortawesome.github.com/Font-Awesome
- zurb.com/playground/foundation-icons
- pictonic.co
- adamwhitcroft.com/batch
- icomoon.io
- somerandomdude.com/work/iconic
- kudakurage.com/ligature_symbols
- entypo.com
- pfefferle.github.com/openwebicons
- tenbytwenty.com/sosa
- metroui.org.ua
- one-div.com
- mapbox.com/maki
- peax-webdesign.com/goodies/free-icons/icones-gratuites
- premiumpixels.com/freebies/80-mini-icons
- github.com/fontello/fontelico
- typicons.com
- thedesignoffice.org/project/modern-pictograms
- heydonworks.com/article/a-free-icon-web-font
- fontsquirrel.com/fonts/modern-pictograms
- designworkplan.com/design/symbol-signs
- fontsquirrel.com/fonts/web-symbols
- dafont.com/dotcom.font
- fontfabric.com/social-media-icons-pack
- tajfa.com/projects/rondo
- justvector-social-icons-font
- pixelb.in/multi-format-social-media-glyph-set-243
- alessioatzeni.com/meteocons
Straipsnį įkvėpė:
designmodo.com
speckyboy.com
Autorius Mindaugas 2013/02/21 - 13:53
Nu dalykas gal ir geras, tik įkeliant tas ikonas vargo yra