跳至内容
Font Awesome 文档
Web Awesome 问世，它是最大的、最好的开源 Web 组件库。
立即预订！

Sass (SCSS)

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

我们将介绍选择项目所需的 SCSS 文件的基础知识，将 Font Awesome 添加到您的编译，使用混合注入代码到类以及更多内容。

开始设置

您将在 Font Awesome 下载 的 fontawesome6 目录中找到所需的一切。以下是专门为 SCSS 制定的文件列表。您可以将它们全部添加到您的项目中，也可以只选择您需要的文件。

文件功能
fontawesome.scss主要的 Font Awesome 编译
brands.scss品牌图标样式
solid.scss实心图标样式
regular.scss常规图标样式
light.scss浅色图标样式
thin.scss细线图标样式
sharp-solid.scss锐利实心图标样式
sharp-regular.scss锐利常规图标样式
sharp-light.scss锐利浅色图标样式
sharp-thin.scss锐利细线图标样式
duotone.scss双色调 图标样式
_duotone-icons.scss双色调图标类
_variables.scss定义贯穿样式使用的变量的地方
_mixins.scss贯穿样式/图标定义使用的实用程序
_core.scss基本图标引用类语法和定义
_sizing.scss图标大小 支持样式
_fixed-width.scss固定宽度 图标支持样式
_list.scss列表中的图标 支持样式
_bordered-pulled.scss带边框和拉伸的 图标支持样式
_animated.scss动画 图标支持样式
_rotated-flipped.scss旋转 图标支持样式
_stacked.scss堆叠 图标支持样式
_icons.scss所有图标定义
_screen-reader.scss屏幕阅读器专用和 无障碍性 支持样式
_custom-icons.scss包含 工具包下载 中的自定义图标（如果您正在使用工具包）

将 Font Awesome 添加到您的编译

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

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

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

在您的主 SCSS 编译文件中，通过添加核心样式文件 @import "scss/fontawesome.scss" 来导入 Font Awesome。然后导入一个或多个样式。

这是一个简单的示例

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';


// our project needs Solid + Brands
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';

如果您想使用更多样式，请添加更多样式导入

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';


// our project needs Classic Solid, Brands, and Sharp Solid
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';
@import './fontawesome/scss/sharp-solid.scss';

使用双色调图标

如果项目使用双色调图标，则需要 @import 两个单独的文件。

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';


// our project needs Duotone - which requires both of the following files
@import './fontawesome/scss/duotone.scss';
@import './fontawesome/scss/\_duotone-icons.scss';

使用下载的工具包

从 6.4 版开始，您现在可以像使用 Font Awesome 一样下载工具包进行编译和自行托管！要下载工具包，请确保设置中的工具包版本设置为“最新 6.x”，或者如果您选择了特定版本，则它至少需要为 6.4。然后，在工具包的“设置”选项卡中，您将看到下载选项。您的工具包下载将包含所有 上面提到的 SCSS 文件。

下载的工具包中的自定义图标

如果您在工具包中包含自定义图标，它们将作为工具包下载中的附加文件包含。

文件路径文件的作用
/webfonts/custom-icons.woff
/webfonts/custom-icons.ttf		自定义图标字体，以 WOFF2 和 TTF 格式提供
/scss/custom-icons.scssSass (SCSS) 预处理器片段，用于使用 Web 字体显示自定义图标

以下是一个简单的示例，该示例遵循 上述编译步骤 以及自定义图标

// importing core styling file
@import './fontawesome/scss/fontawesome.scss';


//  importing Font Awesome styles
@import './fontawesome/scss/solid.scss';
@import './fontawesome/scss/brands.scss';


// importing a kit's custom icons
@import './fontawesome/scss/custom-icons.scss';

添加图标

在添加了上面的导入并设置了包含 Font Awesome 的编译后的 CSS 并 在您的项目中引用 后，您可以 将图标添加到项目的 HTML 中。

以下是如何使用编译后的托管 CSS 引用图标的示例

<head>
  <!--load your compiled CSS (including Font Awesome) -->
  <link
    href="/your-path-to-your-compiled-css-including-fontawesome/file.css"
    rel="stylesheet"
  />
