Search Menu

Icomoon : créer une police de caractères avec vos icones préférées

icomoon

Icomoon, voilà un site qui a complètement révolutionné ma vie. Quand on designe un blog, on a sans arrêt besoin d’icones : il faut des icones pour les réseaux sociaux, pour des puces, ou pour pleins d’autres choses en fait. On trouve bien sûr plein de ressources gratuites sur le web mais j’ai l’impression d’avoir toujours besoin d’une nouvelle icone ou de ne plus savoir où j’ai rangé les images de tel ou tel projet. Et à chaque fois, je repars à la chasse à l’icone parfaite.

Maintenant, je vais sur Icomoon : ce site permet de créer une police de caractères que vous pouvez personnaliser avec les icones que vous souhaitez. Du coup, c’est super pratique, quand je fais ma maquette, je tape le caractère « P » et hop, j’ai mon icone Pinterest, T » et voilà l’oiseau Twitter ! Et en plus, c’est super pratique pour changer la taille et la couleur de mes icones : cela fonctionne comme pour du texte. Cerise sur le gâteau, les polices générées par Icomoon peuvent être utilisées dans les CSS directement en utilisant @font-face.

icomoon

L’outil est très facile à utiliser. Il vous suffit d’aller sur la partie App, de sélectionner les icones de votre choix en utilisant l’outil « Flèche » et de cliquez en bas sur le bouton « Font ». Vous pourrez ensuite associer les touches de votre clavier à chaque caractère puis générer la police et la télécharger en plusieurs format. Vous avez également la possibilité de choisir de les télécharger en images au format PNG, accompagnés des règles CSS qui vont bien avec !

Enfin, sachez qu’il est également possible de modifier les icones (zoom, rotation, déplacement, symétrie …) en utilisant le mode « Edit » symbolisé par le petit crayon. Et vous pouvez également importer vos propres icones (au format SVG) pour les incorporer dans votre police de caractère. Elles apparaitront ensuite dans la partie « Your Custom Icons ».

icomoon-edition-icone

La classe !

 

À propos de Laetitia

J'aime le papier, je déteste la paperasse.

Lire ses billets - Découvrir son blog

1 Comment Write a comment

Leave a Comment

Required fields are marked *.