Twitter bootstrap 3 - 创建自定义字形并添加到字形“字体" [英] Twitter bootstrap 3 - create a custom glyphicon and add to glyphicon "font"

问题描述

我正在运行 twitter bootstrap3，我对它将图标作为字体处理的新方式感到非常满意.但是:我需要一些自定义图标；我需要自己制作它们，最好将其集成到现有字体中.我没有运气搜索过.我对插画、矢量图等很熟悉，但如何整合?

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.

如何将自定义字形与现有(引导程序 3)字形字体集成?

推荐答案

这个过程可能是一种选择.

This process might be one option.

您可以使用 IcoMoon 应用程序.他们的 库 包括 FontAwesome，可以让您快速入门，或者您下载 glyphicon，然后上传 fontawesome-webfont.svg

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

对于您的自定义图标，创建 SVG，将它们上传到 IcoMoon 并将它们添加到 FontAwesome/Glyphicon 集.

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.

祝你好运！

更新

如果您导入的 SVG 文件图标在导入 iconmoom.app 后看起来没有对齐，请首先检查它们在网页上使用时的实际外观.在我看来，预览可能并不总是完美的.或者，iconmoon.app 工具栏中有一个编辑图标，可让您移动和调整大小.

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.

这篇关于Twitter bootstrap 3 - 创建自定义字形并添加到字形“字体"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！