</head>
<body>
  <!-- This example uses <i> element with:
  1. the `fa-solid` style class for solid style
  2. the `user` icon with the `fa-` prefix -->
  <i class="fa-solid fa-user"></i>


  <!-- Or you can use a <span> element, with classes applied in the same way -->


  <span class="fa-solid fa-user"></span>
</body>

基于 SCSS 的自定义 CSS 规则

如果您想使用任何 SCSS 混合 或实用程序，您可以利用我们的 CSS 伪元素 方法将图标添加到您的项目中。当无法更改项目的 HTML 时，这种方法也很有用。

使用 @include fa-icon- 和 @include fa-family- 混合，您可以轻松地使用特定于项目的 CSS 选择器生成自定义 CSS 伪元素规则。

// Solid style of user
.user {
  @include fa-icon-solid($fa-var-user);
}


// Regular style of triangle-exclamation
.triangle-exclamation {
  @include fa-icon-regular($fa-var-triangle-exclamation);
}


// Light style of newspaper
.newspaper {
  @include fa-icon-light($fa-var-newspaper);
}


// Thin style of paintbrush-fine
.paintbrush-fine {
  @include fa-icon-thin($fa-var-paintbrush-fine);
}


// Duotone style of camera-retro
.camera-retro {
  @include fa-icon-duotone($fa-var-camera-retro);
}


// Twitter brand icon
.twitter {
  @include fa-icon-brands($fa-var-twitter);
}


// Sharp Solid style of trash
.trash {
  @include fa-icon-solid($fa-var-trash);
  @include fa-family-sharp(); // define Sharp family
}


// Sharp Regular style of trash
.trash {
  @include fa-icon-regular($fa-var-trash);
  @include fa-family-sharp(); // define Sharp family
}


// Classic Solid style of trash
.trash {
  @include fa-icon-solid($fa-var-trash);
  @include fa-family-classic(


  ); // explicity setting Classic family (optional since this is Font Awesome's default)
}

样式混合

要使用样式混合，您需要

  1. 选择适合您所需样式的混合。
  2. 传入要显示的图标的 SCSS 变量。
样式混合可用性呈现的样式
fa-icon-brands()免费计划品牌
fa-icon-solid()免费计划实心
fa-icon-regular()专业版常规
fa-icon-light()专业版浅色
fa-icon-thin()专业版细线
fa-icon-duotone()专业版双色调

字体族混合

如果您使用我们的 mixin 在特定系列中渲染图标，例如我们的Sharp 风格系列，您需要引用正确的系列 mixin（例如 @include fa-family-sharp）。Classic 是我们的默认风格系列，因此无需使用系列 mixin 设置它，除非您试图显式设置以覆盖之前的系列。

系列 Mixin可用性呈现的样式
fa-family-classic()免费计划Classic 与其他风格 mixin 一起使用时
fa-family-sharp()专业版Sharp 与其他风格 mixin 一起使用时

更手动的方式

如果您希望在编写样式规则时采用更可定制的方法，我们已将风格 mixin 中使用的实用程序提供给您，以获得相同的渲染结果。

要编写手动规则，您需要

  1. 通过添加 @extend %fa-icon; 来获取图标的核心设置样式。
  2. 使用 @extend .fa-solid; 包含在 Solid 风格中渲染图标的样式（其他风格的语法类似）。
  3. 使用 @extend .fa-classic; 或 @extend .fa-sharp; 包含在特定系列中渲染图标的样式（Classic 默认设置）。
  4. 使用 fa-content 和变量名使包含图标的 Unicode 值更容易。这与通过伪元素添加图标 的语法类似。
