Créer une font d’icônes pour le web

Actualisé le 22 avril 2014 - , ,

Pour créer facilement une font d’icônes sur le web il y a plusieurs méthodes, nous allons ici en voir une qui est relativement rapide une fois que le coup de main a été pris.

Il faut pour cela avoir 2 choses, Adobe Illustrator et utiliser l’application web Icomoon.

Etape 1 Illustrator

La procédure est simple, créez un nouveau document illustrator, créez un nouveau texte, avec pour valeur « A », et en taille 16px. Centrez-le, et redécouper votre espace de travail pour avoir votre lettre centrée au milieu d’un carré. Activez les règles, ajoutez un marqueur en haut de la lettre et un autre juste en bas, vous pouvez maintenant supprimer le calque du texte. Notre modèle est maintenant prêt.

Vous pouvez maintenant créer un nouveau calque, et insérer votre icone que vous avez préalablement vectorisé ou crée. Ajustez l’icone par rapport aux 2 marqueurs, il faut qu’elle soit centrée et bien proportionnée.

Renommez votre calque, c’est ce nom qui sera utilisé pour la sortie.

Maintenant téléchargez le script ai-svg-export.jsx

https://github.com/webiche/ai-svg-export

Ouvrez le depuis adobe Illustrator, configurez le dossier de sortie, puis exécutez le.

Vous devriez obtenir un svg avec le nom du calque et contenant votre icone. Et également un autre fichier ai-svg-export.jsx qui est déjà configuré avec vos paramètres.

La suite est simple, il faut créer autant de calque que vous avez d’icônes, en reproduisant bien sur la procédure, de repositionnement, renommer le calque, etc..

Pensez à bien déverrouiller tous vos calques, et ne laisser qu’un calque visible, puis exécuter le ai-svg-export.jsx qui a été crée dans votre dossier d’export.

Vous avez maintenant tous vos .svg qui sont prêt.

Etape 2 IcoMoon

Rendez vous maintenant sur l’app icomoon : http://icomoon.io/app/

Cliquez sur le bouton import icons, sélectionnez tous vos svg puis validez.

Vous aurez alors si tout va bien, l’ensemble de vos icônes.

Cliquez ensuite sur le bouton « font » en bas.

Vous pouvez maintenant cliquer sur préférences pour choisir le nom de votre font, ainsi que le prefix souhaité pour les classes.

Vérifiez que dans Font Metrics la valeur est bien à 16px.

Si tout est ok je vous conseil de cliquer en bas à droite sur « store session », ce qui va permettre de sauvegarder le projet pour pouvoir le ré-ouvrir plus tard, sans avoir à recharger les fonts ou reconfigurer les paramètres.

Vous n’avez plus qu’à cliquer sur le bouton download.

Vous obtiendrez alors une archive avec un dossier fonts contenant vos fonts, et un css qui contiendra les classes de vos fonts.

En cas de problème

Si lors de l’import de vos icônes vous avez des messages d’erreurs, il se peut par exemple que vous ayez certaines icônes mal formatées. Par exemple si vous un tracé avec une bordure vous devrez le convertir en tracé pour que l’ensemble de l’objet soit un tracé et qu’il n’ait pas de bordure.

Commentaires

Laisser un commentaire