Dev.to

Font Awesome Loading Error

您看到的「閃現放大的黑色圖示」問題，幾乎可以肯定是 Font Awesome 圖標載入 時的常見現象，有時被稱為 FOUI (Flash of Unstyled Icons) 或 FOIT (Flash of Invisible Text/Icons)。 發生原因： JavaScript 渲染： 您使用的 react-fontawesome 套件會在頁面載入後，透過 JavaScript 將您指定的圖標轉換成 SVG 圖形並插入到頁面中。 CSS 與時序： 在 JavaScript 成功將 SVG 插入之前，頁面上可能只是一個空的 或 佔位符。 如果 Font Awesome 的核心 CSS 檔案載入得比較晚，或者瀏覽器先渲染了 HTML 和其他 CSS，這個佔位符可能會短暫地繼承了周圍元素或其他全局 CSS 的樣式（例如很大的 font-size 和預設的 color: black），導致您看到一個放大的黑色方塊或圖標輪廓。 一旦 Font Awesome 的 JavaScript 和 CSS 都準備就緒，它會用正確的 SVG 圖標替換佔位符，並應用正確的樣式，黑色圖示就消失了。 如何解決： 最推薦的解決方法是遵循 Font Awesome 官方對 Next.js/React 應用的建議，在 _app.js 中手動配置和載入 CSS，避免它自動處理時可能出現的延遲或衝突。 請修改 pages/_app.js 如下： import React from 'react' import { createGlobalStyle } from 'styled-components' // 1. 導入 Font Awesome config 和 core styles import { config } from '@fortawesome/fontawesome-svg-core' import '@fortawesome/fontawesome-svg-core/styles.css' // 2. 告訴 Font Awesome 不要自動添加 CSS，因為我們手動導入了 config.autoAddCss = false const GlobalStyle = createGlobalStyle` * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background: #fff; // 或您原本的背景色 } /* 您可以保留或移除頁面過渡動畫樣式 */ .page-transition-enter { opacity: 0; } .page-transition-enter-active { opacity: 1; transition: opacity 300ms ease-in; } .page-transition-exit { opacity: 1; } .page-transition-exit-active { opacity: 0; transition: opacity 300ms ease-out; } ` function MyApp({ Component, pageProps }) { return ( ) } export default MyApp 主要變更： 導入了 @fortawesome/fontawesome-svg-core 的 config。 導入了 Font Awesome 的核心 CSS (@fortawesome/fontawesome-svg-core/styles.css)。 設置 config.autoAddCss = false; 來阻止 Font Awesome 在稍後自動注入 CSS，確保 CSS 在頁面渲染早期就被應用。 解釋： 這樣做可以確保 Font Awesome 圖標所需的基礎 CSS 在頁面渲染的最開始階段就被載入和應用，而不是等到 JavaScript 執行後才動態添加。這能有效地防止佔位符元素短暫地顯示為錯誤樣式（如放大的黑色圖示）。 請應用此修改，然後重新啟動開發伺服器 (npm run dev) 並清除瀏覽器快取。這個閃現的黑色圖示問題應該就會解決了。

May 9, 2025 - 10:33
 0
Font Awesome Loading Error

您看到的「閃現放大的黑色圖示」問題，幾乎可以肯定是 Font Awesome 圖標載入 時的常見現象，有時被稱為 FOUI (Flash of Unstyled Icons) 或 FOIT (Flash of Invisible Text/Icons)。

發生原因：

  1. JavaScript 渲染： 您使用的 react-fontawesome 套件會在頁面載入後，透過 JavaScript 將您指定的圖標轉換成 SVG 圖形並插入到頁面中。
  2. CSS 與時序：
    • 在 JavaScript 成功將 SVG 插入之前，頁面上可能只是一個空的 或 佔位符。
    • 如果 Font Awesome 的核心 CSS 檔案載入得比較晚，或者瀏覽器先渲染了 HTML 和其他 CSS，這個佔位符可能會短暫地繼承了周圍元素或其他全局 CSS 的樣式（例如很大的 font-size 和預設的 color: black），導致您看到一個放大的黑色方塊或圖標輪廓。
    • 一旦 Font Awesome 的 JavaScript 和 CSS 都準備就緒，它會用正確的 SVG 圖標替換佔位符，並應用正確的樣式，黑色圖示就消失了。

如何解決：

最推薦的解決方法是遵循 Font Awesome 官方對 Next.js/React 應用的建議，在 _app.js 中手動配置和載入 CSS，避免它自動處理時可能出現的延遲或衝突。

請修改 pages/_app.js 如下：

import React from 'react'
import { createGlobalStyle } from 'styled-components'
// 1. 導入 Font Awesome config 和 core styles
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'

// 2. 告訴 Font Awesome 不要自動添加 CSS，因為我們手動導入了
config.autoAddCss = false

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #fff; // 或您原本的背景色
  }

  /* 您可以保留或移除頁面過渡動畫樣式 */
  .page-transition-enter {
    opacity: 0;
  }
  .page-transition-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
  }
  .page-transition-exit {
    opacity: 1;
  }
  .page-transition-exit-active {
    opacity: 0;
    transition: opacity 300ms ease-out;
  }
`

function MyApp({ Component, pageProps }) {
  return (
    <>
      
      
    
  )
}

export default MyApp

主要變更：

  1. 導入了 @fortawesome/fontawesome-svg-core 的 config。
  2. 導入了 Font Awesome 的核心 CSS (@fortawesome/fontawesome-svg-core/styles.css)。
  3. 設置 config.autoAddCss = false; 來阻止 Font Awesome 在稍後自動注入 CSS，確保 CSS 在頁面渲染早期就被應用。

解釋：

這樣做可以確保 Font Awesome 圖標所需的基礎 CSS 在頁面渲染的最開始階段就被載入和應用，而不是等到 JavaScript 執行後才動態添加。這能有效地防止佔位符元素短暫地顯示為錯誤樣式（如放大的黑色圖示）。

請應用此修改，然後重新啟動開發伺服器 (npm run dev) 並清除瀏覽器快取。這個閃現的黑色圖示問題應該就會解決了。

Read More

Tags:

Previous Article

Svenska AI-reformen – miljoner svenskar får gratis AI-verktyg

Next Article

How to Kill a Process by Name in Perl Effectively?

Related Posts

WeDidIt : Building a Better Tomorrow

WeDidIt : Building a Better Tomorrow

Apr 27, 2025  0

Geographic Information Systems (GIS) Development

Geographic Information Systems (GIS) Development

May 7, 2025  0

TS2331: 'this' cannot be referenced in a module or namespace body

TS2331: 'this' cannot be referenced in a module or name...

May 6, 2025  0