仅针对使用过的类优化Font Awesome

我正在使用Font Awesome Sass文件https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass使其成为_font-awesome.sass，因此可以@import在我的Sass项目中使用。我还使用http://middlemanapp.com/将Sass转换为Css。问题：

1. 有没有办法将仅使用过的图标类带入转换后的.css中？因为现在它包含了_font-awesome.sass中的所有类

2. BONUS：是否可以用旧的图标类以某种方式重新编译字体，以使其在生产时更小？

如果我能在上面的＃1上找到一些提示，那就足够了。

谢谢。

Sass不知道您实际上正在使用什么类。您必须手动调整自身大小。打开提供的.scss文件，并破解所有不需要的内容。

编辑字体文件本身以消除不需要的字形需要第三方应用程序执行，而这超出了此问题的范围。

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

fontello非常好，但IcoMoon更加出色。

现在，您可以将Font-awesome中的图标子集用于生产。现在有一个名为icnfnt的官方子集工具，该工具可让您从最新版本的Font-awesome（v3.0.2）中挑选并打包所需的图标。

定制下载还包括所有CSS，LESS，SCSS和SASS代码！

我使用LESS而不是SASS，因此您可能必须调整实现。

环境：

• 真棒字体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的输出粘贴到文件中。

好吧，当然可以对Sass进行一些微调，以使其%基于选择器，使其只能扩展。完成此操作后，可以创建类以匹配所需的图标，然后可以创建@extend字体棒的类。

我个人是这样做的，实际上并没有使用标记中的类，而只是使用选择器来选择相关元素以及@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;
}

等等。

Fontastic为我工作（它在Font Awesome github页面上列出）。选择所需的字形，然后将其下载为新的自定义字体。优秀的工具。

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