Les icônes

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.

LogicielsLibrairies gratuites
IcoFX
Axialis IconWorkshop
IconXP
IrfanView
DrawPad Graphic Editor
The Noun Project
IcoFinder
IconIcon
Icon GALLERY
Findicons
IconExperience
Freepik
Dribble
Flaticon
Table 1: Liste des logiciels de design d’icônes et quelques librairies d’icônes gratuites

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://developer.mozilla.org/fr/

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/

https://www.zdnet.fr

Saliha Beddek

0
0

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *