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).
Comment ça marche ?
Très simplement, il vous suffit de :
- vous rendre sur le site icomoon.io/app
- cliquer sur les différents icônes que vous souhaitez utiliser
- sélectionner votre mode d’export « Generate SVG / PNG » ou « Generate Font »
- nous allons prendre le choix « Generate Font »
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 :
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 :
- fontawesome.io
- fontello.com
- etc …
Cet article a été rédigé par Cédric le 26 février 2015 Mots clés : icones - Dans : Développement