Comment insérer des icônes avec Icomoon ?

Si vous n’avez besoin que de quelques icônes, il est dommage de charger une police d’icônes complète comme Font Awesome. Icomoon est un outil permettant de générer une police avec uniquement les icônes dont vous avez besoin.

Générer sa police personnalisée

Rendez-vous sur le site d’Icomoon : https://icomoon.io

Cliquez sur le bouton Icomonn App en haut à droite de la page.

Recherchez les icônes qui vous intéressent en utilisant le champ de recherche et des mots clé en anglais.

Sélectionnez les icônes que vous souhaitez ajouter à votre police.

Cliquez sur Generate Font en bas à droite de la page, puis cliquez sur Download (au même endroit).

Comment intégrer la police dans son site web ?

Décompressez l’archive .zip de la police que vous avez généré.

Placez le contenu de l’archive zip dans un dossier nommé icomoon à l’intérieur de votre dossier racine (celui contenant votre site).

Liez la feuille de style d’Icomoon à votre page web avec la balise link. Adaptez éventuellement le chemin d’accès de l’attribut href.

<link rel="stylesheet" href="icomoon/style.css" >

Comment utiliser les icônes dans son site ?

Ouvrez le fichier demo.html présent votre dossier icomoon pour connaître le nom de l’icône que vous souhaitez insérer. Par exemple icon-bullhorn.

Insérez l’icône en insérant le code correspondant dans votre page web sous la forme <span class="icon-bullhorn"></span>.

Sauf mention contraire*, l'article Comment insérer des icônes avec Icomoon ? et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.