Tech Blog - Akihiro Suzuki

FontAwesomeのアイコンが一瞬巨大に表示される問題の解決

April 18, 2022

ページを開いたときに以下のように FontAwesome のアイコンが一瞬デカく表示されてしまう問題に出くわしました 😵

スクリーンショット

このエントリーでは、この問題を回避する方法を紹介します。環境は Gatsby です。

既に issue が上がっていたので、参考にします。

FortAwesome/react-fontawesome - Over sized icons on each page refresh #134

どうやら SSR(SSG)した時に起こるようで FontAwesome の CSS の読み込みのタイミングの問題のようです。

FontAwesome のスタイルシートをページに直接埋め込むことで解決するとのこと。🤔(詳しくはこちらの公式ドキュメント

以下が私が行なった対応です 👍

import * as fontawesome from "@fortawesome/fontawesome-svg-core"

fontawesome.config.autoAddCss = false

return (
  ...
  <style>{fontawesome.dom.css()}</style>
  ...
)

akhrszk/blog - 🐛 Fix over size FontAwesomeIcon


profile

鈴木 章弘 (Suzuki Akihiro)
バックエンドエンジニア(TypeScript & マイクロサービス)
profile