Font Awesome prikladna je biblioteka ikona. Te ikone mogu biti vektorska grafika pohranjena u .svg
formatu 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:
i
Element je izvorno koriste kako bi ostali elementi kurziv, ali je sada često koristi za ikone. Elementu možete dodati klase Font Awesome da i
biste ga pretvorili u ikonu, na primjer:
Imajte na umu da je span
element 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 fas
i 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-size
nadređ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