SASS 仅使用优化 Font Awesome 类

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; }

关于混合：

 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 仅使用优化 Font Awesome 类

SASS Optimize Font Awesome for only used classes

css

sass

font-awesome