Font Awesome: Ghidul complet al bibliotecii

Icoane gratuite Font Awesome: Ce este și la ce este folosit. Cum să conectați pictogramele pe site. Avantajele și dezavantajele bibliotecii.

Font Awesome Icon Set: Ghidul Ultimate

Font Awesome este un set de fonturi și icoane bazate pe CSS și mai puțin. Instrumentul vă permite să conectați rapid toate tipurile de icoane pe site, îmbunătățind semnificativ proiectarea și utilitatea acestuia. Este suficient să introduceți câteva linii de cod.

Font Awesome vă oferă pictograme vectoriale scalabile pe care le puteți personaliza cu ușurință - dimensiunea, culoarea, umbrele și orice altceva care se poate face cu CSS.

Font Awesome Library are o colecție uriașă de cele mai bune sugestii pentru tine. Vă îmbunătățiți proiectul cu pictograme unice. De fapt, acesta este un set uriaș de tot felul de pictograme pe care le puteți utiliza pentru propriile scopuri.

În Fontawesome, toate icoanele sunt absolut și complet gratuite. Biblioteca este licențiată sub licența publică generală GNU. Aceasta înseamnă că poate fi utilizată în mod liber în proiectele comerciale și, în principiu, peste tot.

Setul a fost creat de Dave Gandhi. Acesta include icoane sociale gratuite, icoane pentru a îmbunătăți interfața cu utilizatorul și multe altele.

În mod tipic, scripturile de fonturi minunate sunt folosite împreună cu Bootstrap și BootstrapCdn. Font Awesome este al doilea numai la fonturile Google în popularitate.

Cum functioneaza

Caracteristica principală este că toate icoanele minunate de fonturi nu sunt imagini statice. Ele sunt în format de font. Cu alte cuvinte, acestea sunt fonturi de pictograme. De exemplu, o pictogramă de căutare sau o siglă de rețea socială este aceeași cu caracterele simple A, B, C.

Font icoane minunate sunt create folosind vectori scalabili. Prin urmare, ele pot fi crescute la aproape orice dimensiune.

Toate pictogramele disponibile sunt incluse într-un fișier de fonturi. Tot ce aveți nevoie este să descărcați acest fișier de pe site-ul oficial și să îl conectați în stiluri.

De ce designerii aleg Font Awesome

Font Awesome are o serie de avantaje:

• Conexiune rapidă. Trebuie doar să descărcați un fișier special de pe site-ul oficial și să îl conectați prin specificarea calea către acesta în codul CSS.
• Flexibilitate și scalabilitate. Pictogramele pot fi mărite la orice dimensiune. Simbolurile vor fi la fel de clare pe măsură ce dispozitivul permite. În epoca designului receptiv, acest lucru este important. Apropo, din același motiv, pictogramele minunate din font sunt potrivite pentru afișajele retina.
• Stilizare. Icoanele pot fi ușor schimbate în culoare, dimensiune, umbră sau orice alți parametri externi. Designerul primește toate beneficiile textului regulat de styling. De asemenea, puteți roti pictogramele. De exemplu, afișați cu susul în jos sau rotiți 90 de grade.
• Încărcarea rapidă a site-ului. Toate pictogramele sunt incluse într-un fișier de font. Deci, este nevoie doar de o solicitare HTTP pentru a încărca fontul minunat. Acest lucru este minunat pentru performanța site-ului web.
• Dragostea browserelor. Font Awesome este un instrument încrucișat. Nu trebuie să vă faceți griji cu privire la compatibilitatea browserului cu fonturile și icoanele. Ele sunt bine susținute de toți. Chiar vechi IE8.
• Compatibile cu diferite cadre. Biblioteca a fost creată în primul rând pentru bootstrap. Cu toate acestea, va funcționa bine și cu alte cadre.
• Mai multe formate. Instrumentul este disponibil în formatele .eot, .tf, .woff și svg. Deci, Font Awesome este tratat în același mod ca și alte fonturi web.
• Nu este nevoie de JavaScript. Font Awesome nu necesită JavaScript pentru a rula.

Astfel, Font Awesome este un instrument eficient și convenabil care economisește în mod semnificativ timpul de aspect și accelerează site-ul dvs. Web.

Dezavantaje ale fontului Awesome

