Kako gumbovima dodati sjajne ikone fonta

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