如何从 Font Awesome 仅安装所需的字体？

Question

我会使用 Font Awesome 中的几个图标。

我看到我们可以下载整个 font-awesome 目录并使用像

<i class="fa fa-camera-retro"></i>

这样的简单代码，并使用

fa-camera-retro

显示图标。

我可以只下载我将使用的字体吗？

对于上面的例子，如果我只使用

<i class="fa fa-camera-retro"></i>

，

fa-camera-retro

，我想通过仅使用与此图标相关的文件来减少目录大小。

Answer 1

也许这有帮助： 丰特洛

fontello 让您选择图标并编译您自己的版本

Answer 2

使用 Icomoon，您可以选择图标的子集并创建您自己的自定义图标字体，这不仅仅是 Font Awesome，他们还有其他库。

Answer 3

我想提出一个替代解决方案，因为这里只提供了一些答案。 我遇到了同样的问题，发现最简单的解决方案是简单地使用 svg 版本。但请务必提供高度或宽度尺寸！

<img class="my-fa-icon" src="/assets/css/fontawesome-free-svgs/brands/facebook-f.svg">

.my-fa-icon {
  width: 1rem; /** Required */
}

我知道这不完全问题所要求的，但它很简单并且效果很好。

Answer 4

您可以使用图标。它可以帮助您从 FontAwesome、Material 等各种库导入所需的图标。如果您需要更多自定义，不确定它是否会对您有帮助，但它可以满足大多数用例。

Answer 5

我认为subset-iconfont完全满足您的需求。该包的目的是从多个图标字体包中提取子集并使用最新的 fontawesome (6.1.1) css/scss 样式。为了满足您的需要，您可以用几行来完成：

npm install --save-dev subset-iconfont @fortawesome/fontawesome-free

然后

import { FaFreeProvider } from 'subset-iconfont';

const fa = new FaFreeProvider (['plus', 'clock', '500px'], {
  formats: ['ttf', 'woff2'],
});

fa.makeFonts('./outputDir').then((result) => {
  console.log('Done!');
});

然后在文件夹

./outputDir

找到结果，打开生成的

index.html

看看如何使用。

此外，您还可以从其他一些 iconfont 包中进行子集化，并以 FontAwesome 风格使用子集结果。

P.S.，我是这个包的作者。

Answer 6

尝试fontcut，它可以让你选择你的图标并获得你自己的版本，它是在线的，免费提供 20 个图标。