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

Sass (SCSS) 和 Less

我们努力让使用 Sass 或 Less 升级到版本 6 变得平稳无痛，但需要几个步骤，并需要注意一些事项。

重大变更

我们引入了一些更改，这些更改不会在生产或已发布的项目级别造成中断，但在切换到版本 6 的 Sass 和 Less 时，可能会在编译步骤中造成中断。

变化之处	更改原因	您应该采取的措施
添加了新的 `_duotone-icons` 部分	这使我们的双色调图标与我们定义、循环遍历和渲染单个图标 CSS 规则的方式保持一致	如果您使用的是双色调图标，请确保在 Sass/Less 编译时包含此新的双色调部分
删除了 `fa-icon-rotate` 和 `fa-icon-flip` 混合器	鉴于版本 6 的浏览器支持，这些不再需要	更新 Sass/Less 文件中使用这些混合器的任何引用
删除了 `fa-display`、`fa-font-size`、`fa-font-size-base`、`fa-version` 变量	这些变量没有被 Font Awesome 的样式工具包积极使用	更新 Sass/Less 文件中使用这些变量的任何引用
将 `_larger` 文件重命名为 `_sizing`	这更好地描述了此部分中包含的大小为基础的实用程序	更新对旧部分名称的所有引用以指向新名称
删除了 CSS 回退和供应商前缀	许多现代 CSS 工作流根据各个项目的浏览器支持提供自己的回退	如果您需要回退或语法来支持特定的浏览器，我们建议在您的项目中实施 Autoprefixer
仅限 Sass (SCSS)：添加了新的 `functions` 部分	为了修复 Dart Sass 的弃用，并保持与旧 Sass 库的兼容性	如果您引用了单个 scss 部分，例如 `variables` 或 `mixins`，请确保在之前包含 `functions` 部分

升级到版本 6 的 Sass 或 Less

如果您使用的是 Font Awesome 5 的预处理器资产，则需要替换并断开这些旧文件，然后将新的版本 6 文件放置并连接到您的项目中。

1. 从您的项目中删除所有版本 5 文件

在您的项目中找到 Font Awesome 版本 5 的 Sass/Less 文件——这些文件很可能分别位于 scss 或 less 文件夹中。找到后，删除这些文件以防止在 Sass/Less 编译时加载两个不同版本的 Font Awesome 而导致的冲突。

接下来，您需要从项目中删除 Font Awesome 版本 5 的 Web 字体——这些文件很可能位于您在设置 v5 时复制到 webfonts 文件夹中的位置。

2. 下载版本 6 的 Sass/Less

接下来，下载版本 6 的 Web 版并解压缩文件和图标。然后，您可以按照一些熟悉的步骤将 Font Awesome 6 添加到您的 Sass 或 Less 编译中。

3. 更新版本 5 的引用以指向版本 6 文件

如果您的项目的 Sass 或 Less 有一个包含 Font Awesome 文件的自定义编译，那么您应该看到预处理器使用新的版本 6 资产进行编译。

但如果您使用的是双色调图标，则需要添加新的 _duotone-icons 部分，因此您将有两个双色调文件，如下所示

scss
less

// You probably already include the core styles
@import "./fontawesome/scss/fontawesome.scss";

// For Duotones you need both of these files
@import "./fontawesome/scss/duotone.scss";
@import "./fontawesome/scss/\_duotone-icons.scss";

// You can include all the other styles the same as before
@import "./fontawesome/scss/solid.scss";
@import "./fontawesome/scss/brands.scss";

// You probably already include the core styles
@import "./fontawesome/less/fontawesome.less";

// For Duotones you need both of these files
@import "./fontawesome/less/duotone.less";
@import "./fontawesome/less/_duotone-icons.less";

// You can include all the other styles the same as before
@import "./fontawesome/less/solid.less";
@import "./fontawesome/less/brands.less";

如果您使用 Font Awesome Sass/Less 编译直接输出 CSS，则可能需要更新您旧的版本 5 引用，以指向您已编译的新版本 6 资产。

<head>
  <!-- all.css loads all styles and icons -->
  <link
    href="/your_path_to_version_6_compiled_files/css/fontawesome.css"
    rel="stylesheet"
  />
</head>
<body>
  <!-- Your icons should show up just as before. -->
</body>

一切就绪！

您的项目现在将加载版本 6，并使用我们最新最好的图标和选项来渲染任何现有的图标。遇到问题了吗？查看我们的故障排除指南，获取有关在 Web 上使用 Font Awesome 的常见问题的答案。

您可能想查看我们在版本 6 中添加的大量新图标，包括新的锐利系列和细线样式，或者查看版本 6 的所有新样式选项。