Question

是否可以使SASS仅添加使用过的图标的代码？因为这会减少CSS文件的大小，

我从一个类似的问题中看到了http://fontello.com/解决方案，但我想知道是否有办法用字体真棒，

修改因为有一些误解，我想澄清我想知道的是： 是否可以告诉SASS他应该编辑哪些图标？

Answer 1

如何告诉FA编译什么

使用SCSS（SASS CSS形式语法）

下载并解压缩font-awesome-4.x.zip
导航至./scss
打开_icons.scss
删除所需的字形

前：

.#{$fa-css-prefix}-times:before { content: $fa-var-times; }
.#{$fa-css-prefix}-search-plus:before { content: $fa-var-search-plus; }
.#{$fa-css-prefix}-search-minus:before { content: $fa-var-search-minus; }
.#{$fa-css-prefix}-power-off:before { content: $fa-var-power-off; }
.#{$fa-css-prefix}-signal:before { content: $fa-var-signal; }
.#{$fa-css-prefix}-gear:before,

每一行代表一个字形。删除不使用的行。

以缩小版或常规格式将./font-awesome.scss重新编译为../css。

Answer 2

我使用了https://github.com/FortAwesome/Font-Awesome

主文件包含：

import "variables";
import "mixins";
import "path";
import "core";
import "larger";
import "fixed-width";
import "list";
import "bordered-pulled";
import "animated";
import "rotated-flipped";
import "stacked";
import "icons";

你必须更改文件_icons.scss，要使SASS只添加使用过的图标的代码。使用图标更改

. # {$ fa-css-prefix} -glass: before {content: $ fa-var-glass; }

在mixins上：

 mixin icon-glass () {
    . # {$ fa-css-prefix} -glass: before {content: $ fa-var-glass; }
}

现在使用mixinx，您只能使用图标来应用：

@include icon-glass();

您还可以禁用/包含文件

import "larger";
import "fixed-width";
import "list";
import "bordered-pulled";
import "animated";
import "rotated-flipped";

这是解决问题的最简单方法

SASS Optimize Font Awesome仅适用于已使用的课程

2 个答案: