Kuidas lisada oma nuppudele fondi ägedaid ikoone

Font Awesome on mugav ikoonide kogu. Need ikoonid võivad olla .svgfailivormingus või veebifondides salvestatud vektorgraafika.

Neid ikoone käsitletakse täpselt nagu fonte. Nende suuruse saate määrata pikslite abil ja nad eeldavad oma HTML-i elementide fondisuurust.

Põhikasutus

Font Awesome lisamiseks oma rakendusse või lehele lisage HTML-i ülaosas olevale elemendile lihtsalt järgmine kood :

iElement oli algselt kasutatud muid elemente italic, kuid nüüd kasutatakse tavaliselt ikoonid. Võite lisada ielemendile Font Awesome klassid, et muuta see ikooniks, näiteks:

Pange tähele, et spanelement on vastuvõetav ka ikoonidega kasutamiseks.

Ikooni lisamiseks toimige järgmiselt.

See annab lihtsa pöidlahoidmise ikooni:

Ja kuidas sisestada see ikoon nupule:

 Like 

Pange tähele, et ikooni, stiili prefiksi ja ikooni nime kasutamisel on kaks osa . Ülaltoodud näite, stiili eesliide ja ikooni nimi on fasja fa-thumbs-upvastavalt.

Font Awesome pakub järgmisi stiili eesliiteid:

Stiil Stiili prefiks Plaani tüüp
Tahke fas Tasuta
Regulaarne far Pro
Valgus fal Pro
Duotone fad Pro
Brändid fab Tasuta

Brändikoonid esitab ettevõte sageli ise ja need on kasulikud näiteks sotsiaalse autentimise või tasumise nuppude loomiseks. Nende ikoonide hulka kuuluvad Twitter, Facebook, Spotify, Apple ja isegi freeCodeCamp:

Kuigi tasuta paketi raames on teil juurdepääs ainult kindlatele ja brändikoonidele, on nende kujundamiseks siiski palju võimalusi.

Fontide vinge ikoonide kujundamine

Lihtsate rakenduste jaoks võite kasutada siseseid stiile:

Suuruse määramiseks võite kasutada ka Font Awesome'i sisseehitatud märksõnu:

Oluline on meeles pidada, et FA ikoonid pärivad font-sizevanema konteineri. See tähendab, et ikoonid laienevad mis tahes tekstiga, mida nendega võib kasutada, mis hoiab kujundust järjepidevana.

Näiteks öelge, et soovite luua mitu nuppu. Nuppude vaikimisi suurus on üsna väike, nii et kirjutate nuppude suuruse suurendamiseks CSS-i, lisades nendes oleva teksti ja ikoonid:

 Like    Dislike    Share 
button { font-size: 1.5em; margin: 5px; }

Samuti saate ikooni suurust otseselt reguleerida, sihtides ikooni ennast ja kohandades seda font-size.

Font Awesome on, noh, vinge! Kõige populaarsemate ikoonide tööriistakomplektidena on seda lihtne kaasata ja kasutada kõigis oma projektides. Nüüd minge ikoonil üles kõik asjad.

Rohkem informatsiooni

  • Font Awesome docs
  • Kõik saadaolevad fondi Awesome ikoonid