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

How do you use the @include to use a Font awesome icon in you sass file.

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

E.g - If I wanted to use this icon: http://fortawesome.github.io/Font-Awesome/icon/pencil/

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

I understand that you can use it in your HTML like this:

我知道您可以在HTML中使用它,如下所示:

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

However I want to be able to do the following or something similar:

但是我希望能够做到以下或类似的事情:

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

What is the default/proper way to do this?

默认/正确的方法是什么?

3 个解决方案

#1

Not sure if anyone will find this helpful but I created a mixin that extended the .fa class rather than editing the existing @mixin fa-icon()

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

Custom Mixin

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

Usage

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

Where 'pencil' is the name of the icon referenced here (minus the fa-): https://fortawesome.github.io/Font-Awesome/icons/

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

Update for Font Awesome 5:

Font Awesome 5的更新:

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

#2

The most simple way is to use @extend.

最简单的方法是使用@extend。

In you case:

在你的情况下:

.class-name {
    @extend: .fa-pencil;
}

#3

I ended up working it out. There are a couple of ways to do it both very similar:

我最终解决了这个问题。有几种方法可以做到非常相似:

Option one

Edit the existing @mixin fa-icon() by adding a parameter into it e.g it would look like this:

通过在其中添加一个参数来编辑现有的@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};

}

Usage:

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

Option 2:

Use this custom mixin: http://genesy.me/font-awesome-mixin/

使用此自定义mixin:http://genesy.me/font-awesome-mixin/

#1