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

Question

我使用的反应服务器端呈现和客户端呈现(水合物)与fontawesome但是当网页显示,该图标是巨大的,直到它按比例缩小和正确的大小类被添加到图标或CSS的加载(我不知道) .

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

请看这篇文章：

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>