Font Awesome: Kompletni vodič za biblioteku

Free Icons Font Awesome: za šta je i za šta se koristi. Kako povezati ikone na web mjesto. Prednosti i nedostaci biblioteke.

Font Awesome Set icon: Kraljni vodič

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

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

Font Awesome biblioteka ima ogromnu kolekciju najboljih prijedloga za vas. Poboljšavate svoj projekat jedinstvenim ikonama. U stvari, ovo je ogroman skup svih vrsta ikona koje možete koristiti u vlastite svrhe.

U Fontawesomeu su sve ikone apsolutno i potpuno besplatno. Biblioteka je licencirana pod GNU opća javna licenca. To znači da se može slobodno koristiti u komercijalnim projektima i, u principu, svugdje.

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

Obično se font fenomenalne skripte fonta koriste zajedno sa Bootstrap i BootstraPCDN. Font Awesome je drugi samo za Google fontove u popularnosti.

Kako radi

Glavna karakteristika je da sve fantastične ikone nisu statične slike. Oni su u formatu fonta. Drugim riječima, ovo su ikona fontovi. Na primjer, ikona za pretraživanje ili logo na društvenim mrežama isti je kao jednostavni znakovi A, B, C.

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

Sve dostupne ikone su uključene u jednu datoteku fonta. Sve što trebate je preuzeti ovu datoteku sa službene stranice i povezati je u stilove.

Zašto dizajneri biraju fent fenomenalno

Font Awesome ima niz prednosti:

• Brza veza. Samo trebate preuzeti posebnu datoteku sa službene web stranice i povezati ga navođenjem staze do njega u CSS kodu.
• Fleksibilnost i skalabilnost. Ikone se mogu povećati u bilo koju veličinu. Simboli će biti jasniji kao što uređaj omogućava. U doba Odgovorni dizajn, ovo je važno. Usput, iz istog razloga, fantastične ikone su pogodne za ekrane mrežnice.
• Stilitizacija. Ikone se mogu lako mijenjati u boji, veličini, sjeni ili bilo kojim drugim vanjskim parametrima. Dizajner dobiva sve prednosti stalnog teksta. Možete istručiti i ikone. Na primjer, prikažite naopako ili zakrenite za 90 stepeni.
• Brzo utovar stranice. Sve su ikone uključene u jednu datoteku fonta. Dakle, potrebno je samo jedan http zahtjev za učitavanje fonta fenomena. Ovo je odlično za performanse web stranica.
• Ljubav preglednika. Font Awesome je alat za preglednike. Ne morate brinuti o kompatibilnosti fontova i ikona pretraživača. Sve su im dobro podržane. Čak i star IE8.
• Kompatibilan sa različitim okvirima. Biblioteka je stvorena prvenstveno za Bootstrap. Međutim, dobro će raditi i sa drugim okvirima.
• Nekoliko formata. Alat je dostupan u .eot ,.ttf, .woff i SVG formatu. Tako se font strašan obrađuje na isti način kao i drugi web fontovi.
• Nije potreban JavaScript. Font Awesome ne zahtijeva da JavaScript radi.

Dakle, FONT AWESOME je efikasan i praktičan alat koji značajno sprema vrijeme izgleda i ubrzava vašu web stranicu.

Nedostaci fonta super

Alat takođe ima nedostatke. Srećom, nema ih mnogo.

Prvo, ikone se mogu slikati samo u jednoj boji. Međutim, ovo ograničenje može se zaobići. Na primjer, kombiniranje slobodnih ikona jedni s drugima. Ili pomoću CSS efekata

Drugo, fenomena biblioteka fonta sadrži previše ikona i sve su uključene u jednu datoteku. Ako dizajner ili dizajner izgleda samo treba povezati nekoliko ikona, još uvijek moraju u potpunosti učitati cijelu biblioteku. I to su stotine hiljada dodatnih ikona koje će zauzeti prostor. Međutim, ovdje postoji rješenje - stvaranje vlastite skupštine, što će uključivati ​​samo potrebne ikone.

Font Awesome verzije: 5 i 6

Font Awesome 5 objavljen je 7. decembra 2017. i prvobitno sadržavao 1278 ikona. Peta verzija dolazi u dva paketa: besplatan (fontovi fenomenalni besplatni) i plaćeni (Font Awesome Pro). Slobodni plan sadrži i ikone iz svih četvrte verzije. Ikone su dostupne pod Sil Open Font licencom 1.1, Creative Commons Attribution 4.0 i mit.

Font Awesome 6 je nova verzija koja je puštena u drugoj polovini 2020. Uključuje nove ikone i dostupna je samo u plaćenom planu.

Font Awesome 6 Alpha je takođe na putu 2021. Ovo je još jedna nova generacija biblioteke ikona. Pored novih ikona, verzija 6 Alpha dodaje i nove stilove, nove usluge i pomoćne alate. Korisnici mogu predbilježiti.

Besplatni i plaćeni planovi: razlike i karakteristike

Možete preuzeti ikone za besplatan ili plaćeni tarifni plan.

Slobodni plan uključuje preko 1600 ikona i 1 set. Komplet je zbirka ikona, stilova i postavki koje vam omogućavaju da brzo napravite promjene bez dodavanja koda.

Plaćena tarifa:

• Uključuje preko 7800 ikona i 20 setova.
• Omogućuje pristup fontu 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 Word ili prilikom kreiranja prezentacije u PowerPoint-u).
• Omogućuje vam da prenesete vlastite ikone. Možete koristiti vlastite ikone pored ili umesto zvaničnih fantastičnih ikona. Na primjer, tako možete prenijeti logotip kompanije. Možete izvesti iste akcije sa vlastitim ikonama kao i kod osnovnih - promijenite stil, veličinu, boju itd.

Obje verzije su vječne. To jest, oni se pružaju jednom zauvijek.

Načini povezivanja fonta super

Prije svega, morate otići na službenu web stranicu i preuzeti biblioteku. Preuzeta arhiva mora biti raspakirana i mape CSS i Fontovi kopirane u mapu vaše web lokacije.

Nakon toga, put do datoteke biblioteke naveden je između oznaka za glavu. Na primjer:

Kako prikazati font fenomenalne ikone na web mjestu. Najpopularnije metode:

1.USing HTML

Najlakši način.

Morate ići u galeriju na službenoj web stranici (Fontawesome.com/igons?d=galery) i odaberite ikonu koja vam se sviđa. Svaka ikona ima lični kod, na primjer :. Dovoljno je kopirati i zalijepiti na pravo mjesto u kodu.

2. Preko CSS-a

Da biste to učinili, koristite pseudo-elemente nakon ili prije, kao i unicode potrebne ikone. Možete ga sve uzeti u istoj galeriji. Primjer takvog koda: F209.

Primjer unosa datoteke u stilu:

div :: poslije {ekranu: blok; Sadržaj: 'F209'; porodica fonta: 'font fenomenalni 5 besplatno';}

Zaključno: Sve fantastične ikone

Tako je font fenomenalan brzi i pogodan način dodavanja besplatnih ikona na svoju web stranicu. Sve su ikone lako skalabilne i ne usporavaju stranicu.