Question

我正在使用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
奖励：是否可以使用使用过的图标类以某种方式重新编译字体，以使其在生产使用时变小？< / p>

如果我能得到关于上述＃1的一些提示，那就太棒了。

感谢。

Answer 1

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

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

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

Answer 2

fontello非常好，但IcoMoon更加精彩。

Answer 3

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

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

Answer 4

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

环境：

Font awesome 4.5.0（当前版本）
Ubuntu 14.04 LTS
的bash

使用此选项可生成所需的Unicode字符数列表：

appcompat-v7

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

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

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

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

您需要打开egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less并将grep的输出粘贴到文件中。

Answer 5

嗯，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;
}

Et瞧。

Answer 6

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

Answer 7

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

优化Font Awesome仅用于已使用的类

7 个答案: