spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 18.11.2012
Hodnoť článok:
18 1

Fenomén doby: Dosť bolo transparentných ikoniek!

Ak sa pohybujete v oblasti designu a tvorby GUI pre webové aplikácie, stretávate sa napríklad s Bootstrap-om od Yahoo či témamy z ThemeForest-u, často narážate (rovnako ako ja) na novinky. Jednou (a určite nie poslednou) z nich je napríklad font pre najčastejšie používané ikonky. Tak si to poďme predstaviť.

It's Awesome... Font Awesome

Pamätáte si isto, čo všetko musíte spraviť, ak chcete mať ikonky na navigácii, prípadne opakovať väčšie ikonky potom pri titulkoch sekcií a tak podobne. Pre každú veľkosť samostatná ikonka v tom konkrétnom rozmere. Preto vznikli projekty ako napríklad IconFinder.com či jemu podobné. A to nehovorím o tom, koľko to dalo roboty, ak sme chceli aby ikonky menili pri :hover evente svoju farbu spolu s fotnom, prípadne s pozadím. Jou, tieto doby sú už (dúfajme) fuč a to aj vďaka tomu, že prichádza FontAwesome s jeho super knižnicou plnou ikoniek.

Čo potrebujeme na štart?

V prvom rade si prejdite na stránky projektu a stiahnite si knižnicu (css triedy, prípadne triedy pre less či bootstrap). Je dôležité sa rozhodnúť, čo presne chcete použiť, nakoľko niektoré riešenie vyžaduje napríklad LESS a iné zasa BOOTSTRAP. V každom prípade, je dostupné aj tzv. plain riešenie, kde jednoducho naimportujete font. Ale poďme pekne krok za krokom.

  1. Nakopírujte súbory zo stiahnutého zip-u do adresáru Vášho projektu
  2. skopírujte a pridajte súbor font-awesome.css do Vášho projektu (do hlavičiek stránok) alebo ho naimportujte cez @import url(font-awsome.css);
  3. ak je to nutné, opravte cesty k súboru písma, ak nie, nechajte pôvodný súbor bezozmien
  4. používajte ikonkový font na Vaše ikonky

A čo ikonky?

Vypísať sem úplne všetky možné aj nemožné ikonky, ktoré font obsahuje sa snáď ani nedá a aj keby sa dalo (čo sa dá), tak nie je toľko času. V každom prípade, prehľad ikoniek si môžete pozrieť priamo na stránkach projektu. Dôležité je však vedieť, že ide o CSS3 riešenie, nakoľko sú použité triedy a selectory, ktoré fungujú vďaka moderným prehliadačom!

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

Už z tohto zápisu je jasné, že čokoľvek čo bude obsahovať icon- bude zobrazované fontom FontAwesome, ktorý z danej triedy urobí ikonku, resp. ju tam doplní miesto Vás. Teda, ak budete chcieť použiť napríklad obáločku ako je tomu na stránkach zajtra.sk (hore na messages), tak použijete nasledovný zápis:

<div class="icon-envelope-alt">0 nových správ</div>

Daný zápis zistí, že chcete použiť nasledovnú ikonku a priradí ju pred vami zadaný text.

Vzhľadom na fakt, že ide o font, sú veľkosti ikoniek čisto vo Vašich rukách, rovnako ako napríklad ich farba pri odkliku, pri hover-i, farba ich pozadia a tak podobne. V podstate s nimi pracujete klasicky ako s písmom, takže sa Vám medze sto pro nijako nekladú. Ešte možno jedna zaujímavosť - stále pribúdajú nové a nové ikonky, takže je dobré si adresu uložiť do bookmarkov a priebežne aktualizovať font aj css-ko.

Kde sa to najviac hodí?

Ako som písal v úvode, určite sa to najviac hodí ak robíte GUI pre rôzne webové aplikácie. Ja osobne to využívam pri tvorbe CMS riešení, prípadne pre CRM-ká a aplikácie na facebook-u. Ale použiť to samozrejme môžete kdekoľvek.

Použité zdroje
— FontAwesome.github › http://fortawesome.github.com/Font-Awesome/
— IconFinder.com › http://www.iconfinder.com/
František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
18 1

13 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

3 0 Andrej Mihaliak 18.1.2013 16:24:16
Dobrá stránka je tiež http://icomoon.io/app/ kde si môžete zvoliť ktoré ikonky chcete poprípade si tam pridať vlastné :-)
1 0 Martin Maricak 4.1.2013 13:20:16
Ďalšia dobrá séria webfont ikoniek: http://aristath.github.com/elusive-iconfont/
0 0 Roland Dobos 25.12.2012 20:20:34
Awesome ;]] už nebudem musieť googliť ikonky na dev verzie

super článok, toto sa zíde ;]]]
2 0 Martin Maricak 20.11.2012 21:38:35
Výborná vecička. Používam už nejaký čas. :)
Ešte aj ikonky http://www.entypo.com/ sú pekné a tiež free. A tak isto aj http://glyphicons.com/ sú už vo verzii s webfontom, začínam zvažovať, že ich kúpim. :)
0 2 Milan Dvorský 20.11.2012 14:33:17
kedze opera mini vyuziva na pozadi proxy, nie je vylucene, ze tu bude pes zakopany ...
0 0 František Čaník 20.11.2012 13:55:51
hold, oprea mini nema v sebe podporu ext. fontov, cim je viac ako jasne, ze veci ako @font-face proste neficia
0 0 Matúš Jančík 20.11.2012 13:46:31
@Miloš teraz som skusal jednu vec kde pouzivam Google webfonts aj tieto ikony a v Opera Mini na Android 4 to nejde. Ikony neukazuje vobec a google fonty tiez vynecha a pouzije standartne.

Bezne prehliadace na mobiloch funguju spravne.
0 0 František Čaník 20.11.2012 13:26:24
@Miloš: operu mini nemam, tak som to na nej ani netestoval, v kazdom pripade Android s tym nema ziadne troubles, takze si myslim, ze by nemusela mat ani opera mini.
0 0 Miloš 20.11.2012 12:06:18
Ako to vyzerá na Opere Mini a podobných "neštandardných" prehliadačoch?
1 0 Imrich Kovaľ 18.11.2012 23:27:32
Super clanok, zide sa aj pri tvorbe typografie v ramci projektu...:)
0 0 Peter Širka 18.11.2012 22:53:15
Už som raz pokukoval po takomto riešení a teraz si mi ho znova pripomenul. Ďakujem za tip, bodlo... Haluzná je tá veľkosť fontu, že 70 kB, to je fakt wauu.
0 0 Michal Fiala 18.11.2012 21:50:18
Výborný tip !
1 0 Milan Dvorský 18.11.2012 19:35:02
vidis, toto ma nenapadlo taketo vyuzitie! dik za hint!
Zajtra.sk > Programovanie > CSS/HTML > Fenomén doby: Dosť bolo transparentných ikoniek!


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama