Twitter bootstrap 3 - 创建一个自定义 glyphicon 并添加到 glyphicon “字体”答案

【问题标题】：Twitter bootstrap 3 - create a custom glyphicon and add to glyphicon "font"Twitter bootstrap 3 - 创建一个自定义 glyphicon 并添加到 glyphicon “字体”
【发布时间】：2013-08-26 09:34:46
【问题描述】：

我正在运行 twitter bootstrap3，我对它将图标作为字体处理的新方式非常满意。但是：我需要一些自定义图标；我需要自己制作它们，并理想地将其集成到现有字体中。我没有运气搜索过。 Illustrator、矢量图等我很熟悉，但是如何整合呢？

最坏的情况，我会用传统方式制作图像，但希望有更好的解决方案。

如何将自定义 glyphicon 与现有（bootstrap 3）glyphicon 字体集成？

【问题讨论】：

标签： fonts icons twitter-bootstrap-3 glyphicons

【解决方案1】：

此过程可能是一种选择。

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

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

完成后，导出字体集并像任何图标字体一样加载它。

祝你好运！

更新

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

【讨论】：

非常感谢，大卫。我会试一试，然后报告。 :-)
很棒的应用程序......正是我们需要让我们的应用程序轻量级！
我很高兴这对你有用@robnardo，每当我使用 IcoMoon 时，我都对它的效果印象深刻
@lepe，如果您提到制作自定义字体图标所涉及的步骤数量，我开始阅读更多关于在某些情况下使用 SVG 而非字体图标的参数，例如 @ 987654323@
@DavidTaiaroa：是的，完全正确。创建图标、打包和编码字体、创建 ":before" 和 ":after" css 规则对于一项任务来说是压倒性的：在网页中显示图标。我认为 base64 编码的 SVG 文件加载速度更快，并且不涉及这些步骤。但是，我认为应该有一种更简单的方法来打包所有图标，而不会如此忙碌。

【解决方案2】：

如果有人正在寻找此处提到的替代工具，我发现Glyphter 非常有用。它相当简单，允许您上传.svg 文件，修饰它，并从其他几个字体包中添加更多字形。然后，您可以将整个捆绑包下载为自己的字体。

【讨论】：