构建字体真棒图标

Posted 2023-03-06

【中文标题】构建字体真棒图标

【英文标题】：Building font-awesome icons

【发布时间】：2015-07-16 06:51:26

【问题描述】：

我会建立自己的字体很棒的图标集。特别是，我会构建一个具有所有功能的 font-awesome 的副本，但只使用图标的子集。

此外，我真的很感兴趣他们如何在 fonts 文件夹中构建文件。 在 github 上，我找到了这个 repo，其中包含所有 svg 图标。在 ubuntu 上，使用 Font Custom，我能够生成 svg 文件作为输入，即字体文件，即使我不是很满意。但除此之外，我不明白如何 merge 那些带有 font-awesome 的文件。

总结一下，我如何使用自己的 svg 文件创建自己的字体真棒集？

请不要说要使用fontello、icoMoon 或类似的，因为我想在我的本地机器上做，没有任何第三方服务。

【参考方案1】：

我没有深入挖掘自己的字体图标集，但我认为有一些 svg 数据正在使用中。

就像另一种方式的想法一样——你甚至可以在设置类上使用 background-img :before / :after

有用的资源：@​​987654321@ 我发现他们的 data-url 生成很有用（比 fontello、icoMoon 更好的 svg 转换）

【参考方案2】：

我实际上做了类似的事情，但不得不承认它从来都不是完美的，很可能是由于字体转换不好，只是从来没有时间使它完美。基本上我使用了以下链接（大部分）

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

流程概述

第 1 步 - 创建单独的字形（您应该使用特殊字符以避免有人使用您的字体“打字”。

第 2 步 - 将 gylphs 选择保存为 SVG 字体。

第 3 步 - 将 SVG 字体转换为网络字体（有很多免费的在线转换器）

第 4 步 - 生成要使用的 CSS 类（为所有单独的字形创建所有可能的类） - 结果应该类似于：“icon icon-lg icon-blue icon-hand” - （这部分最好使用 LESS / SCSS - 你稍后会明白为什么） 其中一个包含所有图标的常规设置，另一个控制大小覆盖，一个控制颜色，最重要的一个是使用 :after -> 输出图标。

第 5 步 - 现在您已经有了由 CSS 控制的有效网络字体，请创建一个用于选择单个字形的 UI。最有可能您应该使用 LESS，这样您就“公开”了用户选择的类（例如 - icon-1、2、5、8 等）所有其他图标仍包含在字体中，但它们对应CSS 类不会在最终的 CSS 中输出。

可能有更高级的方法，但本概述和教程应该可以帮助您了解基础知识。

【讨论】：

刚刚注意到，第 1 步 - 使用inkscape，他们有一个很好的开源编辑器，fontlab 不那么可用而且不是免费的。最重要的是，可以在我附加的链接中找到更“全面”的解释。

【参考方案3】：

我相信您可以使用 FontLab Studio：http://store.fontlab.com/

但是，您可能必须编写自己的 css，我个人认为使用 icomoon 或类似的基于 web 的生成器生成它更容易和更快，因为它专门用于生成 web 字体，在 FontLab Studio 或类似的桌面之前应用程序是为设计桌面字体而设计的，不附带预建的 css 编译器/生成器。

我也想看看桌面生成器。