跳至内容
Font Awesome 文档
欢迎 Web Awesome，最大的、最好的开源 Web 组件库。
今天预订！

升级到 6.0 版

无论您是 FA 新手还是老手，我们都努力使升级到 6.0 版尽可能平稳便捷。了解有关更改内容以及如何更新项目的更多信息。

6.0 版的新功能？

我们 在 Font Awesome 6 中添加了很多内容，包括

深入了解 6.0 版更改的细节

使用工具包时从 5.0 版升级

如果您使用的是 工具包，升级到 6.0 版应该会 fa-rabbit-running-快。

  1. 前往您的工具包设置。
  2. 从“版本”菜单中选择 6.0 版。
  3. 保存该设置更改。
  4. 喝杯咖啡，放松一下，您节省了这么多时间。
升级您的工具包

自托管时从 5.0 版升级

如果您目前正在自己托管 Font Awesome 5，或者使用包安装了 Font Awesome，则需要更换和断开旧的 5.0 版文件，然后将新的 6.0 版文件放置到您的项目中并连接它们。

1. 找到并删除项目中的所有 5.0 版文件

加载两个不同版本的 Font Awesome 可能会导致冲突，因此您需要找到旧文件的位置并将其删除。

找到 5.0 版文件的位置取决于您安装 Font Awesome 的方式。以下是一些可能的项目设置示例

Find the fontawesome files in your project directories:


project_root
|__assets
|__fontawesome
Example installed with npm


project_root
|__node_modules
    |__@fortawesome
        |__version_5_files

您可以安全地删除任何旧版本文件，因为您将在下一步中用新的 6.0 版文件替换它们。

2. 下载并安装 6.0 版

接下来，下载 6.0 版 并解压缩文件和图标，或将您的 Font Awesome 包/组件更新到 6.0 版，具体取决于最适合您的项目。

下载并放置到您的项目中

或更新包和组件

3. 更新指向 6.0 版文件的 5.0 版引用

您已删除旧的 5.0 版图标和文件，并添加了新的 6.0 版图标和文件，现在您需要更新旧的 5.0 版引用以指向您添加的新版本资产。

对于使用 HTML 模板的项目，您需要编辑模板 head 中的脚本或 CSS 链接。如果您使用的是 all.js 或 all.css，我们建议您切换到单独的样式以提高性能（如果您的项目允许）。

以下是如何添加 6.0 版 SVG + JS 文件的示例

<head>
  <!-- update any styles .js files you have linked -->
  <script defer src="/your_path_to_version_6_files/js/solid.js"></script>
  <script defer src="/your_path_to_version_6_files/js/brands.js"></script>


  <!-- update the core fontawesome.js file -->
  <script defer src="/your_path_to_version_6_files/js/fontawesome.js"></script>
</head>
<body>
  <!-- Your icons should show up just as before -->
</body>

以下是如何添加 6.0 版 Web Fonts + CSS 文件的示例

<head>
  <!-- update the core fontawesome file -->
  <link
    href="/your_path_to_version_6_files/css/fontawesome.css"
    rel="stylesheet"
  />


  <!-- update any styles .css files you have linked -->
  <link href="/your_path_to_version_6_files/css/solid.css" rel="stylesheet" />
  <link href="/your_path_to_version_6_files/css/brands.css" rel="stylesheet" />


  <!-- update existing v5 CSS to use v6 icons and assets -->
  <link href="/your-path-to-fontawesome/css/v5-font-face.css" rel="stylesheet" />
</head>
<body>
  <!-- Your icons should show up just as before -->
</body>

您还可以更新 all.js 或 all.css 文件，但我们建议您切换到使用单独的样式（如果可能），以提高性能

<head>
  <!-- update the all.css file -->
  <link href="/your_path_to_version_6_files/css/all.css" rel="stylesheet" />
</head>
<body>
  <!-- Your icons should show up just as before -->
</body>
<head>
  <!-- update the all.js file -->
  <script defer src="/your_path_to_version_6_files/js/all.js"></script>
</head>
<body>
  <!-- Your icons should show up just as before -->
</body>

如果您无法删除 Font Awesome 5

如果您无法从项目中删除 Font Awesome 的先前版本（例如，它捆绑在您使用的主题或插件中），务必确保您在包含项目 HTML <head> 中包含的先前版本之后，再包含 v6 文件。在包含 v5-font-face.css 实用程序时，这一点尤其重要。

<head>
  <!-- Example: A theme's CSS that uses an older version of Font Awesome that can't be removed -->
  <link href="/your_path_to_theme_that_uses_version_5_files" rel="stylesheet" />


  <!-- Add the base CSS plus Solid + Brands styles **after previous versions** -->
  <link href="/your_path_to_version_6_files/css/fontawesome.css" rel="stylesheet" />
  <link href="/your_path_to_version_6_files/css/brands.css" rel="stylesheet" />
  <link href="/your_path_to_version_6_files/css/solid.css" rel="stylesheet" />


  <!-- update existing v5 CSS to use v6 icons and assets **after previous versions** -->
  <link href="/your-path-to-fontawesome/css/v5-font-face.css" rel="stylesheet" />
</head>
<body>
  <!-- Your icons should show up and render using Font Awesome 6 -->
</body>

您已经完成设置！

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

您可能想查看我们在 6.0 版中添加的 大量新图标，包括新的 Sharp 系列 和 Thin 样式，或者查看 6.0 版的所有新的 样式选项。

从 4.0 版升级

需要从 4.0 版升级到 6.0 版？我们为您专门撰写了指南。查看 此处的 v4 升级说明。