CSS 仅针对使用过的类优化 Font Awesome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15331525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Optimize Font Awesome for only used classes
提问by HP.
I am using Font Awesome Sass file https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sassto make it _font-awesome.sassso I can @importin my Sass project. I am also using http://middlemanapp.com/to convert Sassto Css. Questions:
我正在使用 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。问题：
Is there a way to bring only used icon classesinto my converted .css? Because right now it carried all classes from _font-awesome.sass
BONUS:Is it possible to recompilethe fonts somehow with used icon classesto make it smaller on production use?
有没有办法只将使用过的图标类带入我转换后的 .css 中？因为现在它承载了_font-awesome.sass 中的所有类
奖励：是否可以使用使用过的图标类以某种方式重新编译字体以使其在生产使用时更小？
If I can get some tips on #1 above, that would be awesome enough.
如果我能在上面的 #1 上得到一些提示，那就太棒了。
Thanks.
谢谢。
回答by cimmanon
Sass has no idea what classes you are actually using. This is something you will have to manually trim down yourself. Open up the provided .scss file and hack out anything you don't need.
Sass 不知道你实际使用的是什么类。这是您必须自己手动修剪的东西。打开提供的 .scss 文件并破解任何你不需要的东西。
Editing the font file itself to eliminate unneeded glyphs requires a 3rd party application to do so and is beyond the scope of this question.
编辑字体文件本身以消除不需要的字形需要 3rd 方应用程序才能这样做，这超出了本问题的范围。
Fontellois an online web service that can do all of this for you. It lets you mix and match between multiple icon font collections to create the perfect font file for your project. In addition to the customized font file, it provides multiple .css files containing styles already generated for you (changing the extension to .scss will allow you to import them into your existing Sass project).
Fontello是一种在线网络服务，可以为您完成所有这些工作。它允许您在多个图标字体集合之间混合和匹配，为您的项目创建完美的字体文件。除了自定义字体文件之外，它还提供了多个包含已为您生成的样式的 .css 文件（将扩展名更改为 .scss 将允许您将它们导入到现有的 Sass 项目中）。
回答by nickhar
You can now subset icons from Font-awesome for production use. There is now an official subsetting tool called icnfnt, which allows you to pick and package just the icons you need from the current version of Font-awesome (v3.0.2).
您现在可以将 Font-awesome 中的图标子集用于生产用途。现在有一个名为icnfnt的官方子集工具，它允许您从当前版本的 Font-awesome (v3.0.2) 中挑选和打包您需要的图标。
The custom download also includes all CSS, LESS, SCSS and SASS code!
自定义下载还包括所有 CSS、LESS、SCSS 和 SASS 代码！
回答by Michelle Tsacheva
I use LESS and not SASS so you might have to adapt your implementation.
我使用 LESS 而不是 SASS，因此您可能需要调整您的实现。
Environment:
环境：
- Font awesome 4.5.0 (current version)
- Ubuntu 14.04 LTS
- bash
- 字体真棒 4.5.0（当前版本）
- Ubuntu 14.04 LTS
- 猛击
Use this to generate the list of Unicode character numbers that you need:
使用它来生成您需要的 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
You then use this with FontSquirrel in the expert mode where you select custom subsetting: http://www.fontsquirrel.com/tools/webfont-generator
然后，您可以在专家模式下将其与 FontSquirrel 一起使用，您可以在其中选择自定义子集：http: //www.fontsquirrel.com/tools/webfont-generator
In Unicode ranges enter the comma separated values from above.
在 Unicode 范围中，输入上面的逗号分隔值。
Then to remove unnecessary stuff from the CSS:
然后从 CSS 中删除不必要的东西：
egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less
You'll need to open less/font-awesome/icons.lessand paste the output from the grep into the file.
您需要打开less/font-awesome/icons.lessgrep 的输出并将其粘贴到文件中。
回答by mp31415
Fontasticworked for me (it was listed on Font Awesome github page). Select glyphs that you need and download them as a new custom font. Excellent tool.
Fontastic对我有用（它列在Font Awesome github 页面上）。选择您需要的字形并将它们下载为新的自定义字体。优秀的工具。
回答by designermonkey
Well, the sass can certainly be jiggled a little to make the selectors %based so they are extendable only. Once this is done, classes can be made to match the wanted icons, and then can @extendthe font-awesome classes.
好吧，当然可以稍微调整 sass 以使选择器%基于它们，因此它们只能扩展。完成此操作后，可以创建类以匹配想要的图标，然后可以创建@extend字体很棒的类。
Personally, I do this, and don't actually use the classes in the markup, and just use selectors to the relevant elements and @extendthem with these classes.
就我个人而言，我这样做，实际上并没有在标记中使用类，而只是将选择器用于相关元素并将@extend它们与这些类一起使用。
Example:
例子：
// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...
// _core.scss
%#{$fa-css-prefix} {
...
}
Then in your scss
然后在你的 scss 中
a.search {
@extend %fa;
@extend %fa-search;
}
Et voila.
等等。
回答by guru_laghima
Iconmoon worked for me. I used it by importing the svg file from font-awesome thus ensuring I get the icons I want and not just the ones available on their site. Also this link helped me with the integration of the new icons https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/
Iconmoon 为我工作。我通过从 font-awesome 导入 svg 文件来使用它，从而确保我得到我想要的图标，而不仅仅是他们网站上可用的图标。此链接还帮助我集成了新图标 https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/
