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

Question

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

Answer 1

关闭autoAddCss：

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

直接在SCSS文件中加载CSS：

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

Answer 2

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

Answer 3

请参阅这篇文章

https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering

在作出反应时，您需要在布局或全局配置中做到这一点：

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>