Fonts awesome: pilnīga bibliotēkas rokasgrāmata

Bezmaksas ikonas fonts awesome: Kas tas ir un ko tas tiek izmantots. Kā savienot ikonas uz vietni. Bibliotēkas priekšrocības un trūkumi.

Font awesome ikona Set: Ultimate Guide

Fonts Awesome ir fontu un ikonu kopums, pamatojoties uz CSS un mazāk. Šis rīks ļauj ātri savienot visu veidu ikonas uz vietni, ievērojami uzlabojot tās dizainu un lietojamību. Tas ir pietiekami, lai ievietotu dažas rindas kodu.

Fonts Awesome dod jums pielāgojamas vektora ikonas, kuras varat viegli personalizēt - izmērs, krāsa, ēnas un viss pārējais, ko var izdarīt ar CSS.

Fontu satriecošajai bibliotēkai ir milzīga labāko ieteikumu kolekcija. Jūs uzlabojat savu projektu ar unikālām ikonām. Faktiski tas ir milzīgs visu veidu ikonu komplekts, ko varat izmantot saviem mērķiem.

Fontawesome visas ikonas ir absolūti un pilnīgi bez maksas. Bibliotēka ir licencēta saskaņā ar GNU vispārējo publisko licenci. Tas nozīmē, ka to var brīvi izmantot komerciālos projektos un principā visur.

Kopums tika izveidots ar Dave Gandhi. Tas ietver bezmaksas sociālo mediju ikonas, ikonas, lai uzlabotu lietotāja interfeisu, un vairāk.

Parasti fontu awesome fontu skripti tiek izmantoti kopā ar bootstrap un bootstrapcdn. Fonts awesome ir otrais tikai uz Google fontu popularitāti.

Kā tas strādā

Galvenā iezīme ir tā, ka visi fontu awesome ikonas nav statiski attēli. Tie ir fonta formātā. Citiem vārdiem sakot, tie ir ikonas fonti. Piemēram, meklēšanas ikona vai sociālā tīkla logotips ir tāds pats kā vienkāršās rakstzīmes A, B, C.

Fontu awesome ikonas tiek izveidotas, izmantojot mērogojamus vektorus. Tāpēc tos var palielināt līdz gandrīz jebkuram izmēram.

Visas pieejamās ikonas ir iekļautas vienā fonta failā. Viss, kas Jums nepieciešams, ir lejupielādēt šo failu no oficiālās vietnes un savienot to stilā.

Kāpēc dizaineri izvēlas fontu awesome

Font awesome ir vairākas priekšrocības:

• Ātrs savienojums. Jums vienkārši nepieciešams lejupielādēt īpašu failu no oficiālās tīmekļa vietnes un savienot to, norādot ceļu uz to CSS kodā.
• Elastīgums un mērogojamība. Ikonas var palielināt jebkura izmēra. Simboli būs tikpat skaidri, kad ierīce atļauj. Reaģējošā dizaina vecumā tas ir svarīgi. Starp citu, tā paša iemesla dēļ fontu awesome ikonas ir piemērotas tīklenes displejiem.
• Stilizācija. Ikonas var viegli mainīt krāsu, izmēru, ēnu vai citos ārējos parametros. Dizainers saņem visas regulārā teksta veidošanas priekšrocības. Varat arī pagriezt ikonas. Piemēram, parādiet otrādi vai pagrieziet 90 grādus.
• Ātra vietnes iekraušana. Visas ikonas ir iekļautas vienā fonta failā. Tāpēc tas aizņem tikai vienu HTTP pieprasījumu, lai ielādētu fontu awesome. Tas ir lieliski piemērots tīmekļa vietnes veiktspējai.
• Mīlestība pārlūkiem. Fonts awesome ir pārrobežu pārlūkprogrammas rīks. Jums nav jāuztraucas par fontu un ikonu pārlūkprogrammas saderību. Tie ir labi atbalstīti visi no tiem. Pat veci IE8.
• Savietojams ar dažādām sistēmām. Bibliotēka tika izveidota galvenokārt bootstrap. Tomēr tas darbosies arī ar citām sistēmām.
• Vairāki formāti. Šis rīks ir pieejams .eot, .ttf, .woff un SVG formātos. Tātad fonts awesome tiek apstrādāts tādā pašā veidā kā citi tīmekļa fonti.
• Nav nepieciešams JavaScript. Font awesome neprasa JavaScript darboties.

Tādējādi fonts awesome ir efektīvs un ērts rīks, kas ievērojami saglabā izkārtojuma laiku un paātrina jūsu vietni.

Trūkumi fontu awesome

Instrumentam ir arī trūkumi. Par laimi, nav daudz no tiem.

