欢迎来到 Web Awesome，最大最好的开源 web 组件库。

快速切换样式

您是否曾经想过要像超人一样，通过在电话亭里待一分钟来改变自己的外观？现在您可以做到！或者至少可以改变您的图标…

现在，使用 6 版，您可以快速**切换用于您的网站或应用程序的全局默认样式**。以下是如何设置您的项目以执行此操作。

添加 `fa` 类

您需要添加 fa 类，并省略任何来自您的图标的样式类，例如

<!-- add `fa` and leave off style classes -->
<i class="fa fa-mask"></i>

使用网络字体快速切换样式

要切换 Font Awesome 的任何核心样式或系列，您需要在您的应用程序或网站 CSS 的 :root 上设置几个 CSS 自定义属性，例如

/* For Classic Solid */
:root {
  --fa-style-family: var(--fa-style-family-classic);
  --fa-style: 900;
}

/* For Sharp Solid */
:root {
  --fa-style-family: var(--fa-style-family-sharp);
  --fa-style: 900;
}

更改图标系列

您可以通过设置 --fa-style-family CSS 自定义属性，轻松更改您希望项目使用的图标系列。以下是当前的 Font Awesome 系列

系列	可用性	CSS 自定义属性	接受的值
经典	免费和付费选项	`--fa-style-family`	`--fa-style-family-classic`
锐利	仅限付费	`--fa-style-family`	`--fa-style-family-sharp`

更改图标样式

要更改系列中特定样式的图标，请使用 --fa-style CSS 自定义属性。

更改 --fa-style 的值以匹配您想要的字体粗细。这里有一个方便的参考

样式	可用性	接受的值（字体粗细）
实心	免费计划	900
常规	仅限付费	400
浅色	仅限付费	300
细线	仅限付费	100
双色调	仅限付费	900

注意：fa 类最初设置为默认使用实心样式。

如果您在图标上设置了除 fa 默认样式之外的样式，该样式将覆盖该默认样式。以下是一个示例

<!-- with just the default `fa` -->
<i class="fa fa-mask"></i>

<!-- with the default `fa` and the `fa-regular` style -->
<i class="fa fa-regular fa-mask"></i>

将您的默认设置设为双色调

双色调有点特殊，因为它由两部分组成。如果您想将双色调用作您的默认值，您**需要使用 Sass 或 Less 等预处理器**。

添加根 CSS 变量，但将 --fa-style-family 设置为双色调，例如

:root {
  --fa-style-family: var(--fa-style-family-duotone);
  --fa-style: 900;
}

然后扩展 fa 类以包含双色调类

使用 Sass

.fa {
  @extend .fa-duotone;
}

使用 Less

.fa {
  &:extend(.fa-duotone all);
}

使用 SVG+JS 快速切换样式

为了使用 SVG+JS 快速切换，您需要将 data-style-default 和 data-family-default 配置设置设置为您想要设置为默认的样式。

如果您使用的是 <script> 标签，您将在标签中设置 data-style-default 和 data-family-default 设置。

<script src="path_to_fontawesome_javascript" data-style-default="desired_style" data-family-default="desired_family"></script>

// For example, a default classic light style will look like this
<script src="path_to_fontawesome_javascript" data-style-default="light" data-family-default="classic"></script>

// Another example, a default sharp solid style will look like this
<script src="path_to_fontawesome_javascript" data-style-default="solid" data-family-default="sharp"></script>

如果您无法向 <script> 标签添加任何属性，您可以像这样设置配置

<html>
  <head>
    <script>
      <!-- The settings you provide will be merged with the default settings -->
      FontAwesomeConfig = {
        styleDefault: 'light',
        familyDefault: 'classic'
      }
    </script>
    <script src="path_to_fontawesome_javascript"></script>
  </head>
  <body></body>
</html>