如何在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

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

用法

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

'pencil'是这里引用的图标的名称(减去fa-):https://fortawesome.github.io/Font-Awesome/icons/

Font Awesome 5的更新:

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

Answer 2

我最终解决了。有几种方法可以做到这一点，两者都非常相似：

选项一

通过向其中添加参数来编辑现有的@mixin fa-icon()，例如，它看起来像这样：

@mixin fa-icon($icon) {
  display: inline-block;
  font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration
  font-size: inherit; // can't have font-size inherit on line above, so need to override
  text-rendering: auto; // optimizelegibility throws things off #1094
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0); // ensures no half-pixel rendering in firefox
  @extend .fa;
  @extend .fa-#{$icon};

}

用法：

.class-name {
    @include fa-icon(facebook);
    font-size: 50px;    
}

选项2：

使用这个自定义 mixin：http://genesy.me/font-awesome-mixin/