Web programeri vrlo su navikli koristiti ikone za predstavljanje određene radnje ili ikona može grafički prikazati bilo koju naredbu ili radnju ili pokazatelj na web stranici. Ikone se koriste u dokumentima i aplikacijama, a mogu se birati ili ne birati.
Na primjer, slike koje vidimo na gumbima aplikacije sve su ikone i ti se gumbi mogu odabrati.
Kako bi se olakšalo oblikovanje i programiranje web stranica, razvijene su neke biblioteke ikona s fontovima, odnosno ikone koje se mogu umetnuti kao da su tekstualne i dostupne za upotrebu na HTML stranicama web stranice, što štedi mnogo posla za korisnici, dizajneri i programeri.
U ovom ćemo vodiču pogledati neke knjižnice poput Font Awesome, Bootstrap Glyphicons i Material Design Google koje su knjižnice s unaprijed postavljenim fontovima ikona koje često koriste web programeri.
Font Awesome Tools and Library
Font Awesome je biblioteka fontova koja prikazuje ikone pomoću skupa alata zasnovanih na CSS-u. Ovaj je alat razvijen za upotrebu s Twitter Bootstrapom, ali se može koristiti pojedinačno kao stilski opis na bilo kojoj web stranici.
Prednost CSS knjižnice je ta što radi na bilo kojem pregledniku i uređaju, pa se čak i prilagođava bilo kojoj rezoluciji zaslona.
Knjižnicu možete preuzeti s web stranice Font Awesome. Druga je mogućnost korištenje izravne veze do knjižnice:
Pogledajmo primjer kako implementirati ikone za društvene mreže pomoću Font Awesome, stvaramo html datoteku i dodajemo sljedeći kod:
Font Awesome - ikone društvenih medija
Svaka je ikona predstavljena klasom fa-icon pa će na primjer biti ikona za YouTube fa-youtube, rezultat pri prikazivanju u pregledniku bit će sljedeći:
Tada možemo dodati vlastite CSS klase ili izmijeniti unaprijed definiranu da se prilagodi našem dizajnu, na primjer između oznaka head dodajemo sljedeći CSS kod.
Dekoracija ikona putem CSS -a
Zatim izvršimo u pregledniku i rezultat će biti sljedeći:
Možemo vidjeti da smo primijenili CSS na svaku ikonu i nismo dodali nijednu sliku. Druga mogućnost poboljšanja vidljivosti je promjena klasa lebdenja, to jest, kada miš pređe preko ikone, promijenite boju slova.
Da bismo to učinili, mijenjamo boju u sljedećem retku:
.socijalne ikone .fa: hover {boja: zelena; } Prilikom prelaska kursorom preko ikone rezultat će biti sljedeći:
To možemo učiniti i s pozadinom svake ikone, mijenjajući svojstvo pozadine za boju koja nam se sviđa.
Sve dostupne ikone mogu se vidjeti na web stranici Font Awesome, ikone su organizirane po kategorijama.
Korištenje ove vrste fontova ikona za naše web dizajne omogućuje nam ubrzanje učitavanja stranice jer nam ne trebaju slike i nude veću kvalitetu (osobito na mobilnim uređajima pri zumiranju)
Alati i biblioteka Glyphicons Bootstrap
Glyphicons Bootstrap je biblioteka ikona fontova. Nudi veliki izbor ikona u formatu fonta. Ove su ikone besplatne, a biblioteku možete proširiti i plaćenim ikonama. Besplatne ikone mogu se koristiti u projektima temeljenim na web dizajnu bez da ih morate kupiti. Ova je knjižnica orijentirana na ikone za gumbe koji izvode neke funkcije kao što su ispis, pretraživanje, spremanje itd.
Ova je knjižnica uključena kao stilske tablice u Bootstrap. Za njezino korištenje možemo preuzeti Bootstrap sa njegove službene stranice ili upotrijebiti sljedeću vezu:
Ikone možemo vidjeti i po kategorijama na stranici Glyphicons.
Zatim pogledajmo primjer korištenja ove biblioteke za ikone za gumbe i elemente za unos podataka u obrazac:
Glyphicon Bootstrap - GumbiTestirali smo na mobilnom uređaju kako bi to izgledalo:Glyphicon Bootstrap - Gumbi
Traži Ispis Prijava Prijava Kupi
Primjenjujemo ikonu popisa na odabrane
Automobili Motocikli
Prednosti korištenja ikona fonta ili ikona fonta su u tome što se štedi pri pozivanju slike ili ikone jer su slike u svg formatu u css datoteci biblioteke i te su slike skalabilne.
Cjelovita knjižnica može biti između 10 KB i 40 KB, što povećava brzinu učitavanja web stranice.
Ikone su tekstualne pa njima možemo manipulirati pomoću CSS -a i reagirat će na svaki događaj koji programiramo s Jqueryjem.
Ako u svojstvu CSS Font označimo veličinu fonta u em na primjer, font-size: 4em ikona će reagirati i prilagodit će se svakom uređaju. Također se mogu koristiti za programiranje responzivnih aplikacija s okvirima kako se vidi u vodiču, programiranje mobilnih aplikacija s Ionic Framework -om, te se ikone također koriste.
Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
