Būk trendiškas ir naudok ikonas šriftus, o bonusas - 30 nemokamų ikonų šriftų

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:

1.  aristeides.com/elusive-iconfont
   
2. mfglabs.github.com/mfglabs-iconset
   
3. fortawesome.github.com/Font-Awesome
   
4. zurb.com/playground/foundation-icons
   
5. pictonic.co
   
6. adamwhitcroft.com/batch
   
7. icomoon.io
   
8. somerandomdude.com/work/iconic
   
9. kudakurage.com/ligature_symbols
   
10. entypo.com
    
11. pfefferle.github.com/openwebicons
    
12. tenbytwenty.com/sosa
    
13. metroui.org.ua
    
14. one-div.com
    
15. mapbox.com/maki
    
16. peax-webdesign.com/goodies/free-icons/icones-gratuites
    
17. premiumpixels.com/freebies/80-mini-icons
    
18. github.com/fontello/fontelico
    
19. typicons.com
    
20. thedesignoffice.org/project/modern-pictograms
    
21. heydonworks.com/article/a-free-icon-web-font
    
22. fontsquirrel.com/fonts/modern-pictograms
    
23. designworkplan.com/design/symbol-signs
    
24. fontsquirrel.com/fonts/web-symbols
    
25. dafont.com/dotcom.font
    
26. fontfabric.com/social-media-icons-pack
    
27. tajfa.com/projects/rondo
    
28. justvector-social-icons-font
    
    
29. pixelb.in/multi-format-social-media-glyph-set-243
    
    
30. alessioatzeni.com/meteocons
    
    

Straipsnį įkvėpė:
designmodo.com
speckyboy.com