Font awesome: täielik raamatukogu juhend

Tasuta ikoonid Font Awesome: Mis see on ja mida seda kasutatakse. Kuidas ühendada ikoonid saidile. Raamatukogu eelised ja puudused.

Font awesome ikoon komplekt: ülim juhend

Font Awesome on komplekt fonte ja ikoonide põhineb CSS ja vähem. Tööriist võimaldab teil kiiresti saidile kiiresti ühendada igasuguseid ikoone, parandades oluliselt selle disaini ja kasutatavust. See on piisav, et sisestada mõned koodi read.

Font Awesome annab teile skaleeritavad vektoriikoonid, mida saate hõlpsalt isikupärastada - suurus, värv, varjud ja kõik muu, mida CSS -iga saab teha.

Font Awesome Library'l on tohutu kollektsioon teile parimaid ettepanekuid. Parandate oma projekti ainulaadsete ikoonidega. Tegelikult on see tohutu igasuguste ikoonide komplekt, mida saate kasutada oma eesmärkidel.

Fontawesome'is on kõik ikoonid absoluutselt ja täiesti tasuta. Raamatukogu on litsentseeritud GNU üldise avaliku litsentsi alusel. See tähendab, et seda saab vabalt kasutada kaubandusprojektides ja põhimõtteliselt kõikjal.

Set oli loodud Dave Gandhi poolt. See sisaldab tasuta sotsiaalmeedia ikoone, kasutajaliidese parandamiseks ikoone ja palju muud.

Tavaliselt kasutatakse font awesome fondi skriptide koos bootstrap ja bootstrapcdn. Font awesome on teine ​​ainult Google Fonts populaarsus.

Kuidas see töötab

Peamine omadus on see, et kõik fondid awesome ikoonid ei ole staatilised pildid. Nad on fontide formaadis. Teisisõnu on need ikoonifonnad. Näiteks on otsingukoon või sotsiaalse võrgustiku logo sama, mis lihtsad tähemärgid A, B, C.

Font Awesome ikoonid luuakse skaleeritavate vektorite abil. Seetõttu saab neid suurendada peaaegu igasuguse suurusega.

Kõik saadaval olevad ikoonid kuuluvad ühele fondifailile. Kõik, mida vajate, on selle faili allalaadimine ametlikul saidil ja ühendada selle stiilidega.

Miks disainerid valivad fondi awesome

Font Awesome'il on mitmeid eeliseid:

• Kiire ühendus. Te peate lihtsalt alla laadima spetsiaalse faili ametlikust veebisaidilt ja ühendage selle, täpsustades selle CSS-koodi tee.
• Paindlikkus ja mastaapsus. Ikoonide saab suurendada mis tahes suurusele. Sümbolid on nii selged kui seade seda võimaldab. Vastutundliku disaini vanuses on see oluline. Muide, samal põhjusel sobivad retina ekraanile font awesome ikoonid.
• Stylization. Ikoonide saab kergesti muuta värvi, suuruse, vari või mõnda muud välisparameetreid. Disainer saab kõik stiili tavalise teksti eelised. Võite ka ikoone pöörata. Näiteks kuvatakse tagurpidi või pöörake 90 kraadi.
• Saidi kiire laadimine. Kõik ikoonid sisalduvad ühes fondifailis. Niisiis võtab see ainult ühe HTTP-taotlus, et laadida fontide awesome. See on suurepärane veebisaidi jõudluse jaoks.
• Brauserite armastus. Font Awesome on rist-brauseri tööriist. Sa ei pea muretsema fonte ja ikoonide brauseri kokkusobivuse pärast. Neid toetavad nad hästi. Isegi vana IE8.
• Ühilduvad erinevate raamistikega. Raamatukogu loodi peamiselt bootstrap jaoks. Siiski töötab see hästi ka teiste raamistikega.
• Mitmed vormingud. Tööriist on saadaval .eot, .TTF ,.Woff ja SVG-vormingud. Nii et fondi awesome käsitletakse samamoodi nagu teised veebifondid.
• JavaScripti ei nõuta. Font Awesome ei nõua JavaScripti käivitamiseks.

Seega on font awesome tõhus ja mugav tööriist, mis oluliselt säästab paigutuse aega ja kiirendab teie veebisaiti.

Puudused Font Awesome

