Les icônes
1- Introduction
Les usages des icônes sont multiples, elles peuvent être utilisées pour diriger vers des rubriques de votre site, pour agrémenter les titres ou les articles, pour créer des infographies…etc.
On peut différencier plusieurs types d’icônes :
l’icône contour, l’icône remplie, l’icône de glyphe, l’icône à plat (ou flat design icon), l’icône dessinée à la main, l’icône skeuomorphique, qui vise à reproduire le plus fidèlement possible la réalité et le favicon qui est une utilisation d’une icône pour représenter un site web, un CD ou un DVD.
Figure 1: Différents types d’icônes
2-Comment créer une icône
Il existe plusieurs logiciels destinés à créer des icônes. Une multitude de banques d’icônes gratuites sont disponibles dans le web. Le tableau ci-dessous donne la liste de quelques logiciels et librairies.
| Logiciels | Librairies gratuites |
| IcoFX Axialis IconWorkshop IconXP IrfanView DrawPad Graphic Editor | The Noun Project IcoFinder IconIcon Icon GALLERY Findicons IconExperience Freepik Dribble Flaticon |
4- Comment importer une icône dans un html?
Il existe plusieurs manière de référencer une icône dans le code HTML. Souvent, les plus utilisées, sont les balises <i> ou <span>. Les icônes peuvent être aussi utilisées sur des boutons avec la balise <button>.
Exemple:
Comment rajouter une icone « Paramètres » (Extrait du blog https://blog.lesieur.name/)
Exemple d’une icône sur un bouton
Un autre exemple avec l’icône coeur « ❤ »
HTML:
<span class= »icone-coeur » ></span>
ou <i class= »icone-coeur »></i>
ou <button class= »icone-coeur »> J’aime </button> (Si on veut l’insérer sur un bouton .
CSS:
.icone-coeur ::after,
icone-coeur::before{
background-image: url(/images/icones/icone-coeur.png);
}
Il est possible d’utiliser l’élément « ::before » et la propriété « content »pour rajouter une icône.
Exemple: Rajouter une icone avant un lien
a::before{content: »❤ »}
Pour rajouter un favicon, qui le site dans l’onglet, on utilise l’élément <link>.
<link rel= »icon » href= »favicon.ico »/>
Sources:
https://swello.com/fr/blog/10-sites-icones/
https://fr.wikipedia.org/wiki/Ic%C3%B4ne_(informatique)
https://cours-informatique-gratuit.fr/cours/les-icones/
