Turbolinks

Font Awesome 与最常与 Rails 配对的工具很好地集成，通过交换 <body> 并合并 HTML 页面的 <head> 来实现更快的页面性能

#集成挑战

在你安装了带有 JS 版本的 Font Awesome 的 SVG，并在你的 Rails 应用程序中加载了你的第一个页面之后，会发生一些事情。

Font Awesome 将搜索任何 <i> 元素并将它们替换为 <svg> 元素。
它将创建一个“MutationObserver”来监视页面中的变化以进行未来的替换。

当 Turbolinks 在导航发生后用新内容替换页面的 <body> 时，Font Awesome 会自动将此 MutationObserver 重新连接到新内容。

这就是问题所在：**在图标快速出现之前，有一个闪烁的图标丢失。**这看起来很糟糕，但我们可以轻松修复它。

设置 mutateApproach，提供了一种方法，可以在 Turbolinks 收到新主体后立即渲染它们，从而跳过丢失图标的闪现。

#使用导轨

我们首先假设您已经 [安装了 Turbolinks ()，并在您的 Rails 应用程序中对其进行了配置。

#使用我们的 CDN 或您自己的外部主机

如果您通过修改 Rails 布局安装了 Font Awesome，您可能已经包含了一个 <script> 标签。

添加data-mutate-approach="sync"。

#使用资产管道

安装 Font Awesome 的另一种常见方法是将源文件放在 vendors/assets/javascripts 目录中，然后修改 app/assets/javascripts/application.js 以包含 //= require fontawesome/all。然后，Font Awesome 将包含在您的 Rails 布局已经包含的“应用程序”包中。

您可以在布局中添加一个 <script> 标签来更改配置。

但也许最好的方法是直接在 application.js 文件中配置它。

#使用 Webpacker 和 `@fortawesome/fontawesome-svg-core`

如果您使用 Webpacker 和 NPM 安装 Font Awesome，您可以使用 tree-shaking 对图标进行子集化。

您的安装可能看起来像这样，在这种情况下，我们只需使用 API 更改配置即可。