Dezvoltatorii web sunt foarte obișnuiți să folosească pictograme pentru a reprezenta o anumită acțiune sau pictograma poate reprezenta grafic orice comandă sau acțiune sau un indicator de pe o pagină web. Pictogramele sunt utilizate în documente, precum și în aplicații și pot fi selectabile sau neselectabile.
De exemplu, imaginile pe care le vedem pe butoanele unei aplicații sunt toate pictograme și aceste butoane pot fi selectate.
Pentru a facilita proiectarea și programarea site-urilor web, au fost dezvoltate câteva biblioteci de pictograme de fonturi, adică icoane care pot fi inserate ca și cum ar fi text și sunt disponibile pentru a fi utilizate în paginile HTML ale unui site web, economisind multă muncă pentru utilizatori, designeri și programatori.
În acest tutorial ne vom uita la câteva biblioteci precum Font Awesome, Bootstrap Glyphicons și Material Design Google, care sunt biblioteci cu fonturi de pictograme prestabilite, utilizate adesea de dezvoltatorii web.
Instrumente și bibliotecă minunate pentru fonturi
Font Awesome este o bibliotecă de fonturi care redă pictograme folosind un set de instrumente bazate pe CSS. Acest instrument este dezvoltat pentru a fi utilizat cu Twitter Bootstrap, dar poate fi utilizat individual ca foi de stil pe orice site web.
Avantajul de a fi o bibliotecă CSS este că funcționează pe orice browser și dispozitiv și chiar se adaptează la orice rezoluție a ecranului.
Puteți descărca biblioteca de pe site-ul Font Awesome. O altă opțiune este de a utiliza link-ul direct către bibliotecă:
Să vedem un exemplu de cum să implementați pictograme pentru rețelele sociale cu Font Awesome, creăm un fișier html și adăugăm următorul cod:
Font Awesome - Icoane de socializare
Fiecare pictogramă este reprezentată de o pictogramă fa de clasă, astfel încât, de exemplu, pictograma pentru YouTube va fi fa-youtube, rezultatul la afișarea în browser va fi următorul:
Apoi putem adăuga propriile noastre clase CSS sau o putem modifica pe cea predefinită pentru a ne adapta la designul nostru, de exemplu între etichetele de cap adăugăm următorul cod CSS.
Decorarea icoanelor prin CSS
Apoi executăm în browser și rezultatul va fi următorul:
Putem vedea că am aplicat CSS la fiecare pictogramă și nu am adăugat nicio imagine. O altă opțiune pentru îmbunătățirea vizibilității este schimbarea cursa de zbor, adică, atunci când mouse-ul planează deasupra unei pictograme, schimbați culoarea literei.
Pentru a face acest lucru, schimbăm culoarea în următoarea linie:
.social-icons .fa: hover {culoare: verde; } Rezultatul când plasați cursorul peste o pictogramă va fi următorul:
O putem face și cu fundalul fiecărei pictograme, schimbând proprietatea fundalului pentru o culoare care ne place.
Toate pictogramele disponibile pot fi văzute pe site-ul Font Awesome, pictogramele sunt organizate pe categorii.
Utilizarea acestui tip de font de pictograme pentru design-urile noastre web ne permite să grăbim încărcarea paginii, deoarece nu avem nevoie de imagini și oferim o calitate superioară (în special pe dispozitivele mobile atunci când faceți zoom)
Glyphicons Bootstrap Tools and Library
Glyphicons Bootstrap este o bibliotecă de pictograme de fonturi. Oferă o mare varietate de pictograme în format de font. Aceste pictograme sunt gratuite și puteți extinde biblioteca cu pictograme plătite. Pictogramele gratuite pot fi utilizate în proiecte bazate pe design web fără a fi nevoie să le cumpărați. Această bibliotecă este orientată către pictograme pentru butoane care îndeplinesc anumite funcții precum imprimare, căutare, salvare etc.
Această bibliotecă este inclusă ca foi de stil în Bootstrap, pentru ao folosi putem descărca Bootstrap de pe pagina sa oficială sau folosim următorul link:
De asemenea, putem vedea pictogramele pe categorii pe pagina Glyphicons.
În continuare, să vedem un exemplu în care utilizăm această bibliotecă pentru pictograme pentru butoane și elemente de introducere a datelor pentru un formular:
Glyphicon Bootstrap - ButoaneAm testat pe un dispozitiv mobil așa cum ar arăta:Glyphicon Bootstrap - Butoane
Căutare Tipărire Login Cumpără
Aplicăm pictograma listă unei selecții
Mașini Motociclete
Avantajele utilizării pictogramelor fontului sau a pictogramelor fontului este că salvează necesitatea de a invoca o imagine sau o pictogramă, deoarece imaginile sunt în format svg în fișierul css al bibliotecii și aceste imagini sunt scalabile.
O bibliotecă completă poate fi între 10Kb și 40Kb, ceea ce crește viteza de încărcare a site-ului web.
Pictogramele sunt text, prin urmare le putem manipula cu CSS și va răspunde la orice eveniment pe care îl programăm cu Jquery.
Dacă în proprietatea Font CSS indicăm o dimensiune a fontului în em de exemplu, font-size: 4em pictograma va fi receptivă și se va adapta la orice dispozitiv. Ele pot fi, de asemenea, utilizate pentru a programa aplicații receptive cu cadre așa cum se vede în tutorial, programarea aplicațiilor mobile cu Ionic Framework, aceste icoane sunt, de asemenea, utilizate.
V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
