Î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.