ICOMOON, L'OUTIL POUR CRÉER DES POLICES D'ICÔNES À PARTIR DE SVG

24/04/2019
Par Pablo Ordas

Dans un souci de personnalisation des sites internet que nous développons, nous avons été amenés à chercher un outil permettant de créer des polices d’icônes à partir d’éléments SVG. Nous avons alors trouvé “IcoMoon”, un outil gratuit, en ligne, qui permet de créer ses propres polices d’icônes.

Qu’est-ce qu’une police d’icônes ?

Une police d’icônes (icon font en anglais) est une police de caractères au même titre qu’Arial ou Times New Roman, sauf que les lettres sont des icônes. 

Les plus connues d’entre elles s’appellent FontAwesome, Captain Icon ou Typicons. Certaines sont gratuites, d’autres payantes.

Font Awesome, un exemple de police d'icônes

Font Awesome, un exemple de police d'icônes

Pourquoi utiliser des polices d’icônes ?

Lorsque vous souhaitez ajouter des pictogrammes sur votre site internet, plusieurs solutions s’offrent à vous. Vous pouvez ajouter directement une image PNG pour la placer où vous voulez. Cependant, nous vous conseillons l’utilisation d’icon font. 

Tout d’abord, les icon fonts présentent un temps de chargement bien plus rapide, à l’affichage, que les images. Ensuite, les icon fonts se comportement comme une police de caractères. Vous aurez la possibilité de lui donner une taille avec l’attribut CSS “font-size” ou une couleur (attribut css “color”). Un même pictogramme pourra donc avoir différents affichages selon les propriétés CSS qui lui ont été attribuées là où il faudrait plusieurs images png pour simuler le même comportement.

IcoMoon, pour créer ses propres polices d’icônes !

Si les nombreuses polices d’icônes présentent sur internet offrent un large panel de choix, il peut arriver que votre client vous demande de mettre en place de pictogrammes personnalisés. C’est là qu’IcoMoon est intéressant.

Tout d’abord, demandez à votre graphiste préféré de créer les icônes sur un logiciel de dessin vectoriel comme Illustrator. Puis, demandez-lui d’exporter ces icônes au format SVG  (ou récupérez des icônes SVG sur un site comme https://www.flaticon.com/).

Les pictogrammes en SVG

Les pictogrammes en SVG

Ensuite, rendez-vous sur IcoMoon et importez vos fichiers SVG (encadré bleu), sélectionnez les (encadré vert). Vous pouvez alors générer votre police et télécharger un fichier ZIP (encadré rouge) qui contient images SVG, sous forme de police.

Icon Moon, lIcon Moon, l'outil pour créer ses propres polices d'icônes

Maintenant que votre archive ZIP est téléchargée, vous n’avez plus qu’à inclure votre fichier style.css dans votre projet, placer le dossier fonts (qui contient vos icônes) dans l’arborescence de votre site et vous pouvez afficher votre icon avec le code <i class="icon-leNomDeVotreIcone"></i> ou <span class="icon-leNomDeVotreIcone"></span>. Les deux fonctionnent.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="description" content="">
      <meta name="author" content="">
      <title>Agency - Start Bootstrap Theme</title>
      <!-- Bootstrap core CSS -->
      <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
      <!-- Custom styles for this template -->
      <link href="css/agency.min.css" rel="stylesheet">
      <link href="icomoon.css" rel="stylesheet" >
   </head>
   </head>
   [....]
   <!-- Services -->
   <section id="services">
      <div class="container">
         <div class="row">
            <div class="col-lg-12 text-center">
               <h2 class="section-heading text-uppercase">Services</h2>
               <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
            </div>
         </div>
         <div class="row text-center">
            <div class="col-md-3">
               <span class="fa-stack fa-4x">
               <i class="icon-olentzero "></i>
               </span>
               <h4 class="service-heading">Premier icône</h4>
               <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>
            <div class="col-md-3">
               <span class="fa-stack fa-4x">
               <i class="icon-rugby"></i>
               </span>
               <h4 class="service-heading">Deuxième icône</h4>
               <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>
            <div class="col-md-3">
               <span class="fa-stack fa-4x">
               <span class="icon-surfing-a-sea-turtle"></span>
               </span>
               <h4 class="service-heading">Troisième icône</h4>
               <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>
            <div class="col-md-3">
               <span class="fa-stack fa-4x">
               <span class="icon-data"></span>
               </span>
               <h4 class="service-heading">Dernier icône</h4>
               <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>
         </div>
      </div>
   </section>

Vos icônes sont maintenant disponibles sur votre site. Vous êtes alors libres de personnaliser la taille de votre pictogramme ou sa couleur pour qu'il s'adapte au mieux au design du site !

Nos icônes personnaliséesNos icônes personnalisées

Pablo Ordas
Pablo Ordas

Passionné de photographie et de communication digitale en général, Pablo est le couteau suisse de l'équipe. Développeur de formation il aime la pluridisciplinarité qu'offre l'univers du web.

Les articles de la même catégorie
Ophélie et Raphaël rejoignent Redbox

L'équipe de Redbox Communication est heureuse de vous annoncer l'arrivée de deux nouveaux membres. Depuis maintenant plusieurs...

Animez les boutons de vos sites avec Particle Effect Buttons

Particle Effect, c’est quoi ?Particle Effect est une librairie Javascript qui dépend d’anime.js (une bibliothèque qui, comme...