Font Awesome prikladna je biblioteka ikona. Te ikone mogu biti vektorska grafika pohranjena u .svgformatu datoteke ili web fontovi.
Te se ikone tretiraju baš kao fontovi. Možete odrediti njihovu veličinu pomoću piksela, a oni će pretpostaviti veličinu fonta svojih nadređenih HTML elemenata.
Osnovna upotreba
Da biste uključili Font Awesome u svoju aplikaciju ili stranicu, samo dodajte sljedeći kod elementu na vrhu HTML-a:
iElement je izvorno koriste kako bi ostali elementi kurziv, ali je sada često koristi za ikone. Elementu možete dodati klase Font Awesome da ibiste ga pretvorili u ikonu, na primjer:
Imajte na umu da je spanelement također prihvatljiv za upotrebu s ikonama.
Evo kako dodajete ikonu:
Ovo će stvoriti jednostavnu ikonu palca gore:
A evo kako biste umetnuli tu ikonu na gumb:
Like 
Primijetite da postoje dva dijela korištenja ikone, prefiks stila i naziv ikone . U gornjem primjeru prefiks stila i naziv ikone su fasi fa-thumbs-up, odnosno.
Font Awesome nudi sljedeće prefikse stila:
| Stil | Prefiks stila | Vrsta plana |
|---|---|---|
| Čvrsto | fas |
Besplatno |
| Redovito | far |
Pro |
| Svjetlo | fal |
Pro |
| Duotone | fad |
Pro |
| Brendovi | fab |
Besplatno |
Ikone robnih marki tvrtka često podnosi sama, a korisne su za izgradnju stvari poput gumba za društvenu autentifikaciju ili plaćanje. Ove ikone uključuju Twitter, Facebook, Spotify, Apple, pa čak i freeCodeCamp:
Iako ćete u okviru besplatnog plana imati pristup samo solidnim i robnim ikonama, još uvijek postoji mnogo načina za njihovo oblikovanje.
Styling Font Awesome ikone
Za jednostavne aplikacije mogli biste koristiti ugrađene stilove:
Za određivanje veličine možete koristiti i ugrađene ključne riječi Font Awesome:
Važno je upamtiti da ikone FA nasljeđuju font-sizenadređeni spremnik. To znači da se ikone skaliraju s bilo kojim tekstom koji bi se mogao koristiti s njima, što održava dizajn dosljednim.
Na primjer, recimo da želite stvoriti nekoliko gumba. Zadana veličina gumba prilično je mala, pa napišete CSS kako biste povećali veličinu gumba, zajedno s tekstom i ikonama u njima:
Like Dislike Share button { font-size: 1.5em; margin: 5px; }
Također možete izravno prilagoditi veličinu ikone ciljanjem same ikone i prilagodbom nje font-size.
Font Awesome je, pa, sjajan! Kao najpopularnije alate s ikonama, lako ih je uključiti i koristiti u svim svojim projektima. Sada idite na ikonu gore sve stvari.
Više informacija
- Font Awesome docs
- Sve dostupne ikone Font Awesome