css - 如何在 sass 文件中包含 Font Awesome 图标？

Question

如何使用 @include 在 sass 文件中使用 Font awesome 图标。

例如 - 如果我想使用这个图标: http://fortawesome.github.io/Font-Awesome/icon/pencil/

我知道您可以像这样在 HTML 中使用它:

<i class="fa fa-pencil"></i>

但是我希望能够执行以下操作或类似操作:

.class-name {
    @include: fa-icon(fa-pencil);
}

执行此操作的默认/正确方法是什么？

Answer 1

不确定是否有人会觉得这有帮助，但我创建了一个扩展 .fa 类的 mixin，而不是编辑现有的 @mixin fa-icon()

自定义混合

@mixin icon($icon) {
    @include fa-icon;
    @extend .fa;
    @extend .fa-#{$icon}:before;
}

用法

.foo:before {
    @include icon(pencil);
}

“铅笔”是此处引用的图标名称(减去 fa-):https://fortawesome.github.io/Font-Awesome/icons/

Font Awesome 5 更新:

@mixin icon($icon) {
  @include fa-icon;
  @extend .fas;
  @extend .fa-#{$icon};
}