0$ C'est gratuit

Tuto Gratuit : Intégrer des icônes avec Font Awesome avec CSS

0$ C'est gratuit

  • Une formation vidéo de 21m07s
  • Téléchargement immédiat et visionnage illimité
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans ce tuto vidéo gratuit, je vous propose de découvrir la librairie de font icônes Font Awesome, qui, avec ses 600 icônes, est probablement la plus populaire et la plus utilisée des librairies d'icônes.
Utiliser des font icônes plutôt que des images au format .jpg ou .png, c'est la garantie d'avoir :

  • un meilleur rendu visuel.
  • plus de flexibilité.
  • une plus grande performance.

Dans ce tuto gratuit Font Awesome, nous verrons :

  • comment télécharger et intégrer Font Awesome à son projet.
  • comment fonctionne Font Awesome et son système de classes CSS.
  • comment créer des boutons de réseaux sociaux, avec un changement de style au hover.
  • comment rendre vos icônes accessible à tous.
  • comment installer la police Font Awesome pour s'en servir sur des logiciels comme Photoshop ou Illustrator.

À la fin de ce tutoriel, vous saurez intégrer des font icônes avec Font Awesome, mais aussi avec d'autres librairies.

Table des matières de cette formation CSS (durée : 21m07s)

    • Télécharger et intégrer Font Awesome à son projet 00:03:53
    • Intégrer ses premières icônes 00:06:21
    • Créer des boutons de réseaux sociaux 00:06:56
    • Accessibilité 00:02:20
    • Utiliser Font Awesome dans Photoshop et Illustrator 00:01:37



Formateur : Sébastien Imbert

Sébastien Imbert a publié 10 tutoriels et obtenu une note moyenne de 4,9/5 sur 683 tutoriels vendus. Voir les autres formations de Sébastien Imbert

4,7
note moyenne

3
avis laissés
5 étoiles
2
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de maxidevis laissé le 15/06/2017
    Comme d'habitude, les tutos de ce formateur sont très claires et très intéressants.

  • 5
    avis de robodesign laissé le 16/03/2017
    Encore et toujours très bien expliqué par Sébastien. Ce n'est pas le premier tuto que j'achète venant de ce formateur et je ne suis pas déçu !
    "Merci encore une fois pour ton avis (et ton soutien) !"

  • 4
    avis de cetteame laissé le 26/10/2016
    Si on excepte le chapitre sur l'accessibilité (la balise span.sr-only est soit redondante avec l'attribut title de la balise <a> et donc inutile, soit mal placée à l'extérieur de cette balise <a> si on supprime son attribut title), le tuto est intéressant et de bonne qualité. Un chapitre sur l'optimisation du poids de la police serait un plus intéressant : http://www.alsacreations.com/astuce/lire/1661-accelerez-vos-polices-d-icones.html
    "Hello, merci pour votre avis ! Je suis d'accord avec vous concernant la span.sr-only qui peut faire doublon avec l'attribut title. J'aimerai rajouter que, par défaut, la plupart des lecteurs d'écrans ne lisent l'attribut title des liens que lorsqu'il n'y a pas de contenu texte à l'intérieur. Donc la span.sr-only a quand même son utilité car elle sera lue par les lecteurs d'écrans. En ce qui concerne IcoMoon, un tuto est prévu ;)"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1574 tuto gratuits


non, je ne veux pas me former gratuitement