In una lezione precedente,
hai imparato come includere immagini nella tua pagina web.
A volte però, le persone non sono davvero sicuri di dove
trovare le immagini o non sono artisti molto bravi.
Quindi oggi, voglio parlare di usare Font Awesome.
Font Awesome è una raccolta di icone che puoi usare per
la tua pagina e sono praticamente riconoscibili in tutto il mondo.
Eccomi alla pagina Font Awesome.
Voglio mostrarti come usarlo.
La prima cosa che ho intenzione di fare è andare alla selezione delle icone.
Come puoi vedere, ci sono migliaia di icone diverse che puoi
scegliere per aiutarti a decorare la tua pagina ed è molto semplice da usare.
Il primo passo è che devi dire alla tua pagina web,
hey, voglio usare Font Awesome.
Nella sezione introduttiva di Font Awesome, ti danno il codice.
Quindi lascia che ti mostri com'e'.
Eccomi qui con un semplice file.
L' unica cosa che ti sembrera' nuova e' che ho due idee uniche.
Il primo è che ho un link nella sezione head della mia pagina.
Ricorda, la testa è dove teniamo
tutte quelle informazioni extra che non sono sempre viste dall'utente,
e quello che ho fatto qui è che mi sono connesso al CDN Font Awesome.
È un acronimo molto intimidatorio che significa solo Content Delivery Network.
Stai praticamente facendo un accordo in cui, hey,
ho intenzione di collegare e usare le tue cose, ma ho intenzione di usare
questo link speciale in modo da sapere quante persone lo stanno usando.
Se viaggiamo verso il basso nella sezione del corpo,
che è quando si sta andando a vedere un nuovo tag,
il tag i, sta per icona.
Ti ricordi il tag immagine?
Una delle cose che dovete avere se avete intenzione di utilizzare il tag immagine è la fonte,
quale immagine è che si desidera utilizzare.
Con Font Awesome, devi includere un tag di
classe e in quel tag di classe,
gli dirai quale immagine vuoi usare.
Quindi, in questo caso,
sto usando quello chiamato fa-arrabbiato.
Andiamo avanti e vediamo come appare questa pagina.
Beh, siamo finiti con una piccola persona arrabbiata che ci fissava.
In realtà è davvero semplice.
Ottieni un'icona molto piccola ogni volta che includi questo tag.
Ora, in tutta onestà,
il mio schermo è saltato in aria davvero grande, quindi se dovessi eseguire questo codice,
l'icona sarebbe davvero piccola.
Quindi, lascia che ti mostri alcune delle opzioni che puoi fare per regolare la dimensione della tua icona.
Quindi quello che ho fatto è che sono entrato e ho copiato quella riga di
codice un paio di volte e in ognuno,
ho aggiunto un attributo extra e questa è la dimensione che voglio che l'icona sia.
Così proprio qui, ho detto di rendere l'icona più piccola e poi ho fatto medie e grandi.
Il 2x, 3x, 5x,
10x, ecc, che lo rende molto più grande ogni volta.
Quindi ora, se guardo di nuovo la pagina,
sarà sicuramente un po 'diverso.
In realtà, è troppo grande per lo schermo quindi
lascia che lo renda un po 'più piccolo, e lì ce l'hai.
Abbiamo le icone con diverse dimensioni.
Chiaramente la faccia arrabbiata non e' l'unica che puoi fare.
Alcuni dei più popolari che potresti vedere includono la scheda indirizzo.
Quindi ho intenzione di copiarlo. Inizia sempre come il tag i con la classe, uguale,
devi avere fas per Font Awesome,
e poi invece di arrabbiato,
andiamo avanti e proviamo una scheda indirizzo.
Si spera che questo ti sembrerà familiare.
Mettero' un'interruzione di riga solo per mescolare un po' le cose li'.
Ora, quando aggiorno la pagina,
puoi vedere un piccolo indirizzo molto familiare.
Le icone sono grandi perché danno alla tua pagina questo tipo di
aspetto davvero familiare che le persone fanno pensare che sembra davvero professionale.
Ma ci sono alcuni aspetti negativi nell'usare le icone se non stai attento.
Il più importante è che non sono necessariamente accessibili per impostazione predefinita.
Quindi, se dovessi trasformare un lettore di schermo su questa pagina,
in realtà apparirebbe come se non ci fosse alcun contenuto.
O peggio ancora, a volte le persone usano icone per i link ai social media.
Quindi lascia che ti mostri un altro esempio prima che abbiamo finito con Font Awesome.
Quindi quello che ho fatto qui è invece di usare solo queste icone come decorazione, in
realtà li ho messi nel mio sito in
modo che se volevo dire link al mio account Twitter,
proprio qui, vorrei includere l'icona di Twitter.
Se voglio connettermi a Pinterest,
potrei usare questa icona di Pinterest proprio lì,
e LinkedIn, e in realtà sembra davvero buono. Lascia che te lo mostri.
Eccoci, ho tutti i miei link.
Solo perché tu sappia, il motivo per cui queste icone sono blu è, di
nuovo, perché sono collegamenti,
e su ognuno di essi, ho potuto fare clic su di esso e mi porterebbe al mio account.
Ecco il problema.
Sembra fantastico, ma eseguirò
un rapido controllo del validatore Wave per vedere se il mio codice è semanticamente corretto.
Quindi andrò alla mia versione ospitata.
È qui? Lascia che lo trovi.
Quindi non sto usando il codice che stavo solo usando perché per convalidare,
voglio andare avanti e metterlo sul server.
Quindi ho intenzione di salire e ho intenzione di fare clic sul mio strumento di convalida Wave,
e onda sta per passare attraverso e mi dà tre errori.
Non solo tre errori,
ma tre errori molto importanti,
e questo è semplicemente che,
hey, hai tre link e in realtà non hanno alcun testo.
Qualcuno che sta usando un lettore di schermo
non avrebbe idea di dove dovrebbe andare questo link.
Non sa che si tratta di Twitter o Pinterest o LinkedIn.
Ma ho una soluzione rapida davvero semplice per questo.
Userò qualcosa chiamato etichetta aria sia nel
mio tag o in realtà anche nel tag icona.
Ho semplicemente messo aria-label uguale,
e in questo caso, ho intenzione di mettere Twitter.
Sul prossimo, posso aggiungere aria-label uguale a Pinterest, ecc
Aggiungendo in queste etichette aria,
si sta fondamentalmente dando screen reader la possibilità di
dire a qualcuno dove questo link sta per andare a leggere un'etichetta,
e questo è enorme in termini di accessibilità.
Quindi spero che ti divertirai con Font Awesome.
Ci sono così tanti diversi tra cui puoi scegliere,
ma se hai intenzione di giocare con alcuni di questi trucchi cool,
assicurati che li stai rendendo accessibili a quante più persone possibile.