Dans ma constante recherche d'outils performants afin d'améliorer le rendu des sites que je réalise, il me manquait un outil efficace pour créer facilement un lot d'icônes. Depuis quelques années, l'utilisation de sprite CSS était le plus répandu. Mais avec l'apparition progressive des écrans rétina (d'une densité de pixels doublée) cela devenait parfois laborieux...
C'est la que j'ai découvert le très pratique icomoon.

Étude de cas

Prenons un exemple concret pour être clair : le site sur lequel vous être entrain de naviguer, le mien !
Comme la plupart des sites, j'ai un grand nombre de pictos afin d'aider la lecture tout au long du site.
Dans les menus, les champs, les boutons, etc... J'utilisais jusqu'alors une sprite en png.

Extrait de la sprite CSS

Extrait de la sprite .png du site

Ici nous voyons bien les inconvénients liés à cette technique. Il faut penser aux différentes tailles, couleurs, variantes, puis doubler l'ensemble dans un fichier @2x pour écrans rétina.

Avec une police de caractère composée d'icônes, la plupart de ces problèmes sont réglés !

Les étapes de création

L'EXPORT

La 1ere force d'Icomoon, est d'importer les svg créés avec l'outil de votre choix.
Pour mon site, j'ai réalisé les icones sous illustrator. Vous pouvez ainsi exporter vos fichier en svg via Fichier > Enregistrer sous > Format svg ou bien utiliser un script, comme ai-svg-export, qui exporte chacun de vos calques en un fichier svg.

icomoon - Export SVG

Fenêtre d'export sous illustrator. Choisir Format : SVG.

Conseils :

  • Pour éviter les soucis à l'import sur le site, décomposez toutes les lignes afin d’avoir des formes pleines et utiliser l'outil pathfinder pour réunir les formes en une seule forme complexe
  • Le fond transparent doit être transparent
  • Pour avoir un effet gris, vous pouvez hachurer la forme.
    Ci-joint un exemple du site Icomoon.
    icomoon-gris

CRÉER LA POLICE D'ICÔNES DANS ICOMOON

Une fois vos SVG exportés, il faut donc les importer dans icomoon app.
Pour cela il suffit de cliquer sur le bouton Import Icons en haut à gauche de l'écran.

IcoMoon interface

L'interface de l'app IcoMoon

Le menu du haut comporte les différentes fonctions de base du site.

  • la flèche (jaune) permet de choisir les icônes
  • la poubelle (rouge) de supprimer celles choisies
  • la flèche (verte) permet de déplacer et changer l'ordre des icônes
  • le crayon (bleu) d'éditer (symétrie, agrandissement, réduction, etc...)

IcoMoon menu principal

Menu principal d'IcoMoon

En bas, le bouton SVG permet un export image de votre font.

Le bouton Font permet de passer à l'étape suivante de la création de notre police de caractères.
Sur cet écran vous pouvez voir un récapitulatif de votre font ainsi que ces caractéristiques.
Premièrement nous allons jeter un oeil au panneau de préférences.

IcoMoon préférences

Les préférences de votre police

Ici, il est important de vérifier le nom de votre font, d'ajouter ou non un préfixe de classe et un sélecteur. Vous pouvez aussi régler les paramètres de dimensions (font metrics) et tout ce qui concerne les métadata.

Tout ceci étant enfin paramétré, nous pouvons appuyer sur le bouton Download afin de récupérer une archive ZIP contenant tout le nécessaire afin de mettre en place notre font !

UTILISATION DE LA POLICE D'ICÔNES

Voici le contenu du ZIP que vous venez de récuperer :

IcoMoon fichiers

 

Maintenant, voyons comment utiliser cette police dans une page web.
Les 2 fichiers style.css et demo.html vous guiderons.
Regardons tout d'abord le contenu de ce fichier CSS.

IcoMoon CSS

Pour faire ici apparaitre l'icône rs-ist (instagram) il suffit d'appliquer la classe voulue à la span.
Ou pour encore plus de simplicité, utiliser la balise <i>. Ce qui donne ceci :

IcoMoon utilisation des CSS

 

Maintenant les polices de caractères composées d'icônes vectorielles n'ont plus de secret pour vous !