仅针对使用的类优化Font Awesome
我正在使用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的一些提示，那就太棒了。
谢谢。
Sass不知道你正在使用什么类。 这是你将不得不手动修剪自己。 打开提供的.scss文件，并破解你不需要的任何东西。
编辑字体文件本身以消除不必要的字形需要第三方应用程序这样做，超出了这个问题的范围。
Fontello是一个在线的networking服务，可以为你做这一切。 它可以让你在多个图标字体集合之间混合搭配，为你的项目创build完美的字体文件。 除了自定义的字体文件之外，它还提供了包含已经为您生成的样式的多个.css文件（将扩展名更改为.scss将允许您将它们导入到您现有的Sass项目中）。
fontello非常好，但是IcoMoon更棒。
您现在可以从Font-awesome中为生产使用子图标。 现在有一个叫做icnfnt的官方子集工具，它允许你从当前版本的Font-awesome（v3.0.2）中挑选和打包你需要的图标。
自定义下载还包括所有的CSS，LESS，SCSS和SASS代码！
我使用LESS而不是SASS，所以你可能不得不调整你的实现。
环境：
使用它来生成你需要的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 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，在其中select自定义子集： http : //www.fontsquirrel.com/tools/webfont-generator
在Unicode范围内，input上面的逗号分隔值。
然后从CSS中删除不必要的东西： egrep“@ fa-var - （$ fa_icons）;” less/字体真棒/ icons.less
您需要打开less / font-awesome / icons.less并将grep的输出粘贴到文件中。
祝你好运，马丁
那么，sass当然可以做一些小小的select，使它们只能被扩展。 一旦完成，类可以匹配想要的图标，然后可以@extend字体真棒类。
就我个人而言，我这样做，实际上并没有使用标记中的类，只是使用select器来相关的元素和@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瞧。
Fontastic为我工作（它被列在Font Awesome github页面上 ）。 select您需要的字形并将它们下载为新的自定义字体。 优秀的工具。
<script> // Asynchronously load non-critical css function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } // load css file async loadCSS("font-awesome/4.1.0/css/font-awesome.min.css"); </script>
