仅针对使用的类优化 Font Awesome

Posted 2023-03-06

【中文标题】仅针对使用的类优化 Font Awesome

【英文标题】：Optimize Font Awesome for only used classes

【发布时间】：2013-02-26 05:06:25

【问题描述】：

我正在使用 Font Awesome Sass 文件 https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass 来制作它_font-awesome.sass，这样我就可以在我的 Sass 项目中使用 @import。我也在使用 http://middlemanapp.com/ 将 Sass 转换为 Css。问题：

有没有办法只将使用过的图标类带入我转换后的 .css 中？因为现在它承载了 _font-awesome.sass

中的所有类

奖励：是否可以通过使用的图标类以某种方式重新编译字体以使其在生产使用中更小？

如果我能在上面的 #1 中获得一些提示，那就太好了。

谢谢。

【问题讨论】：

csslint 将帮助查找未使用的类，因此至少您不必手动执行此操作。自动化...你可能必须自己实现，但它也在 github 上，所以你可以自己动手

您希望 Sass 如何知道您正在使用哪些类？本网站可以从多种图标字体生成自定义字体文件：fontello.com

@cimmanon 你为什么不在下面发布你的答案，我会接受它？我一直在使用 fontello.com，这正是我所寻找的。​​span>

【参考方案1】：

您现在可以从 Font-awesome 子集图标以供生产使用。现在有一个名为 icnfnt 的官方子集工具，它允许您从当前版本的 Font-awesome (v3.0.2) 中挑选和打包您需要的图标。

自定义下载还包括所有 CSS、LESS、SCSS 和 SASS 代码！

【讨论】：

我不知道该工具是否符合官方要求

【参考方案2】：

Sass 不知道您实际使用的是什么类。这是您必须自己手动修剪的东西。打开提供的 .scss 文件并删除您不需要的任何内容。

编辑字体文件本身以消除不需要的字形需要 3rd 方应用程序来执行此操作，并且超出了此问题的范围。

---

Fontello 是一个在线网络服务，可以为您完成所有这些工作。它允许您在多个图标字体集合之间混合和匹配，为您的项目创建完美的字体文件。除了自定义的字体文件，它还提供了多个 .css 文件，其中包含已经为您生成的样式（将扩展名更改为 .scss 将允许您将它们导入现有的 Sass 项目）。

【讨论】：

fontello 自动更改图标的类名 - 有没有办法避免这种情况？

Fontello 缺少一些图标。没有 React、javascript、Node.js、Java，例如

【参考方案3】：

fontello 非常好，但IcoMoon 更棒。

【讨论】：

IcoMoon 允许您导入自己的字体。丰泰罗没有

我发现IcoMoon 只支持Font Awesome 图标的子集。

@TonyO'Hagan 也许你可以从本地文件系统导入 Font Awesome 字体文件。

IcoMoon 缺少图标。没有 React、JavaScript、Node.js，例如

仅供参考，但当 Font Awesome 图标导入到 IcoMoon 时，某些图标可能并不总是居中 - 这似乎是字体文件而不是 IcoMoon 的问题，因为如果您打开 Font Awesome在 Inkscape 中的字体文件中，您可以看到一些图标未对齐（尽管它们在输出到浏览器时正确显示）。解决方案似乎是使用 IcoMoon 的字形编辑控件来减小画布宽度并使图标居中。

【参考方案4】：

好吧，sass 当然可以稍微调整一下，以使选择器% 为基础，因此它们只能是可扩展的。完成此操作后，可以创建类以匹配所需的图标，然后可以@extend font-awesome 类。

就我个人而言，我是这样做的，实际上并没有使用标记中的类，只是对相关元素使用选择器并@extend它们与这些类。

例子：

// _icons.scss
%#$fa-css-prefix-glass:before  content: $fa-var-glass; 
...

// _core.scss
%#$fa-css-prefix 
    ...

然后在你的 scss 中

a.search 
    @extend %fa;
    @extend %fa-search;

等等。

【参考方案5】：

我使用 LESS 而不是 SASS，因此您可能需要调整您的实现。

环境：

Font Awesome 4.5.0（当前版本） Ubuntu 14.04 LTS 狂欢

使用它来生成您需要的 Unicode 字符编号列表：

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

然后，您可以在专家模式下将其与 FontSquirrel 一起使用，您可以在其中选择自定义子集：http://www.fontsquirrel.com/tools/webfont-generator

在 Unicode 范围内输入上面的逗号分隔值。

然后从 CSS 中删除不必要的东西：

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

您需要打开 less/font-awesome/icons.less 并将 grep 的输出粘贴到文件中。

【参考方案6】：

Fontastic 为我工作（它在Font Awesome github page 上列出）。选择您需要的字形并将它们下载为新的自定义字体。很棒的工具。

【讨论】：

Fontastic 要求您预先注册以演示任何内容

据我记忆，一年前情况并非如此。伤心。

只需使用mailinator 在那里创建一个帐户。它非常适合导出图标。

【参考方案7】：

Iconmoon 为我工作。我通过从 font-awesome 导入 svg 文件来使用它，从而确保我得到我想要的图标，而不仅仅是他们网站上可用的图标。此链接还帮助我集成了新图标 https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/

【参考方案8】：

这里的所有其他优化工具都是基于浏览器的。如果您正在寻找可以轻松自动化并在本地运行的东西，fontite 可能是最佳选择。

您将在 TOML 配置文件中列出您正在使用的图标。它将仅使用这些类创建 CSS，并且仅将这些图标打包到您的最终字体文件中。您甚至可以将 Font Awesome Brands、Font Awesome Solid 等中的图标组合到相同的 CSS 和字体文件中。