Utilizarea fontului Genericons în site-ul dvs.

Cred că fonturile icoane reprezintă una dintre cele mai mari idei create vreodată în epoca de aur a designului web. Unii tipi de la Automattic se simt probabil în același mod, deoarece au decis să vină cu un pictogramă frumos numit Genericons. În acest articol, vom învăța cât de minunate sunt fonturile de pictograme și cum se utilizează fontul Genericons.

Importanța fonturilor de icoane

Așa cum am spus, trăim în epoca de aur a designului web. Noile tehnologii se naște în fiecare zi și browserele le adoptă rapid. În plus față de noile tehnologii, există noi tehnici de design care vin în toată lumea.

În această epocă de aur, designul web receptiv este, fără îndoială, unul dintre cele mai populare concepte. Într-o lume plină de dispozitive diferite care se conectează la Internet, cum ar fi laptop-uri, tablete și smartphone-uri, modelarea modelelor noastre în funcție de dimensiunile dispozitivului și densitățile pixelilor. În calitate de designeri web, a devenit un obicei zilnic de a muta elemente și grafică la scară pentru a face munca noastră de proiectare într-o varietate de dispozitive, de la monitoarele Apple de 27 inci la Kindles.

Aici se găsesc fonturile icoane la îndemână.

Avantajele folosirii fonturilor de icoane

Ca un cadou de la designul web receptiv, fonturile icoane sunt folosite pentru a oferi vizitatorilor un pachet de grafică optimizat și scalabil pe orice dispozitiv. În plus, compatibilitatea lor cu browser-ul încrucișat ne permite să le facem să funcționeze chiar și pe browserele vechi, astfel încât bunicii și oamenii de la DMV se pot bucura de asemenea de icoane clare și noi!

Glumește deoparte, aici sunt principalele avantaje pe care le poți beneficia cu un font de pictograme:

• Fonturile de tip Icon sunt scalabile. Aceasta înseamnă că, indiferent cât de mare este pictograma dvs., nu trebuie să compromiteți calitatea imaginii sau dimensiunea fișierului.
• Fonturile de icoane pot fi îmbunătățite cu linii simple de CSS. Nu trebuie să deschideți editorul de imagine mare pentru a schimba culorile sau pentru a adăuga umbre la ele. Transparenţă? Verifica. Gradienții CSS? Verifica. Rotație 3D? Verifica. Ai idee. Cu câteva linii de cod CSS, poți să faci aproape tot ce poți face cu textul tău. La urma urmei, aceste pictograme sunt bucăți tehnice de text.
• Fonturile de icoane au un suport minunat pentru browser. Din moment ce sunt fonturi și chiar și Internet Explorer 7 acceptă fonturi, nu trebuie să vă faceți griji dacă nu vor apărea pe browserele mai vechi.
• Fonturile de tip Icon sunt mici în dimensiunea fișierului. Acest lucru poate părea un argument controversat (deoarece un pachet de pictograme PNG ar putea fi aproape la fel de mici ca și fonturile de pictograme), dar puteți vedea că formatul WOFF de la Genericons, de exemplu, este de numai 11KB în mărimea fișierului. În plus, trebuie să includeți lucruri de genul my-icon-2x.png dacă aveți nevoie de imagini mai mari. De asemenea, fonturile cu pictograme fac doar o singură cerere HTTP.

Folosind Genericons

Genericons este un font de pictograme destul de mare creat de Automattic, de asemenea fondatorii programului WordPress. Fontul include 121 de icoane de la sfârșitul anului 2013 și crește din când în când. Este, de asemenea, licențiat cu GPL, astfel încât să putem folosi acest pachet dulce de icoane în toate proiectele noastre open source cu licențe compatibile.

Dacă nu utilizați un font de pictograme pe site-ul dvs. WordPress, acum ar putea fi momentul să includeți Genericons!

Inclusiv în Tema ta

Dacă doriți să utilizați acest font în tema dvs., aveți doar câțiva pași simpli pe care să îi urmați:

1. Descărcați Genericons făcând clic pe gigant Descarca butonul de pe site.
2. Încărcați font folder în dosarul rădăcină al temei. Dacă doriți, puteți să redenumiți dosarul și să-l puneți în alt dosar.
3. Copiați conținutul genericons.css fișier în tema ta style.css fişier. (Dacă ați schimbat numele și calea directorului de fonturi, nu uitați să efectuați modificări în CSS pentru a repara calea fișierelor de fonturi.)

Asta e, tema ta este acum 100% compatibilă cu Genericons! Acum puteți utiliza pictogramele din elementele dvs. HTML, cum ar fi:

 Acest link are pictograma tabletei!

Dacă doriți să utilizați o pictogramă ca element separat, trebuie să utilizați Elementul HTML, după cum urmează:

  Acest link are și pictograma tabletei!

 Acest link are pictograma tabletei!  Acest link are și pictograma tabletei!

 [genericon icon = tablet] Acest link are și pictograma tabletei!