反应字体真棒呈现大图标，直到缩小答案

【问题标题】：react font awesome renders big icon until scales down反应字体真棒呈现大图标，直到缩小
【发布时间】：2018-09-21 17:33:30
【问题描述】：

我正在使用带有 fontawesome 的 react 服务器端渲染和客户端渲染（水合物），但是当页面渲染时，图标很大，直到它缩小并且正确的大小类被添加到图标或 css 被加载（我不知道）。

【问题讨论】：

【解决方案1】：

关闭 autoAddCss：

import { library, config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

直接在SCSS文件中加载CSS：

@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'

【讨论】：

【解决方案2】：

请看这篇文章：

您需要在布局或全局配置中对此做出反应：

import { library, config, dom } from '@fortawesome/fontawesome-svg-core' 
config.autoAddCss = false
...

按照你的风格写：

<style jsx global>{`
  ...

  @import url('https://fonts.googleapis.com/css?family=Didact+Gothic');

  ${dom.css()}

  ...
`}</style>

【讨论】：

【解决方案3】：

正如您所猜测的，这是页面最初呈现后 CSS 加载的问题。我找到的解决方案是确保服务器上的 CSS 与图标呈现在同一页面上（取决于您用于管理样式表的框架），或者确保您使用的任何 .css 文件这在 html 呈现之前被加载。这可以通过确保样式表的链接标记出现在页面顶部附近来完成。

【讨论】：

你是对的。我正在做的是将styles.css从node_modules/@fortawesome/fontawesome/styles.css复制到我的公共文件夹（重命名为fontawesome.css）并在我的html <link rel="stylesheet" href="%PUBLIC_URL%/css/fontawesome.css">第二部分中使用，我添加fontawesome.config.autoAddCss = false;不添加相同的css从客户端渲染到头部。