我如何 "pull-out" 只有我实际使用的十几个图标？

Question

我有一个 angular 项目是使用 grunt 构建的，它可能使用了来自 font-awesome 的十几个图标。目前，我正在包括并因此分发整个超赞字体库。有没有办法 "pull-out" 只有我实际使用的图标（最好作为构建过程的一部分）？

我看过 icomoon 应用程序，它似乎给了我想要的结果，但这是一个在图标使用情况发生变化时进行更新的手动过程。

Answer 1

首先使用 Font-Awesome-SVG-PNG 为每个 Font Awesome 图标获取单独的 SVG 文件。

font-awesome-svg-png --color black --sizes 128 --no-png

然后使用 grunt-webfont，将您选择的图标（来自上一步生成的 SVG）组合成自定义网络字体。

例如，如果您只想在您的网络字体中包含具有 angle- 关键字的图标，那么 grunt 任务将类似于 -

webfont: {
    icons: {
        src: 'black/svg/angle-*.svg',
        dest: 'build/fonts'
    }
}

How do I "pull-out" only the dozen icons I actually use?