仅包含 font-awesome 的一部分

Question

我需要很棒的字体才能有微调器图标。

我可以包括整个超棒的字体库。但是，只用一个图标会不会太过分了？有没有办法只包含一个图标或组件？问题似乎是，库没有模块化为不同的文件。例如，如果使用 scss，所有图标都在 _icons.scss 文件中，而不是每个图标在它们自己的文件中。如果您使用纯 css，那么所有内容都在一个文件中。

Answer 1

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

您可以做一些其他的事情。有些公司允许您使用自定义应用程序生成部分字体集（例如 https://icomoon.io/）。那可能适合您的需要。但是，一旦你创建了他们字体的自定义版本，它仍然是一个你无法分解的文件。不过，icomoon 的自定义版本可以非常小且流线型，并且很可能适合您描述的场景。

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

Answer 2

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

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

Answer 3

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 4

可以，试试这个Optimize Font Awesome To Ridiculously Low Size Of 10KB!

Answer 5

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

以下是选择 SVG 而不是图标字体的一些原因（也 see here）：

显然，您只包含了所需的图标。
SVG 图标允许您创建彩色图标。
浏览器 anti-aliased 图标字体。 SVG 不是，所以它们看起来更清晰。
字体图标可能很难定位。 SVG 很简单。
SVG 图标可以有 baked-in 标题和描述，这有利于辅助功能。

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

FontAwesome 将其所有图标作为 SVG 文件提供，因此您可以选择您想要的图标并将它们添加到您的 spritesheet 构建中。

Answer 6

这是一个老问题。但是，有一个解决方法。

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

打开文件夹 node_modules/@fortawesome/fontawesome-free/js。现在假设您只想在 brands.js.

中使用 facebook 图标

复制 brands.js 并在同一文件夹中使用另一个名称（比如 'brands_used.js'-）将其粘贴
打开brands_used.js评论var icons = {...};部分，留作后面参考
键入一个新变量，其中只包含您想要包含的图标，这将是评论部分中的 copy/past。

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

需要在您的 js 资产文件夹中新建文件
编译你的资产

Answer 7

非常老的问题，但现在您可以使用他们的 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>

仅包含 font-awesome 的一部分

Include only part of font-awesome

css

font-awesome