web-dev-qa-db-fra.com

Twitter bootstrap 3 - créez un glyphicon personnalisé et ajoutez-le au glyphicon "font"

J'utilise Twitter bootstrap3 et je suis extrêmement heureux de la nouvelle façon dont il gère l'icône en tant que polices. Cependant: j'ai besoin d'icônes personnalisées; Je dois les créer moi-même et, idéalement, les intégrer dans la police existante. J'ai cherché sans succès. Je connais bien illustrator, les graphiques vectoriels, etc., mais comment l’intégrer?

Dans le pire des cas, je créerai des images de manière traditionnelle, mais j'espère qu'il existe une meilleure solution.


Comment puis-je intégrer un glyphicon personnalisé à la police de glyphicon existante (bootstrap 3)?

62
benteh

Ce processus pourrait être une option.

Vous pouvez utiliser le IcoMoon App . Leur bibliothèque inclut FontAwesome qui vous permettrait de démarrer rapidement, ou vous téléchargez glyphicon et téléchargez le fichier fontawesome-webfont.svg.

Pour vos icônes personnalisées, créez des SVG, téléchargez-les sur IcoMoon et ajoutez-les à l'ensemble FontAwesome/Glyphicon.

Lorsque vous avez terminé, exportez le jeu de polices et chargez-le comme n'importe quelle police d'icônes.

Bonne chance!

[~ # ~] met à jour [~ # ~]

Si les icônes de vos fichiers SVG importés semblent mal alignées après leur importation dans le fichier iconmoom.app, commencez par vérifier leur apparence lorsqu'elles sont utilisées sur une page Web. Il me semble que l'aperçu n'est peut-être pas toujours parfait. Vous pouvez également utiliser une icône d'édition dans la barre d'outils iconmoon.app qui vous permet de déplacer et de redimensionner.

82
David Taiaroa

Si quelqu'un cherche un autre outil que celui mentionné ici, j'ai trouvé que Glyphter était très utile. C'est assez simple et vous permet de charger un .svg fichier, le toiletter et ajouter plus de glyphes de plusieurs autres packs de polices. Vous pouvez ensuite télécharger l'ensemble complet dans sa propre police.

1
MattMakes