Question

我需要font-awesome才能拥有微调器图标。

我可以包含整个字体真棒库。但是，对于一个图标来说，这不是一种矫枉过正吗？有没有办法只包含一个图标或组件？问题似乎是，库没有模块化到不同的文件。例如，如果使用scss，则所有图标都在_icons.scss文件中，而不是在自己的文件中的每个图标。如果你使用纯css，那么一切都在一个文件中。

Answer 1

你不能。字体是单个文件，非常类似于图像或文档。如何将它包含在CSS中并不重要 - 用户仍然会下载整个字体文件。 CSS定义只是在您的网站上提供该字体。

你可以做一些事情作为替代方案。有些公司允许您使用自定义应用程序生成部分字体集（例如https://icomoon.io/）。这可能适合您的需求。但是，一旦你创建了他们的字体的自定义版本，它仍然是一个你无法分解的文件。仍然，icomoon的自定义版本可以非常小并且简化，并且可能适合您描述的场景。

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

Answer 2

Font awesome v5支持部分样式，在getting-started页面（https://fontawesome.com/get-started/web-fonts-with-css）中，您可以先包含此基本文件：

<link href="https://use.fontawesome.com/releases/v5.0.2/css/fontawesome.css" rel="stylesheet">

然后，你可以包括其中一个或一些：

<link href="https://use.fontawesome.com/releases/v5.0.2/css/brands.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.2/css/regular.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.2/css/solid.css" rel="stylesheet">

Answer 3

是的，您可以尝试此Optimize Font Awesome To Ridiculously Low Size Of 10KB!

Answer 4

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

我将假定您正在使用npm和webpack。（就我而言，我使用的是Laravel，其中包括npm）

打开文件夹node_modules/@fortawesome/fontawesome-free/js。现在说您只想在brands.js中使用facebook图标。

复制brand.js并在另一个文件夹中粘贴另一个名称-例如'brands_used.js'
打开brand_used.js并评论var icons = {...};部分，以备后用。
输入仅包含您要包含的图标的新变量，这将是来自注释部分的复制/粘贴。

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

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

Answer 5

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

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

Answer 6

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

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

显然，您仅包含所需的图标。
SVG图标可让您创建彩色图标。
图标字体被浏览器反走样。 SVG并非如此，因此看起来更清晰。
字体图标可能很难放置。 SVG很简单。
SVG图标可以包含内置的标题和描述，这对可访问性很有帮助。

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

FontAwesome的所有图标均以SVG文件形式提供，因此您可以选择所需的图标并将其添加到Spritesheet版本中。

只包括font-awesome的一部分

6 个答案: