为什么我的字体很棒的图标一开始显示的很大，然后更新到正确的大小？

Question

每次我刷新页面时，字体很棒的图标都会显示得很大。似乎在应用适当的大小之前加载了 css，因为在刷新后它显示很大，然后转到正确的大小。

我尝试了一些我在网上找到的解决方案，但没有一个奏效。

现在我回到了我有这些的地方：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebook } from '@fortawesome/free-brands-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faLinkedin } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons'

然后像这样使用它们：

<FontAwesomeIcon icon={faFacebook} color="white" size="2x"/>

我不需要导入任何 css，但我确实按照此链接进行了安装：

https://www.npmjs.com/package/@fortawesome/react-fontawesome

基本上我安装了那些：

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

如果有人能给我一个关于寻找什么的方向，那就太好了。

我的项目托管在 Github ( https://github.com/palomaschkrab/keto-ui ) 如果你想看到它发生，你可以使用“npm run dev”运行它并转到 localhost:3000/about_us。

Answer 1

当将 Font Awesome 图标与使用服务器端渲染的静态站点生成器（如 Gatsby.js 和 Next.js）一起使用时，这是一个非常常见的错误。原因是在加载 CSS 之前渲染图标。

您可以通过在根组件中手动加载 CSS 来解决此问题，然后阻止 Font Awesome 再次加载它，这样您就没有重复的类。
将以下内容添加到 eglayout.js或index.js：

// The following import prevents a Font Awesome icon server-side rendering bug,
// where the icons flash from a very large icon down to a properly sized one:
import '@fortawesome/fontawesome-svg-core/styles.css';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */

更多信息可以在这个 Github 问题中找到。