Sass(Scss)

你在你的项目中使用 SCSS 作为 CSS 预处理器吗？ 没问题，如果您希望将我们的样式导入您的工作流程，Font Awesome 有一个 SCSS 版本。

我们将介绍选择项目所需的 SCSS 文件、将 Font Awesome 添加到编译中、使用 Mixins 将代码注入类等的基础知识。

#开始之前

确保你...

• 下载 Font Awesome v5 特定于 Web 的文件并将它们放在手边。
• 使用 Sass 设置一个项目。

#这是如何组织的？

以下是有关专门为 SCSS 制作的 mixin 和文件的一些详细信息。

#为你的编译添加 Font Awesome

将 scss 文件夹复制到您的项目中。 然后将整个 webfonts 文件夹复制到提供静态文件的项目中。

打开项目的 scss/variables.scss 并编辑 $fa-font-path 变量以指向放置 webfonts 文件夹的位置。

$fa-font-path: "../webfonts";

通过在主 SCSS 文件中添加 @import "scss/fontawesome.scss" 来导入 Font Awesome。 此外，在您的主 SCSS 文件中导入一种或多种样式 @import "scss/solid.scss" 。 编译您的代码并开始在您的项目中使用这些新图标！

#注意那些文件路径！

你可能已经知道这一点，但我们似乎总是忘记它。 字体路径是相对于你编译的 CSS 目录。 确保将 webfonts 目录放在相对于最终 CSS 所在位置的位置。

你可以使用@include fa-icon 将事物设置为图标。 使用@extend.fas 以 Solid 样式创建图标。 导入其他样式以使用其他前缀。 使用 fa-content 和变量名可以更轻松地包含内容值。

@import "./fontawesome/scss/fontawesome.scss";
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

.user {
  @extend %fa-icon;
  @extend .fas;

  &:before {
    content: fa-content($fa-var-user);
  }
}

.twitter {
  @extend %fa-icon;
  @extend .fab;

  &:before {
    content: fa-content($fa-var-twitter);
  }
}