Font Awesome: Kompletan vodič knjižnica

Besplatne ikone fonta strašan: što je i što se koristi za. Kako spojiti ikone na web-lokaciju. Prednosti i nedostaci knjižnice.

Font Awesome Icon Set: Krajnji vodič

Font Awesome je skup fontova i ikona na temelju CSS-a i manje. Alat omogućuje brzo povezivanje svih vrsta ikona na web-lokaciji, značajno poboljšavajući njegov dizajn i upotrebljivost. Dovoljno je umetnuti nekoliko redaka koda.

Font Awesome daje vam skalabilne vektorske ikone koje lako možete personalizirati - veličinu, boju, sjene i sve ostalo što se može učiniti s CSS -om.

Font Awesome Library ima ogromnu kolekciju najboljih prijedloga za vas. Projekt poboljšate jedinstvenim ikonama. U stvari, ovo je ogroman skup svih vrsta ikona koje možete koristiti u svoje svrhe.

U Fontawesome, sve ikone su apsolutno i potpuno besplatno. Knjižnica je licencirana pod GNU Općom javnom licencom. To znači da se može slobodno koristiti u komercijalnim projektima i, u načelu, svugdje.

Set je stvorio Dave Gandhi. Uključuje besplatne ikone društvenih medija, ikone za poboljšanje korisničkog sučelja i još mnogo toga.

Obično, fonta strašan fonta skripte se koriste u kombinaciji s bootstrap i bootstrapcdn. Font Awesome je drugi samo na Google fontove u popularnosti.

Kako radi

Glavna značajka je da svi fonta strašan ikone nisu statične slike. Oni su u formatu fonta. Drugim riječima, to su ikone fontove. Na primjer, ikona za pretraživanje ili logotip društvene mreže je isti kao i jednostavni znakovi A, B, C.

Font Awesome ikone su stvorene pomoću skalabilnih vektora. Stoga se mogu povećati na gotovo bilo koju veličinu.

Sve dostupne ikone uključene su u jednu datoteku fonta. Sve što trebate je preuzimanje ove datoteke s službene web-lokacije i povezati ga u stilovima.

Zašto dizajneri biraju font strašan

Fonta strašan ima niz prednosti:

• Brza veza. Vi samo trebate preuzeti posebnu datoteku s službene web stranice i povezati ga navodeći put do njega u CSS kod.
• Fleksibilnost i skalabilnost. Ikone se mogu povećati na bilo koju veličinu. Simboli će biti jasni kao uređaj dopušta. U dobi od osjetljiv dizajn, to je važno. Usput, iz istog razloga, fonta super ikone su prikladne za mrežni prikaz.
• Stilizacija. Ikone se mogu lako mijenjati u boji, veličini, sjeni ili bilo koje druge vanjske parametre. Dizajner dobiva sve prednosti styling redovitog teksta. Također možete rotirati ikone. Na primjer, prikažite naopako ili zakrenite 90 stupnjeva.
• Brzo učitavanje web-lokacije. Sve ikone su uključene u jednu datoteku fonta. Tako je potrebno samo jedan HTTP zahtjev za učitavanje fonta strašan. Ovo je izvrsno za performanse web stranica.
• Ljubav prema preglednicima. Font Awesome je cross-preglednik alat. Ne morate brinuti o kompatibilnosti fontova i ikona preglednika. Oni su dobro podržani svima. Čak i stari IE8.
• Kompatibilan s različitim okvirima. Knjižnica je izrađena prvenstveno za bootstrap. Međutim, dobro će raditi i s drugim okvirima.
• Nekoliko formata. Alat je dostupan u .Eot ,.TTF, .Woff i SVG formata. Tako fonta strašan se rukuje na isti način kao i drugi web fontovi.
• Nije potreban JavaScript. Fonta strašan ne zahtijeva da se javascript pokrene.

Dakle, font strašan je učinkovit i praktičan alat koji značajno štedi vrijeme izgleda i ubrzava vašu web-lokaciju.

Nedostaci fonta strašan

Alat također ima nedostatke. Srećom, ne postoje mnogi od njih.

