javascript - 如何修复 FontAwesome 图标在 React 页面加载时变大

Question

经过大量搜索，我似乎无法找到解决方案。 我在我的主页上使用了很棒的图标，并且在加载时它们在短时间内很大。

这是一个例子:https://makeyka.herokuapp.com/

我试过了

import {config} from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;

然后尝试添加 css 但没有成功

Answer 1

关闭 autoAddCss:

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

直接在 SCSS 文件中加载 CSS:

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

在你的风格中这样写:

<style jsx global>{`
  ...

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

  ${dom.css()}

  ...
`}</style>

请点击链接:https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering