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

Question

我使用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. 奖励:是否可以使用已使用的图标类以某种方式重新编译字体,以使其在生产使用中更小？

如果我能得到上面#1的一些提示,那就太棒了.

谢谢.

Answer 1

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

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

Fontello是一个在线Web服务,可以为您完成所有这些.它允许您在多个图标字体集合之间进行混合和匹配,从而为您的项目创建完美的字体文件.除了自定义字体文件外,它还提供了多个包含已为您生成的样式的.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,因此您可能需要调整您的实现.

环境:

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