Tööriistal on ka puudused. Õnneks ei ole palju neid.

Esiteks saab ikoone värvida ainult ühes värvitoonis. Seda piirangut saab siiski kõrvale hoida. Näiteks ühendada tasuta ikoonid üksteisega. Või CSS-i efektide kasutamine

Teiseks sisaldab font awesome raamatukogu liiga palju ikoone ja nad kõik kuuluvad ühes faili. Kui disainer või paigutuse disainer peab ainult ühendama paar ikooni, peavad nad ikka veel kogu raamatukogu täielikult laadima. Ja need on sadu tuhandeid ekstra ikoone, mis asuvad ruumi. Siiski on siin ka lahendus - oma assamblee loomine, mis hõlmab ainult vajalikke ikoone.

Font awesome versioonid: 5 ja 6

Font Awesome 5 ilmus 7. detsembril 2017 ja algselt sisaldas 1278 ikooni. Viies versioon on kahes pakendis: tasuta (front awesome tasuta) ja makstud (font awesome pro). Vaba plaan sisaldab ka ikoone kõigist neljas versioonidest. Ikoonid on saadaval SIL-i avatud fondi litsentsi all 1.1, Creative Commons Attribution 4.0 ja MIT.

Font Awesome 6 on uus versioon, mis ilmus 2020. aasta teisel poolel. See sisaldab uusi ikoone ja on saadaval ainult tasulises plaanis.

Font Awesome 6 Alpha on ka 2021. aastal. See on veel üks uus ikooni raamatukogu põlvkond. Lisaks uutele ikoonidele lisab versioon 6 Alpha ka uusi stiile, uusi teenuseid ja abivahendeid. Kasutajad saavad tellida.

Tasuta ja tasustatud plaanid: erinevused ja funktsioonid

Saate alla laadida ikoone tasuta või makstud tariifiplaani jaoks.

Tasuta plaan sisaldab üle 1600 ikooni ja 1 komplekti. Komplekt on ikoonide, stiilide ja seadete kogum, mis võimaldab teil kiiresti muuta muudatusi ilma koodi lisamata.

Tasustatud tariif:

• Sisaldab üle 7800 ikooni ja 20 komplekti.
• Pakub juurdepääsu font awesome pro. See tähendab, et ikoone saab kasutada kohalikke mobiilirakendustes ja teie arvutis (näiteks sõna tekstiredaktoris või esitluse loomisel PowerPointi).
• Võimaldab teil oma ikoone üles laadida. Võite kasutada oma ikoonid kõrval või asemel ametlik font awesome ikoonid. Näiteks saate ettevõtte logo üles laadida. Sama tegevusi saate täita oma ikoonidega nagu põhiliste ones - muuta stiili, suuruse, värvi jne.

Mõlemad versioonid on igavene. See tähendab, et need on esitatud üks kord ja kõik.

Kuidas ühendada fondi awesome

Esiteks peate minema ametlikule veebisaidile ja alla laadima raamatukogu. Allalaaditud arhiiv peab olema lahtipakkimata ja CSS-i ja fonte kaustad kopeeritud teie saidi kausta.

Pärast seda, tee raamatukogu faili on määratud pea silte vahel. Näiteks:

Kuidas kuvada fondi fantastiliste ikoonide veebisaidil. Kõige populaarsemad meetodid:

1.Mõustamine HTML

Lihtsaim viis.

Sa pead minema Galerii ametlikule veebisaidile (fontawesome.com/icons?d=Gallery) ja valige soovitud ikoon. Iga ikoonil on näiteks isiklik kood: See on piisav, et kopeerida ja kleepida selle õigesse kohta koodi.

2. CSS-i kaudu

Selleks kasutage pseudo-elemente pärast või varem, samuti vajaliku ikooni Unicode'i Unicode'i Unicode'i Unicode'i Unicode'i. Te saate selle kõik samas galeriis. Sellise koodi näide: F209.

Näide stiili faili kirje:

Div :: Pärast {Display: plokk; Sisu: 'F209'; Font-perekond: "Font awesome 5 tasuta ';}

Kokkuvõttes: kõik fondid awesome ikoonid

Seega on font awesome kiire ja mugav viis tasuta ikoonide lisamiseks veebisaidile. Kõik ikoonid on kergesti skaleeritavad ja ei aeglusta saiti.