如何修复FontAwesome图标在React中页面加载量巨大的问题

Question

经过大量搜索，我似乎找不到解决方案。我在主页上使用了一些图标，在加载时，它们在短时间内是巨大的

以下是一个示例：https://makeyka.herokuapp.com/

我试过

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

然后尝试添加没有运气的css

Answer 1

关闭autoAddCs:

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

Answer 2

基本上这个问题是关于React.js的。然而，我在Vue.js的上下文中遇到了同样的问题。我的这个解决方案基本上是为了在单个文件组件的上下文中使用Vue.js。

在您的输入代码文件中插入此代码：

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

现在，准备另一个块，将所需文件寻址到根元素组件中任何现有的<style>块：

<style src="@fortawesome/fontawesome-svg-core/styles.css"></style>

Answer 3

class.hero部分内容介绍(所有字体图标的容器(宽度：300；

直到图标的CSS文件没有加载，所有图标的宽度：300(父级(

您需要处理这个案例来解决问题。

为图标添加字体大小。