如何仅包含部分字体-awesome

Question

我想使用 font-awesome 中的微调器图标，但对任何其他 FA 功能不感兴趣。

我可以包含整个很棒的字体库。但这对于一个图标来说不是有点过分了吗？有没有一种方法可以只包含一个图标或组件？

问题似乎是，该库没有模块化为不同的文件。例如，如果使用 Scss，则所有图标都位于 _icons.scss 文件中，而不是每个图标位于其自己的文件中。如果您使用纯 CSS，那么所有内容都在一个文件中。

Answer 1

你不能。字体是单个文件，很像图像或文档。无论您如何将其包含在 CSS 中，用户仍然会下载整个字体文件。 CSS 定义只是使字体在您的网站上可用。

您可以采取一些替代措施。有些公司允许您使用自定义应用程序生成部分字体集（例如 https://icomoon.io/）。这可能适合您的需求。但是，一旦您创建了其字体的自定义版本，它仍然是一个无法分解的文件。尽管如此，icomoon 的自定义版本可以非常小且精简，并且可能适合您描述的场景。

另一种选择是不自己托管字体，而是使用更有可能被用户缓存的基于云的字体。它本身不是一个解决方案，但会在一定程度上增加您的用户不必专门为您的网站下载字体的机会。

Answer 2

Font Awesome v5 支持部分样式，在

getting-started

页面（https://fontawesome.com/v5.15/how-to-use/on-the-web/referencing-icons/basic-use），您可以先包含这个重要文件：

<link href=/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">

然后，您可以包括其中一项或部分：

<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/regular.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">

Answer 3

现在您可以使用他们的 JS API，它将仅加载选定的 SVG 文件。这极大地降低了捆绑包的大小。

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icon

然后

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { faCamera } from '@fortawesome/free-solid-svg-icons'

library.add(faCamera)
dom.watch()

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

Answer 4

在提出这个问题两年后，我建议您使用 SVG 而不是图标字体。您可以将所有 SVG 连接到一个 SVG spritesheet 中，以便使用单个 HTTP 请求加载（并缓存）它们。该文件将比整个图标字体小得多，这是您的要求。

以下是选择 SVG 而不是图标字体的一些原因（也参见此处）：

• 显然，您只包含您想要的图标。
• SVG 图标允许您创建彩色图标。
• 浏览器对图标字体进行了抗锯齿处理。 SVG 不是这样，所以它们看起来更清晰。
• 字体图标可能很难定位。 SVG 很简单。
• SVG 图标可以有内置的标题和描述，这有利于可访问性。

为了获得高性能，您需要将所有 SVG 图标放置在 sprite 表中。您可以使用 svgstore （grunt 和 gulp 和 webpack 版本可用）来完成此操作，以便它成为构建过程的一部分。

FontAwesome 使其所有图标均以 SVG 文件形式提供，因此您可以选择所需的图标并将它们添加到 spritesheet 构建中。

Answer 5

是的，你可以，试试这个优化 Font Awesome 到 10KB 的小得离谱！

Answer 6

这是一个老问题了。不过，有一个解决方法。

我假设您正在使用 npm 和 webpack。 （在我的例子中，我使用 Laravel，其中包括 npm）

打开文件夹

node_modules/@fortawesome/fontawesome-free/js

。现在假设您只想在 Brands.js 中使用 facebook 图标。

1. 复制 Brands.js 并使用另一个名称（例如“brands_used.js”）将其粘贴到同一文件夹中
2. 打开brands_used.js并注释

   var icons = {...};

   部分，保留以供后面参考
3. 输入一个新变量，其中仅包含您想要包含的图标，这将是注释部分的复制/过去。

    var icons = {
      "facebook-f":[...],
    };

4. 需要在 js 资产文件夹中新创建的文件
5. 编译你的资产

Answer 7

Icomoon 允许您使用他们的独立 svgs。

https://github.com/Keyamoon/IcoMoon-Free/tree/master/SVG

Answer 8

在专业计划中，现在可以使用 subsetting。
这是官方视频教程