Instrumentul are, de asemenea, dezavantaje. Din fericire, nu sunt multe dintre ele.

În primul rând, pictogramele pot fi pictate numai într-o singură culoare. Cu toate acestea, această limitare poate fi eludată. De exemplu, combinarea icoanelor libere unul cu celălalt. Sau folosind efecte CSS

În al doilea rând, biblioteca minunată a fontului conține prea multe icoane și toate sunt incluse într-un singur fișier. Dacă un designer sau un designer de layout trebuie doar să conecteze câteva icoane, ele trebuie încă să încarce complet întreaga bibliotecă. Și acestea sunt sute de mii de icoane suplimentare care vor ocupa spațiu. Cu toate acestea, aici există o soluție aici - creând propria dvs. adunare, care va include numai pictogramele necesare.

Font Awesome Versiuni: 5 și 6

Font Awesome 5 a fost lansat pe 7 decembrie 2017 și conținea inițial 1278 icoane. Cea de-a cincea versiune vine în două pachete: GRATUIT (Font Awesome gratuit) și plătit (Font Awesome Pro). Planul liber conține, de asemenea, pictograme din toate versiunile a patra. Pictogramele sunt disponibile sub licența SIL Open Font 1.1, Creative Commons Attribution 4.0, și MIT.

Font Awesome 6 este o nouă versiune care a fost lansată în a doua jumătate a anului 2020. Include noi pictograme și este disponibilă numai într-un plan plătit.

Font Awesome 6 Alpha este, de asemenea, pe drumul în 2021. Aceasta este o altă nouă generație de bibliotecă de pictograme. În plus față de noile icoane, versiunea 6 Alpha adaugă, de asemenea, noi stiluri, servicii noi și instrumente de asistență. Utilizatorii pot pre-comanda.

Planuri gratuite și plătite: diferențe și caracteristici

Puteți descărca pictograme pentru un plan tarifar gratuit sau plătit.

Planul liber include peste 1600 de pictograme și 1 set. Un kit este o colecție de pictograme, stiluri și setări care vă permite să efectuați rapid modificări fără a adăuga codul.

Tariful plătit:

• Include peste 7800 de pictograme și 20 de seturi.
• Oferă acces la Font Awesome Pro. Aceasta înseamnă că pictogramele pot fi utilizate în aplicațiile mobile native și pe computerul dvs. (de exemplu, într-un editor de text Word sau la crearea unei prezentări în PowerPoint).
• Vă permite să încărcați propriile pictograme. Puteți folosi icoanele proprii alături sau în locul icoanelor oficiale de font. De exemplu, acesta este modul în care puteți încărca o siglă a companiei. Puteți efectua aceleași acțiuni cu propriile icoane ca și cu cele de bază - schimbați stilul, dimensiunea, culoarea etc.

Ambele versiuni sunt perpetue. Adică, li se oferă o dată pentru totdeauna.

Modalități de conectare a fontului Awesome

În primul rând, trebuie să mergeți la site-ul oficial și să descărcați biblioteca. Arhiva descărcată trebuie să fie despachetată, iar folderele CSS și Fonts copiate în dosarul site-ului dvs.

După aceea, calea către fișierul de bibliotecă este specificată între etichetele capului. De exemplu:

Cum se afișează pictogramele minunate de font pe un site web. Cele mai populare metode:

1.Und HTML.

Cel mai simplu mod.

Trebuie să mergeți la galeria de pe site-ul oficial (Fontawesome.com/icons?d=Gallery) și alegeți pictograma care vă place. Fiecare pictogramă are un cod personal, de exemplu:. Este suficient să copiați și să-l lipiți în locul potrivit în cod.

2. Prin CSS.

Pentru a face acest lucru, utilizați elementele pseudo-elemente după sau înainte, precum și Unicode a pictogramei necesare. Puteți să o luați în aceeași galerie. Un exemplu de astfel de cod: F209.

Un exemplu de intrare a fișierului de stil:

DIV :: după {Afișaj: bloc; Conținut: "F209"; Font-Family: "Font Awesome 5 Free ';}

În concluzie: toate icoanele de fonturi minunate

Astfel, Font Awesome este o modalitate rapidă și convenabilă de a adăuga icoane gratuite pe site-ul dvs. web. Toate pictogramele sunt ușor scalabile și nu încetinesc site-ul.