logo标签列表

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

cssfontsfont-awesome
7
如何在sass文件中使用@include来使用Font Awesome图标。
例如- 如果我想要使用这个图标： http://fortawesome.github.io/Font-Awesome/icon/pencil/ 我了解你可以像这样在HTML中使用它：
<i class="fa fa-pencil"></i>

然而，我希望能够做到以下类似的事情：
.class-name {
    @include: fa-icon(fa-pencil);
}

这该怎么做才是默认/正确的方式呢？
这里已经有一个帖子可以帮助你解决这个问题：https://dev59.com/p2Ml5IYBdhLWcg3wuI7p - EugenSunic
2
这不是我想要的方式，我想要使用mixin。看起来我可能需要使用自定义mixin，因为默认情况下似乎无法按照我的意愿实现。 - ifusion
5个回答
10

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

自定义Mixin

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

用法

.foo:before {
    @include icon(pencil);
}
< p > < em > 这里引用了一个图标，它的名称为“pencil”（不包括< code >fa -）：https://fortawesome.github.io/Font-Awesome/icons/

Font Awesome 5 的更新：

@mixin icon($icon) {
  @include fa-icon;
  @extend .fas;
  @extend .fa-#{$icon};
}
2
最简单的方法是使用@extend。
在你的情况下：
.class-name {
    @extend: .fa-pencil;
}
0

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

选项一

通过在现有的@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/

0

@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 函数格式化未引用的字体代码：

在 variables.scss 中，每个图标都有一个变量内容，例如铅笔
$fa-var-pencil: \f040;

只需添加字体系列： font-family: "Font Awesome 5 Free"; 或 font-family: "Font Awesome 5 Pro"; 或 font-family: "Font Awesome 5 solid"; 或 font-family: "Font Awesome 5 regular"; 或 font-family: "Font Awesome 5 light"; 或 font-family: "Font Awesome 5 brands"; 或

要查看所有可用字体，请查看 fontawesome 的 webfonts 目录。

0

从Font Awesome 5.x开始，使用npm包（@fortawesome/fontawesome-free）的实施者可以利用该分发中包含的SCSS文件来实现此目标：

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

相关文件

  • _mixins.scss: 提供了一个 fa-icon mixin，包含所需的基础样式。
  • _variables.scss: 为每个图标提供变量，对应其 Unicode 字符（例如，$fa-var-stack-overflow 对应 \f16c）。
  • regular.scss、solid.scss 等：为每种字体提供 @font-face 声明。

实现方式

首先，导入相应的文件：

@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` 创建自己的字体声明，以消除名称的歧义。
致谢和进一步阅读
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接