Police d’icônes avec IcoMoon

Si vous recherchez une façon simple pour intégrer des icônes sur votre site, icomoon est très certainement la solution qu’il vous faut. Ce site va vous permettre de créer des polices de caractères personnalisées, avec les icônes que vous désirez (vous pouvez utiliser vos propres icônes, où tout simplement sélectionner ceux déjà présent sur le site […]

Si vous recherchez une façon simple pour intégrer des icônes sur votre site, icomoon est très certainement la solution qu’il vous faut. Ce site va vous permettre de créer des polices de caractères personnalisées, avec les icônes que vous désirez (vous pouvez utiliser vos propres icônes, où tout simplement sélectionner ceux déjà présent sur le site d’icomoon).

liste-icones-icomoon

Comment ça marche ?

Très simplement, il vous suffit de :

  1. vous rendre sur le site icomoon.io/app
  2. cliquer sur les différents icônes que vous souhaitez utiliser
  3. sélectionner votre mode d’export « Generate SVG / PNG » ou « Generate Font »
  4. nous allons prendre le choix « Generate Font »

icomoon-export

L’outil vous présente l’ensemble des icônes que vous avez sélectionné. Vous pouvez effectuer divers réglages via le menu « Preferences » situés en haut, comme :

  • Changer le nom de la « Font »
  • Changer le prefixe de la class
  • Demander le support de IE7 et plus ancien
  • etc …

Une fois que cela vous convient il ne reste plus cas « télécharger » le tout. Pour cela cliquez sur le « Download » en bas de page d’icomoon. Vous allez ainsi obtenir un zip contenant ceci :

icomoon-arbo

demo.html : vous présente comment utiliser tel ou tel icônes sur votre site
style.css : contient l’ensemble de vos styles
fonts : contient l’ensemble des fonts

Vous souhaitez créer vos propres icônes ?

Cela est possible, pour cela il vous suffit d’importer vos propres icônes (réalisés sous illustrator par exemple).
Créez votre icônes, exportez le en SVG ou à l’aide d’un script tel que ai-svg-export (il vous permettra d’exporter chaque calque en 1 fichier SVG. Copier le fichier ai-svg-export dans le dossier scripts d’illustrator ou de l’importer via Fichier/Scripts/Autre scripts).

Conclusion

L’avantage de icomoon est qu’il vous permet de créer vos propres icônes puis de les importer facilement pour les utiliser sur votre site internet.
Une fois cela réaliser, le tout intégré sur votre site, blog, vous pouvez customiser votre icônes en changeant sa taille, couleur, etc …

D’autres solutions existent tels que :


Cet article a été rédigé par Cédric le 26 février 2015 Mots clés : - Dans : Développement

Articles recommandés
Il arrive parfois que l’on est besoin de lire un fichier CSS. Malheureusement lire un fichier css compressé n’est pas simple. Voici donc un outil (en ligne) vous permettant de décompresser un fichier CSS très rapidement pour en améliorer la lecteur / recherche.Lire la suite

OU

Inscrivez-vous à la newsletter

Votre adresse email ne sera pas vendue à un tiers, elle ne sevira qu'aux envois des newsletters de Nexi Conseils. Vous pouvez vous désabonner à n'importe quel moment.
Conformément à la loi « informatique et libertés » du 6 janvier 1978 modifiée en 2004, vous bénéficiez d’un droit d’accès et de rectification aux informations qui vous concernent, que vous pouvez exercer en vous adressant à SARL NEXI CONSEILS - contact@nexi.fr - 09 64 32 29 90.

retour