Vous connaissez les icônes et les polices de caractères classiques, mais qu'est-ce qu'une police d'icônes ? Cet article expert vous explique leur fonctionnement et vous guide pour les intégrer facilement afin de dynamiser votre site web. Commençons.
Les polices d'icônes sont similaires aux polices de texte standards : elles définissent l'apparence et le style des éléments textuels. La différence clé ? Elles intègrent des symboles et icônes vectoriels plutôt que des lettres ou chiffres. Contrairement aux images raster, elles sont scalables à l'infini sans perte de qualité.
Idéales pour le web design, elles s'adaptent via CSS : redimensionnement, rotation, coloration... Modifiez l'apparence de centaines d'icônes en quelques lignes de code, sans retouches Photoshop ni nouveaux fichiers. Un gain de temps et de performance précieux pour les développeurs expérimentés.
Nous utilisons Font Awesome (version 4.7.0 pour cet exemple), adaptable à d'autres bibliothèques comme Feather Icons ou Heroicons.
Code HTML de base :
La ligne clé charge la CSS de Font Awesome via CDN, intégrant les polices web automatiquement.
Les icônes s'activent via classes CSS sur balises <i> ou <span> (préférez <i> pour la sémantique).
Exemple basique dans <body> :
<i class="fa fa-cog"></i> Ma première icôneRésultat :
Classes : fa (Font Awesome) + fa-cog (icône rouage). Consultez le site Font Awesome pour toutes les icônes disponibles.
Testez : remplacez fa-cog par fa-plane ou fa-user.
Au-delà des bases, exploitez les classes intégrées :
<i class="fa fa-battery-0 fa-lg"></i>
<i class="fa fa-battery-1 fa-2x"></i>
<i class="fa fa-battery-2 fa-3x"></i>
<i class="fa fa-battery-3 fa-4x"></i>
<i class="fa fa-battery-4 fa-5x"></i>
fa-spin pour rotation continue :
<i class="fa fa-refresh fa-spin fa-3x"></i>
fa-rotate-XY (90/180/270°) :
<i class="fa fa-envelope-o fa-3x"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-90"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-180"></i>
<i class="fa fa-envelope-o fa-3x fa-rotate-270"></i>
Empilement avec fa-stack :
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-eyedropper fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-cutlery fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-glass fa-stack-1x"></i>
</span>
Combine ces classes pour des effets infinis.
Traitez-les comme du texte : stylez avec CSS3 pour animations fluides.
HTML :
<i class="fa fa-motorcycle fa-5x velo"></i>CSS :
@keyframes deplacer {
from { margin-left: 0; }
to { margin-left: 400px; }
}
.velo {
animation-name: deplacer;
animation-duration: 4s;
}Exemple avancé : fondu progressif.
HTML :
<i class="fa fa-user-circle personne fa-5x" id="p1"></i>
<i class="fa fa-user-circle personne fa-5x" id="p2"></i>
<i class="fa fa-user-circle personne fa-5x" id="p3"></i>
<i class="fa fa-user-circle personne fa-5x" id="p4"></i>CSS :
@keyframes fondu {
from { opacity: 0; }
to { opacity: 1; }
}
.personne {
opacity: 0;
animation-name: fondu;
}
#p1 { color: red; animation-duration: 2s; }
#p2 { color: orange; animation-duration: 4s; }
#p3 { color: green; animation-duration: 6s; }
#p4 { animation-duration: 8s; }Maîtrisez CSS pour des résultats professionnels. Explorez templates CSS ou tutoriels YouTube pour progresser.
Maintenant, animez votre site avec les polices d'icônes ! Quelle est votre bibliothèque préférée ? Commentez ci-dessous.
[]