Prvo, ikone se mogu naslikati samo u jednoj boji. Međutim, ovo ograničenje može se zaobići. Na primjer, međusobno kombiniraju slobodne ikone. Ili pomoću CSS efekata

Drugo, fonta strašna knjižnica sadrži previše ikona i svi su uključeni u jednu datoteku. Ako dizajner ili dizajner izgleda samo treba povezati nekoliko ikona, oni još uvijek moraju potpuno učitati cijelu knjižnicu. A to su stotine tisuća dodatnih ikona koje će zauzeti prostor. Međutim, ovdje postoji rješenje - stvaranje vlastitog montaže, koji će uključivati ​​samo potrebne ikone.

Fonta strašne verzije: 5 i 6

Font Awesome 5 je objavljen 7. prosinca 2017. i izvorno je sadržavao 1278 ikona. Peta verzija dolazi u dva paketa: Besplatno (font strašan besplatno) i plaćeni (font Awesome Pro). Besplatni plan također sadrži ikone iz svih četvrtih verzija. Ikone su dostupne u okviru Licenca otvorenog fonta 1.1, Creative Commons atribucije 4.0 i MIT.

Font Awesome 6 je nova verzija koja je objavljena u drugoj polovici 2020. godine. Uključuje nove ikone i dostupan je samo u plaćenom planu.

Font Awesome 6 Alpha je također na putu u 2021. To je još jedna nova generacija knjižnice ikona. Osim novih ikona, verzija 6 Alpha također dodaje nove stilove, nove usluge i pomoćne alate. Korisnici mogu unaprijed naručiti.

Besplatni i plaćeni planovi: razlike i značajke

Ikone možete preuzeti besplatno ili plaćeni tarifni plan.

Besplatni plan uključuje više od 1600 ikona i 1 set. Komplet je zbirka ikona, stilova i postavki koje vam omogućuje da brzo izvršite promjene bez dodavanja koda.

Plaćena tarifa:

• Uključuje više od 7800 ikona i 20 setova.
• Omogućuje pristup fontovima Awesome Pro. To znači da se ikone mogu koristiti u izvornim mobilnim aplikacijama i na vašem računalu (na primjer, u uređivaču teksta teksta ili prilikom stvaranja prezentacije u PowerPoint).
• Omogućuje vam učitavanje vlastitih ikona. Možete koristiti vlastite ikone uz ili umjesto službenih fontova strašan ikona. Na primjer, to je način na koji možete prenijeti logotip tvrtke. Iste akcije možete obavljati s vlastitim ikonama kao i s osnovnim - promijeniti stil, veličinu, boju itd.

Obje verzije su vječne. To jest, oni su osigurani jednom zauvijek.

Načini povezivanja fonta strašan

Prije svega, morate otići na službenu web-lokaciju i preuzeti knjižnicu. Preuzeta arhiva mora biti raspakirana, a mape CSS i Fontovi kopiraju u mapu vaše web-lokacije.

Nakon toga, put do datoteke knjižnice namijenjen je između oznaka glave. Na primjer:

Kako prikazati fontove strašne ikone na web stranici. Najpopularnije metode:

1. Douzima HTML

Najlakši način.

Morate otići u galeriju na službenoj web stranici (fontawesome.com/icons?d=gallery) i odaberite ikonu koju želite. Svaka ikona ima osobni kod, na primjer:. Dovoljno je kopirati i zalijepiti na pravom mjestu u kodu.

2. Preko CSS

Da biste to učinili, koristite pseudo-elemente nakon ili prije, kao i Unicode tražene ikone. Možete sve to uzeti u istoj galeriji. Primjer takvog koda: f209.

Primjer unosa stila:

DIV :: Nakon {zaslon: blok; Sadržaj: 'F209'; Font-obitelj: 'font strašan 5 free';}

U zaključku: svi fontove ikone

Dakle, font strašan je brz i praktičan način dodavanja besplatnih ikona na Vašu web stranicu. Sve ikone su lako skalabilne i ne usporavaju web-lokaciju.