如何修復 React 中頁面加載時的 FontAwesome 圖標很大

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

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-section-content-intro（所有字體圖標的容器）的寬度：300；

直到未加載圖標的 CSS 文件所有圖標的寬度：300（父級）

您需要處理這種情況才能解決問題。

為圖標添加字體大小。

Answer 4

無法重現您描述的行為。 是固定的嗎？ 如果是這樣關閉問題。