Twitter bootstrap 3 - création d'un glyphicon personnalisé et ajout d'un glyphicon "font".

Question

J'utilise twitter bootstrap3, et je suis extrêmement satisfait de la nouvelle façon dont il gère les icônes en tant que polices. Cependant : j'ai besoin de quelques icônes personnalisées ; je dois les faire 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 les intégrer ?

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

---

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

Answer 1

Ce processus pourrait être une option.

Vous pourriez utiliser le Application IcoMoon . Leur bibliothèque inclut FontAwesome qui vous permettra de démarrer rapidement, ou bien 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 vous le feriez pour n'importe quelle police d'icône.

Bonne chance !

UPDATE

Si les icônes de votre fichier SVG importé semblent mal alignées après avoir été importées dans iconmoom.app, vérifiez d'abord comment elles se présentent réellement lorsqu'elles sont utilisées sur une page web. Il me semble que l'aperçu n'est pas toujours parfait. Alternativement, il y a une icône d'édition dans la barre d'outils d'iconmoom.app qui vous permet de déplacer et de redimensionner.

Answer 2

Si quelqu'un recherche un outil alternatif à celui mentionné ici, j'ai trouvé Glyphter pour être très utile. Il est assez simple et vous permet de télécharger une .svg le toiletter et y ajouter d'autres glyphes provenant de plusieurs autres packs de polices. Vous pouvez ensuite télécharger l'ensemble du pack comme une police à part entière.