Dans une leçon précédente,
vous avez appris comment inclure des images dans votre page Web.
Parfois, cependant, les gens ne savent pas vraiment où
trouver des images ou ils ne sont pas de très bons artistes eux-mêmes.
Donc aujourd'hui, je veux parler de l'utilisation de Font Awesome.
Font Awesome est une collection d'icônes que vous pouvez utiliser pour
votre page et elles sont à peu près reconnaissables dans le monde entier.
Ici, je suis à la page Font Awesome.
Je veux vous montrer comment l'utiliser.
La première chose que je vais faire est d'aller à la sélection des icônes.
Comme vous pouvez le voir, il y a des milliers d'icônes différentes que vous pouvez choisir
pour aider à décorer votre page et c'est très simple pour vous d'utiliser.
La première étape est que vous devez dire à votre page web,
hey, je veux utiliser Font Awesome.
Dans la section de démarrage de Font Awesome, ils vous donnent le code.
Laisse-moi te montrer à quoi ça ressemble.
Ici, je suis avec un fichier simple.
La seule chose qui va vous paraître nouvelle, c'est que j'ai deux idées uniques.
Le premier est que j'ai un lien dans la section tête de ma page.
Rappelez-vous, la tête est l'endroit où nous gardons
toutes les informations supplémentaires qui ne sont pas toujours vues par l'utilisateur,
et ce que j'ai fait ici, c'est que j'ai connecté au CDN Font Awesome.
C' est un acronyme très intimidant qui signifie simplement Content Delivery Network.
Vous êtes en train de conclure un accord où, hé,
je vais lier et utiliser vos trucs, mais je vais
utiliser ce lien spécial pour savoir combien de personnes l'utilisent.
Si nous descendons dans la section du corps,
c'est à ce moment que vous allez voir une nouvelle balise,
la balise i, elle représente l'icône.
Tu te souviens de la balise d'image ?
L' une des choses que vous devez avoir si vous allez utiliser la balise image est la source, l'
image que vous voulez utiliser.
Avec Font Awesome, vous devez inclure une balise de
classe, et dans cette balise de classe,
vous allez lui dire quelle image vous voulez utiliser.
Donc dans ce cas,
j'utilise celui qui s'appelle Fa-colère.
Allons de l'avant et voyons à quoi ressemble cette page.
On a fini avec une petite personne en colère qui nous regardait.
En fait, c'est très simple.
Vous obtenez une très petite icône à chaque fois que vous incluez cette balise.
Maintenant, en toute honnêteté,
mon écran est vraiment grand, donc si vous deviez exécuter ce code,
l'icône serait vraiment petite.
Donc, laissez-moi vous montrer quelques-unes des options que vous pouvez faire pour ajuster la taille de votre icône.
Donc, ce que j'ai fait, c'est que j'ai copié cette ligne de
code plusieurs fois et dans chacun d'eux,
j'ai ajouté un attribut supplémentaire et c'est la taille que je veux que l'icône soit.
Donc, ici, j'ai dit faire cette icône extra petite et ensuite j'ai fait moyenne et grande.
Le 2x, 3x, 5x,
10x, etc, qui le rend juste beaucoup plus grand à chaque fois.
Donc maintenant, si je regarde à nouveau la page,
ça va certainement avoir l'air un peu différent.
En fait, c'est beaucoup trop grand pour l'écran alors
laissez-moi le rendre un peu plus petit, et là vous l'avez.
Nous avons les icônes avec différentes tailles. Le
visage en colère n'est clairement pas le seul que vous pouvez faire.
Certains des plus populaires que vous pouvez voir incluent la carte d'adresse.
Donc je vais le copier. Cela commence toujours comme le i tag avec la classe, égal,
vous devez avoir fas pour Font Awesome,
puis au lieu de fâcher,
allons-y et essayons une carte d'adresse.
J' espère que celui-ci vous sera familier.
Je vais mettre un saut de ligne juste pour mélanger les choses un peu là-bas.
Maintenant, quand je rafraîchis la page,
vous pouvez voir une petite carte d'adresse très familière.
Les icônes sont géniales parce qu'elles donnent à votre page ce genre de
look vraiment familier que les gens font penser qu'il semble vraiment professionnel.
Mais il y a des inconvénients à utiliser des icônes si vous n'êtes pas prudent.
Le plus important est qu'ils ne sont pas nécessairement accessibles par défaut.
Donc, si vous deviez activer un lecteur d'écran sur cette page,
il apparaîtrait en fait comme s'il n'y avait aucun contenu du tout.
Ou pire encore, parfois les gens utilisent des icônes pour les liens de médias sociaux.
Laissez-moi vous montrer un exemple de plus avant que nous ayons fini avec Font Awesome.
Donc, ce que j'ai fait ici est au lieu de simplement utiliser ces icônes comme décoration,
je les ai effectivement mis dans mon site
afin que si je voulais dire lien vers mon compte Twitter,
juste ici, j'inclurais l'icône Twitter.
Si je veux me connecter à Pinterest,
je pourrais utiliser cette icône Pinterest juste là,
et LinkedIn, et cela semble vraiment bon. Laisse-moi te montrer.
On y va, j'ai chacun de mes liens.
Juste pour que vous sachiez, la raison pour laquelle ces icônes sont bleues est
, encore une fois, parce que ce sont des liens
, et sur chacun, je pourrais cliquer dessus et ça me conduirait à mon compte.
Voilà le problème.
Cela a l'air génial mais je vais exécuter
une vérification rapide du validateur Wave pour voir si mon code est sémantiquement correct.
Donc, je vais aller à ma version hébergée.
C' est là ? Laisse-moi le trouver.
Donc, je n'utilise pas le code que j'utilisais juste parce que pour valider,
je veux aller de l'avant et le mettre sur le serveur.
Donc, je vais monter et je vais cliquer sur mon outil de validation Wave,
et Wave va passer par et me donner trois erreurs.
Pas seulement trois erreurs,
mais trois erreurs très importantes,
et c'est simplement que,
hey, vous avez trois liens et ils n'ont pas vraiment de texte.
Quelqu' un qui utilise un lecteur d'écran
n'aurait aucune idée d'où ce lien est censé aller.
Il ne sait pas que c'est Twitter, Pinterest ou LinkedIn.
Mais j'ai une solution très simple pour ça.
Je vais utiliser quelque chose appelé une étiquette aria soit dans
mon tag a ou en fait dans la balise icon aussi bien.
Je mets simplement aria-label égal,
et dans ce cas, je vais mettre Twitter.
Sur la prochaine, je peux ajouter aria-label égale Pinterest, etc.
En ajoutant dans ces étiquettes aria,
vous donnez essentiellement aux lecteurs d'écran la possibilité de
dire à quelqu'un où ce lien va aller lire une étiquette,
et c'est énorme en termes d'accessibilité.
J' espère donc que vous vous amusez en utilisant Font Awesome.
Il y a tellement de choses différentes que vous pouvez choisir,
mais si vous allez jouer avec certaines de ces astuces cool,
assurez-vous de les rendre accessibles au plus grand nombre possible de personnes.