针对仅使用的类优化Font Awesome

CSS

逆天小卤蛋Green

2020-03-18

我正在使用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上找到一些技巧，那就足够了。

谢谢。

第2023篇《针对仅使用的类优化Font Awesome》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答

Mandy猴子阿飞 2020.03.18

好吧，当然可以对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;
}

等等。

前端Stafan阿飞 2020.03.18

Sass不知道您实际上正在使用什么类。您必须手动调整自身大小。打开提供的.scss文件，并破解所有不需要的内容。

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

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

A蛋蛋 2020.03.18

fontello非常好，但IcoMoon更加出色。

梅小小 2020.03.18

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

Near飞云 2020.03.18

现在，您可以将Font-awesome中的图标子集用于生产。现在有一个名为icnfnt的官方子设置工具，该工具可让您从最新版本的Font-awesome（v3.0.2）中挑选和打包所需的图标。

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android