Pirmkārt, ikonas var krāsot tikai vienā krāsā. Tomēr šo ierobežojumu var apiet. Piemēram, apvienojot bezmaksas ikonas ar otru. Vai izmantojot CSS efektus

Otrkārt, fonts awesome bibliotēka satur pārāk daudz ikonas, un tie visi ir iekļauti vienā failā. Ja dizainers vai izkārtojuma dizainers tikai nepieciešams, lai savienotu pāris ikonas, tie joprojām ir, lai ielādētu visu bibliotēku pilnībā. Un tie ir simtiem tūkstošu papildu ikonu, kas aizņems vietu. Tomēr arī šeit ir risinājums - izveidojot savu montāžu, kas ietver tikai nepieciešamās ikonas.

Font awesome versijas: 5 un 6

Fonts awesome 5 tika izlaists 2017. gada 7. decembrī un sākotnēji bija 1278 ikonas. Piektā versija nāk divos iepakojumos: bezmaksas (fonts awesome bezmaksas) un samaksāts (fonts awesome pro). Bezmaksas plāns satur arī ikonas no visām ceturtajām versijām. Ikonas ir pieejamas saskaņā ar Sil Open fonta licenci 1.1, Creative Commons atribūts 4.0, un MIT.

Fonts Awesome 6 ir jauna versija, kas tika izlaista 2020. gada otrajā pusē. Tā ietver jaunas ikonas un ir pieejama tikai apmaksātajā plānā.

Fonts awesome 6 alfa ir arī ceļā 2021. Šī ir vēl viena jauna paaudze ikonas bibliotēkā. Papildus jaunajām ikonām, versija 6 Alpha arī pievieno jaunus stilus, jaunus pakalpojumus un palīglīdzekļus. Lietotāji var iepriekš pasūtīt.

Bezmaksas un maksas plāni: atšķirības un funkcijas

Jūs varat lejupielādēt ikonas par brīvu vai apmaksātu tarifu plānu.

Bezmaksas plāns ietver vairāk nekā 1600 ikonas un 1 komplektu. Komplekts ir ikonas, stilu un iestatījumu kolekcija, kas ļauj ātri veikt izmaiņas, nepievienojot kodu.

Maksas tarifs:

• Ietver vairāk nekā 7800 ikonas un 20 komplekti.
• Nodrošina piekļuvi font awesome pro. Tas nozīmē, ka ikonas var izmantot vietējās mobilajās lietojumprogrammās un datorā (piemēram, vārdu teksta redaktorā vai izveidojot prezentāciju PowerPoint).
• Ļauj augšupielādēt savas ikonas. Jūs varat izmantot savas ikonas līdzās vai vietā oficiālā fonta awesome ikonas. Piemēram, tas ir tas, kā jūs varat augšupielādēt uzņēmuma logo. Jūs varat veikt tādas pašas darbības ar savām ikonām kā ar pamata - mainiet stilu, izmēru, krāsu utt.

Abas versijas ir pastāvīgas. Tas ir, tie tiek sniegti vienreiz un visiem.

Veidi, kā savienot fontu awesome

Pirmkārt, jums jāiet uz oficiālo tīmekļa vietni un lejupielādēt bibliotēku. Lejupielādētajam arhīvam jābūt izsaiņotam un CSS un fontu mapēm, kas kopētas jūsu vietnes mapē.

Pēc tam ceļš uz bibliotēkas failu ir norādīts starp galvas tagiem. Piemēram:

Kā parādīt fontu awesome ikonas tīmekļa vietnē. Populārākās metodes:

1.Izmantojiet HTML

Vienkāršākais veids.

Jums ir nepieciešams doties uz galeriju oficiālajā tīmekļa vietnē (fontawesome.com/icons?d=gallery) un izvēlēties ikonu, kas jums patīk. Katrai ikonai ir personas kods, piemēram:. Tas ir pietiekami, lai kopētu un ielīmētu to pareizajā vietā kodā.

2. VIA CSS

Lai to izdarītu, izmantojiet pseido elementus pēc vai agrāk, kā arī nepieciešamās ikonas Unicode. Jūs varat to visu lietot vienā galerijā. Šāda koda piemērs: F209.

Stila faila ieraksta piemērs:

div :: pēc {displejs: bloks; Saturs: "F209"; Font-Family: 'Fonts awesome 5 bezmaksas';}

Noslēgumā: Visi fontu awesome ikonas

Tādējādi fonts awesome ir ātrs un ērts veids, kā pievienot bezmaksas ikonas jūsu vietnei. Visas ikonas ir viegli mērogojamas un nav palēnināt vietni.