Créer sa propre icon-font avec IcoMoon

icomoon

Les icônes sont très utilisées sur le web, elles permettent d'illustrer une action et sont universelles. Certains sites comme FontAwesome, initiés par Bootstrap, proposent une bibliothèque toute prête d'icônes transformées en font. Il suffit de télécharger un fichier CSS et d'appeler les icônes avec une classe CSS ou à l'aide d'un unicode dans une pseudo-class avec before ou after.

IcoMoon, propose comme FontAwesome, une bibliothèque d'icônes mais la fonctionnalité la plus intéressante est celle de pouvoir créer sa propre icon-font. En effet, si nous créons notre propre iconographie, il est préférable de transformer nos icônes en font : si nous voulons éviter que celles-ci soient pixelisées quand on les agrandit ou sur écran Retina par exemple, ou encore, si nous souhaitons changer facilement leur couleur.

Pour créer une icon-font, il suffit d'exporter les pictogrammes depuis Photoshop ou Illustrator en format SVG et ensuite d'importer les SVG dans IcoMoon.

Pour les importer, il faudra aller dans :

icomoon1

Une page s'ouvre alors, c'est là que nous allons pouvoir créer notre icon-font.

Voici la barre d'outil principale :
icomoon2

Pour ajouter nos icônes préalablement enregistrées en SVG, il faudra aller sur "Import Icons", il suffira alors simplement d'ajouter les icônes depuis votre ordinateur. La deuxième barre d'outils permet de sélectionner les icônes que nous voulons transformer en font (1er picto), supprimer des icônes (2ème picto), changer l'ordre des icônes (3ème picto) et enfin modifier une icône (4ème picto).
"Search" permet de chercher une icône déjà créée par un autre utilisateur ou dans la bibliothèque de base d'IcoMoon.

Attardons nous sur la fonction qui permet de modifier une icône.
icomoon3
Sur cette image, nous voyons plusieurs choses. Il est déjà possible de changer la grille de l'icône pour qu'elle prenne plus ou moins de place dans son cadre. Il est aussi possible de procéder à une rotation de l'icône, de la retourner en horizontal ou en vertical, d'agrandir sa taille, de lui appliquer un mode miroir, de la monter/faire descendre dans son cadre ou déplacer horizontalement.

Enfin il est aussi possible de re-télécharger au format SVG l'icône modifiée, de la remplacer avec une autre icône (tout en gardant le même nom) ou de la dupliquer pour ensuite lui appliquer des modifications.

Une fois nos icônes importées et/ou modifiées, nous les avons dans une bibliothèque, nous pouvons créer autant de bibliothèques que nous avons besoin.

icomoon4
Sur cet exemple, nous pouvons voir la font-icon que nous avons crée et le logo Pinterest, pris dans une font-icon déjà existante : Typicons.

Toutes les icônes sont entourées d'un cadre jaune, cela veut dire qu'elles sont sélectionnées pour être converties en font-icon. Nous pouvons toutes les convertir ou seulement certaines.

Lorsque nous cliquons sur les options d'une bibliothèque, nous pouvons voir un sous menu, il est alors possible d'avoir des infos sur cette bibliothèque, d'ajouter des icônes à l'intérieur de celle-ci, de changer son positionnement ... et surtout de télécharger un JSON de cette bibliothèque, qui permettra de la passer à quelqu'un d'autre afin qu'il puisse rajouter des icônes ou les modifier etc.

icomoon5

Enfin, il est possible de générer toutes les icônes en SVG et PNG ou de générer la font à partir de la sélection.

icomoon6

Si nous cliquons sur "Generate SVG / PNG", nous téléchargeons un fichier ZIP contenant toutes les icônes en SVG et PNG et lorsque nous cliquons sur "Generate Font", nous arrivons sur un écran qui présente toutes nos icônes ainsi que leur unicode que l'on peut changer si nous le souhaitons.

icomoon7
Il ne reste plus qu'à télécharger notre font, il s'agit d'un fichier ZIP qui contient plusieurs fichiers très utiles :

- Un fichier CSS avec une propriété @font-face qui liste le chemin vers la font ainsi que des pseudo-classes sur chacune de mes icônes pour les "relier" à mon unicode.

icomoon9

  • Les fonts aux formats .TTF, .EOT, .WOFF et .SVG.
  • Un fichier json qui contient les icônes pour pouvoir les partager et les remodifier plus tard (si nécessaire).
  • Un fichier de démo pour présenter les icônes.
  • Un fichier Read Me.

Il suffira alors d'utiliser une balise <i> ou une pseudo-class avec un content pour appeler vos icônes dans votre site. Vous pourrez alors changer la taille, forme et couleur de vos icônes sans jamais les pixeliser ni en faire plusieurs de différentes tailles et couleurs.
C'est aussi un gain de performance car une font est moins lourde qu'une série d'images.

Voici un lien de démo : https://css-tricks.com/examples/IconFont/.

Vous savez maintenant comment faire vos propres icon-font.

Un commentaire

  1. Bonjour,

    Merci pour ce tuto très clair mais comme tous les autres tutos sur le sujet, il n’est pas clairement précisé comment utiliser couramment les icônes créé dans WordPress.

    En effet, WordPress n’autorise pas la saisie html de type (ni même avec )

    Le fantasme absolu serait de pouvoir générer un menu qui permette d’appeler les icônes créés depuis la barre d’outils WP.

    Bon WE !

Laisser un commentaire

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

Captcha *

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