建立font-awesome图标

Question

建立font-awesome图标

9

我想建立自己的font-awesome图标集。具体来说，我想构建一个与font-awesome完全相同的东西，但只使用其中的一部分图标。

此外，我非常想知道他们如何在“字体”文件夹中构建文件。在github上，我找到了这个repo，其中包含所有的svg图标。在ubuntu上，使用Font Custom，我能够生成给定的svg文件作为输入的字体文件，尽管我并不是真正满意。但除此之外，我不明白如何将这些文件与font-awesome合并。

因此，总结一下，我该如何创建自己的font-awesome集，使用自己的svg文件？

请不要建议使用fontello，icoMoon或类似服务，因为我想在本地机器上完成，不使用任何第三方服务。

- Bruno Bruzzano

3个回答

0

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

然而，你可能需要编写自己的CSS。我个人认为使用icomoon或类似的基于Web的生成器生成它更容易和快速，因为这些生成器特别适用于生成Web字体。在FontLab Studio或类似的桌面应用程序之前，主要用于设计桌面字体，并不带有预构建的CSS编译器/生成器。

我想看到一个桌面版的生成器。

- Žan Marolt

0

我还没有深入研究过自己的字体图标集，但我认为其中使用了一些SVG数据。

只是作为另一种方法的想法 - 你甚至可以在设置类别上使用background-img :before / :after

有用的资源：http://iconizr.com/ 我发现他们的data-url生成很有用（比fontello、icoMoon更好的SVG转换）

- codifier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Samuel Bergström · Accepted Answer

我曾经尝试过类似的事情，但必须承认它从来不完美，很可能是由于糟糕的字体转换造成的，只是没有时间使它变得完美。基本上我使用了以下链接（大部分内容）

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

流程概览

步骤1 - 创建单个图标（您应该使用特殊字符以避免有人使用您的字体进行“打字”）。

步骤2 - 将图标选择保存为SVG字体。

步骤3 - 将SVG字体转换为Web字体（有许多免费在线转换器）。

步骤4 - 生成要使用的CSS类（为所有单个图标创建所有可能的类）-结果应该是像这样的东西：“icon icon-lg icon-blue icon-hand” - （最好使用LESS / SCSS完成此部分 - 以后您将明白原因），其中一个包含所有图标的一般设置，另一个控制大小覆盖，一个控制颜色，最重要的是使用：after ->输出图标。

步骤5 - 现在您拥有一个由CSS控制的工作Web字体，可以创建一个UI以选择可用的单个图标。最好使用LESS，这样您只会“公开”用户选择的类（例如- icon-1、2、5、8等），所有其他图标仍包含在字体中，但它们对应的CSS类不会在最终CSS中输出。

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