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 fa-icon()

的mixin

Custom 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

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

在你的情况下：

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

Answer 3

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

选项一

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

Answer 4

@import“ path_name / @ fortawesome / fontawesome-free / scss / fontawesome”；

.class-name{
    &::before {
      @include fa-icon;
      font-family: "Font Awesome 5 Free";
      content: fa-content($fa-var-pencil);
    }
}

在fontawesome.scss中的

：mixin @include fa-icon放置所有属性图标必需的。

在fontawesome的variables.scss中，函数fa-content格式的unquote字体代码为：

在varaibles.scss中，每个图标都具有可变内容，其代码就像铅笔一样
$ fa-var-pencil：\ f040;

只需添加字体系列：字体家族：“ Font Awesome 5 Free”；要么字体家族：“ Font Awesome 5 Pro”；要么字体家族：“ Font Awesome 5 solid”；要么字体家族：“ Font Awesome 5 Regular”；要么字体家族：“ Font Awesome 5 light”；要么字体家族：“ Font Awesome 5品牌”；或

有关所有可用字体的信息，请查看fontawesome的webfonts目录

Answer 5

从Font Awesome 5.x开始，使用npm软件包（@fortawesome/fontawesome-free）的实现者可以通过利用该发行版中随附的SCSS文件来实现此目标：

/node_modules/@fortawesome/fontawesome-free/scss/

实施

首先，导入适当的文件：

@import "../node_modules/@fortawesome/fontawesome-free/scss/_mixins.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/_variables.scss";
@import "../node_modules/@fortawesome/fontawesome-free/scss/regular.scss";

然后，对于您的实际类，包括fa-icon mixin，适当的字体系列以及要实现的图标变量：

.selector {
  &::before {
    @include fa-icon;
    font-family               : 'Font Awesome 5 Free';
    content                   : fa-content($fa-var-stack-overflow);
  }
}

注意： fa-content()函数是_variables.scss的一部分，并将unicode输出包装在引号中。

限制

Regular 和 Solid 的免费版本的字体家族名称相同（“ Font Awesome 5 Free”），因此，如果要混合使用，可能会引起歧义两个字体集中的图标。如果是这样，您可能需要为 Solid 创建自己的字体声明，以消除名称的歧义。

学分和进一步阅读

CSS Pseudo-elements介绍了如何手动构建CSS类，该类涵盖了此处使用的基本概念。
@Christophe-Gougeon's answer涵盖了相同的基本材料，尽管我认为该方法值得更仔细和详细的说明。
@Peter-J-Harrison's answer提供了一个有用的mixin，可以进一步简化语法。

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

5 个答案:

相关文件

实施

限制

学分和进一步阅读