Twitter bootstrap 3 - create a custom glyphicon and add to glyphicon “font”

别等时光非礼了梦想. 提交于 2019-11-26 11:51:51

问题


I am running twitter bootstrap3, and I am extremely happy with the new way it handles the icon as fonts. However: I need some custom icons; I need to make them myself, and ideally integrate it into the existing font. I have searched with no luck. I am well familiar with illustrator, vector graphics etc, but how to integrate?

Worst case scenario, I will make images the traditional way, but hope there is a better solution.


How do I integrate a custom glyphicon with the existing (bootstrap 3) glyphicon font?


回答1:


This process might be one option.

You could use the IcoMoon App. Their library includes FontAwesome which would get you off to a quick start, or you download glyphicon, and upload the fontawesome-webfont.svg

For your custom icons, create SVGs, upload them to IcoMoon and add them to the FontAwesome / Glyphicon set.

When you are finished export the font set and load it as you would any icon font.

Good luck!

UPDATE

If your imported SVG file icons seem misaligned after importing into the iconmoom.app, first check how they actually look when used on a web page. It seems to me that the preview may not always be perfect. Alternatively, there is an edit icon in the iconmoon.app tool bar which lets you move and resize.




回答2:


If anyone is looking for an alternate tool to the one mentioned here, I've found Glyphter to be very useful. It is fairly straight forward and allows you to upload an .svg file, groom it, and add more glyphs from several other font packs. You can then download the entire bundle as its own font.



来源:https://stackoverflow.com/questions/18401035/twitter-bootstrap-3-create-a-custom-glyphicon-and-add-to-glyphicon-font

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!