优化只使用类的字体太棒了

我使用字体令人敬畏的萨斯文件 https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass，使其 字体-太棒了，无礼，所以我可以 @import在我的萨斯项目。我也使用 http://middlemanapp.com/转换 无礼到 CSS。问题:

  1. 有没有办法只把 使用的图标类带到我的转换。CSS？因为现在它承载了 字体-太棒了，无礼的所有类

  2. 附加: 有没有可能 重新编译的字体与 使用的图标类以某种方式使其在生产使用中变得更小？

如果我能从上面的第一条中得到一些建议，那就太棒了。

谢谢。

36205 次浏览
小开

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).

The custom download also includes all CSS, LESS, SCSS and SASS code!

小开
最佳答案

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.

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.

Fontello is 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 is very good but IcoMoon is even more awesome.

小开

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 @extend the font-awesome classes.

Personally, I do this, and don't actually use the classes in the markup, and just use selectors to the relevant elements and @extend them with these classes.

Example:

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...


// _core.scss
%#{$fa-css-prefix} {
...
}

Then in your scss

a.search {
@extend %fa;
@extend %fa-search;
}

Et voila.

小开

I use LESS and not SASS so you might have to adapt your implementation.

Environment:

  • Font awesome 4.5.0 (current version)
  • Ubuntu 14.04 LTS
  • bash

Use this to generate the list of Unicode character numbers that you need:

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

In Unicode ranges enter the comma separated values from above.

Then to remove unnecessary stuff from the CSS:

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

You'll need to open less/font-awesome/icons.less and paste the output from the grep into the file.

小开

Fontastic worked 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.

小开

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/

小开

All the other optimization tools here are browser-based. If you're looking for something that can be easily automated and run locally, fontite might be the best option.

You'd list the icons you're using in the TOML config file. It will create the CSS with just those classes, as well as packing only those icons into your final font file. You can even combine icons from Font Awesome Brands, Font Awesome Solid, etc. into the same CSS and font files.

小开

I think subset-iconfont meet exactly your needs. The purpose of this package is to subset from several icon font packages and use the latest fontawesome css/scss styles. To fit your need, you can do it in a few lines:

npm install --save-dev subset-iconfont @fortawesome/fontawesome-free

then


import { FaFreeProvider } from 'subset-iconfont';


const fa = new FaFreeProvider (['plus', 'clock', '500px'], {
formats: ['ttf', 'woff2'],
});


fa.makeFonts('./outputDir').then((result) => {
console.log('Done!');
});

Then in folder ./outputDir find the result, open the generated index.html to see how to use it.

Besides, you can also subset from some other iconfont packages and use the subset result in FontAwesome style.

P.S., I'm the author of the package.


提交答案