Într-o lecție anterioara ați învățat cum să includeți imagini în pagina dvs. web. Uneori, însă, oamenii nu sunt foarte siguri unde pot găsi imagini sau nu sunt ei înșiși artiști foarte buni. Așadar, astăzi vreau să vorbesc despre utilizarea Font Awesome. Font Awesome este o colecție de pictograme recunoscute la nivel mondial pe care le puteți folosi pentru pagina dvs. Iată-mă la pagina Font Awesome. Vreau să vă arăt cum să îl utilizați. Primul lucru pe care îl voi face este să merg la selecția pictogramelor. După cum puteți vedea, există mii de pictograme diferite pe care le puteți alege pentru a vă decora pagina si sunt foarte simplu de folosit. Primul pas este sa informați pagina dvs. web ca doriți sa folosiți Font Awesome. In secțiunea de introducere a Font Awesome, vi se oferă codul. Asa ca permiteți-mi să vă fac o demonstrație. Am deschis aici un fișier simplu. Singurul lucru care va arăta nou pentru dvs. este că am două idei unice. Prima este ca am un link in secțiunea Head a paginii. Rețineți, secțiunea Head a paginii găzduiește toate informațiile suplimentare pe care browserul nu le afișează întotdeauna. Aici m-am conectat la CDN-ul Font Awesome. CDN este un acronim care înseamna doar rețeaua de livrare a conținutului. Practic faceți un acord de legătura cu Font Awesome si veți accesa conținutul prin accesarea acestui link special astfel încât să știți câți oameni îl folosesc. Daca derulăm pana la secțiunea Body vom vedea un nou tag si anume eticheta I, care este folosita pentru pictograme. Vă amintiți eticheta de imagine? Unul dintre lucrurile pe care trebuie să le aveți dacă utilizați eticheta de imagine, este sursa care definește imaginea pe care doriți sa o folosiți. Cu Font Awesome trebuie să includeți o etichetă de clasă, si in acea clasă veți defini imaginea dorită. Așadar, în acest caz, o folosesc pe cea numita fa-angry. Să mergem mai departe si să vedem cum arată pagina. Ei bine, ne-am ales cu o persoană furioasă care se uita la noi. De fapt este foarte simplu. Veți primi o pictogramă de fiecare dată când includeți această etichetă. Acum, cu toată sinceritatea, ecranul meu este foarte mare deci, daca ați rula acest cod pictograma ar fi foarte mica. Așadar, permiteți-mi să vă arăt câteva dintre opțiunile prin care puteți ajusta dimensiunea pictogramei. Am copiat acea linie de cod de câteva ori si de fiecare dată am adăugat un atribut suplimentar, si-anume atributul de dimensiune a pictogramei. Chiar aici, am definit o pictogramă foarte mica, medie si mare. 2x, 3x, 5x, 10x este procentul de scalare si este ceea ce o face mai mare. Acum dacă ne uitam din nou la pagină cu siguranță va arăta puțin diferit. De fapt este mult prea mare pentru ecran deci permiteți-mi sa-l fac puțin mai mic. Avem pictograme de dimensiuni diferite. Fața furioasă nu este singura pictogramă pe care o putem folosi. Unele dintre cele mai populare pe care le-ați putea vedea includ cartea de adresă. Așa că o voi copia. Începe întotdeauna cu eticheta I, clasa egală cu fas care vine de la Font Awesome, si în loc sa folosim fața furioasă vom încerca o carte de adresă. Sperăm că acesta vă va fi familiar. Voi pune o pauză de linie doar pentru a amesteca puțin lucrurile acolo. Acum, când reîmprospătez pagina, puteți vedea un mic card de adresă foarte familiar. Pictogramele sunt grozave, deoarece oferă paginii tale un fel de aspect foarte familiar, care lasă impresia ca este un site profesional. Dar, daca nu sunteți atent există unele dezavantaje ale utilizării pictogramelor. Cel mai important este că nu sunt neapărat accesibile în mod implicit. Deci, dacă ați activa un cititor de ecran pe această pagină, ar părea de fapt ca și cum nu ar exista conținut. Sau chiar mai rău, uneori oamenii folosesc pictograme pentru link-uri de socializare. Așadar, permiteți-mi să vă arăt încă un exemplu înainte să terminăm cu Font Awesome. Deci, ceea ce am făcut aici este în loc să folosesc aceste pictograme ca decor, le-am introdus pe site-ul meu astfel încât, dacă aș vrea să pun link către contul meu de Twitter, chiar aici, aș include pictograma Twitter. Dacă vreau să mă conectez la Pinterest, aș putea folosi pictograma Pinterest, la fel si pentru LinkedIn. Dați-mi voie să vă arăt. Avem aici fiecare dintre link-urile mele. Pentru a ști, motivul pentru care aceste icoane sunt albastre este, pentru că sunt link-uri, și pe fiecare aș putea da clic și m-ar duce la contul meu. Dar avem o problemă. Arată grozav, dar voi rula o verificare rapidă a validatorului Wave pentru a vedea dacă codul meu este corect din punct de vedere semantic. Deci, voi merge la versiunea mea găzduită. Este aici? Dați-mi voie să o găsesc. Deci nu folosesc codul pe care îl foloseam, pentru că pentru a valida, trebuie să-l pun pe server. Deci, voi merge în sus și voi face clic pe instrumentul meu de validare Wave, iar Wave va verifica și îmi va returna trei erori. Nu orice erori, dar trei erori foarte importante care vă comunică faptul că aveți trei linkuri dar sunt fără text. În aceasta situație cineva care folosește un cititor de ecran nu ar avea habar unde ar trebui să ducă acest link. Nu știe că acesta este Twitter sau Pinterest sau LinkedIn. Dar am o soluție rapidă și foarte simplă pentru asta. Am de gând să folosesc ceva numit etichetă aria, fie în eticheta de link A sau în eticheta de pictogramă I. Pur și simplu pun aria-label este egal cu în cazul nostru, Twitter. Pe următorul, pot adăuga aria-label egal Pinterest, etc. Prin adăugarea aria în aceste etichete, practic le oferiți cititorilor de ecran posibilitatea de a spune cuiva unde va merge acest link pentru a citi o etichetă, iar acest lucru este imens în ceea ce privește accesibilitatea. Așadar, sper să vă distrați folosind Font Awesome. Există atât de multe dintre care puteți alege dar dacă vreți să vă jucați cu câteva dintre aceste trucuri grozave, asigurați-vă că le faceți accesibile pentru cât mai mulți oameni posibil.