// Solid style of user
.user {
  @extend %fa-icon;
  @extend .fa-solid;


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


// Regular style of triangle-exclamation
.triangle-exclamation {
  @extend %fa-icon;
  @extend .fa-regular;


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


// Light style of newspaper
.newspaper {
  @extend %fa-icon;
  @extend .fa-light;


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


// Thin style of paintbrush-fine
.paintbrush-fine {
  @extend %fa-icon;
  @extend .fa-thin;


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


// Duotone style of camera-retro
.camera-retro {
  @extend %fa-icon;
  @extend .fa-duotone;


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


// Twitter brand icon
.twitter {
  @extend %fa-icon;
  @extend .fa-brands;


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


// Sharp Solid style of trash
.trash {
  @extend %fa-icon;
  @extend .fa-solid;
  @extend .fa-sharp; // define Sharp family


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


// Classic Solid style of trash
.trash {
  @extend %fa-icon;
  @extend .fa-solid;
  @extend .fa-classic; // explicity setting Classic family (optional since this is Font Awesome's default)


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

包含的混合

实用程序它能做什么
fa-sr-only()一个 mixin，它在视觉上隐藏包含图标文本等效项的元素，同时保持辅助技术可访问。
fa-sr-only-focusable()一个 mixin，与 fa-sr-only() 一起使用，当元素被聚焦时（例如，由键盘用户）显示该元素。
fa-icon()一个 mixin，包含图标的基本样式设置（不包括图标的样式和特定名称/unicode）编译。
fa-icon-solid()
fa-icon-regular()
fa-icon-light()
fa-icon-thin()
fa-icon-duotone()
fa-icon-brands()		包含图标的基本样式设置以及特定样式以在其中渲染图标的 mixin。
fa-family-sharp()
fa-family-classic()		当与 fa-icon- 样式 mixin 结合使用时，定义要使用的风格系列的 mixin。
fa-content()一个 mixin，使通过 CSS content 属性引用图标变得更容易。
必须传入图标的变量（例如 fa-content($fa-var-user);）。

使用变量简化和自定义

Font Awesome 的 SCSS 版本还利用了几个 SCSS 变量，这些变量允许更轻松地设置和自定义我们的样式工具包。

变量它能做什么
$fa-css-prefix设置所有样式工具包 CSS 规则（例如 fa-lg）+ 图标引用类（例如 fa-user）中使用的前缀（默认设置为 fa）。
$fa-style设置默认图标样式（使用@font-face 权重）。
$fa-style-family设置使用的默认 font-family。
$fa-display设置display 属性（默认设置为 inline-block）以渲染图标。
$fa-font-display为 Font Awesome 的图标字体设置font-display 属性。
$fa-fw-width为所有固定宽度 图标设置width 属性。
$fa-inverse设置 .fa-inverse 的color 属性。
$fa-border-color设置带边框的图标 中使用的border-color 属性。
$fa-border-padding设置带边框的图标 中使用的padding 属性。
$fa-border-radius设置带边框的图标 中使用的border-radius 属性。
$fa-border-style设置带边框的图标 中使用的border-style 属性。
$fa-border-width设置带边框的图标 中使用的border-width 属性。
$fa-li-width为 fa-li 元素设置width 属性，用于样式化列表中的图标 图标。
$fa-li-margin为 fa-li 元素设置margin-right 属性，用于样式化列表中的图标 图标。
$fa-pull-margin为拉伸的图标 图标设置margin-left/margin-right 属性。
$fa-primary-opacity设置双色调 图标的主层不透明度。
$fa-secondary-opacity设置双色调 图标的次层不透明度。
$fa-size-scale-base设置所有其他相对大小 步骤所基于的基本步长。
$fa-size-scale-2xs使用 .fa-2xs相对调整图标大小 时，设置使用的步长大小。
$fa-size-scale-xs使用 .fa-xs相对调整图标大小 时，设置使用的步长大小。
$fa-size-scale-sm使用 .fa-sm相对调整图标大小 时，设置使用的步长大小。
$fa-size-scale-lg使用 .fa-lg相对调整图标大小 时，设置使用的步长大小。
$fa-size-scale-xl使用 .fa-xl相对调整图标大小 时，设置使用的步长大小。
$fa-size-scale-2xl使用 .fa-2xl相对调整图标大小 时，设置使用的步长大小。
$fa-stack-vertical-align设置堆叠图标 的vertical-align 属性。
$fa-stack-width设置堆叠图标 的width 属性。
$fa-stack-z-index设置堆叠图标 的z-index 属性。
$fa-font-path设置 Font Awesome 的webfonts 文件夹和资产的位置。