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>.

S’abonner
Notification pour
guest

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

0 Commentaires
Le plus ancien
Le plus récent Le plus populaire
Commentaires en ligne
Afficher tous les commentaires