<p>弊ブログにFont Awesomeを導入した際のメモと注意点。</p><h2 id="h038d6117c5">導入</h2><p>下記ライブラリをインストール。</p><pre><code>npm i --save @fortawesome/react-fontawesome
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-solid-svg-icons</code></pre><h2 id="ha0e95c0643">使用方法</h2><pre><code>// 下記ライブラリをインポートする。
import "@fortawesome/fontawesome-svg-core/styles.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";

const Hoge = () =&gt; {
	  return (
	      &lt;a href="https://github.com/w8f/blog_app"&gt;
        {/*
            iconに表示したいアイコンのモジュールを指定する。
            size等の指定も可能（詳細はFontAwesomeIconPropsを確認）
         */}
  	        &lt;FontAwesomeIcon icon={faGithub} size="2x" /&gt;
  	      &lt;/a&gt;
  	    &lt;/div&gt;
  	  );
  	};</code></pre><h2 id="h86c1eb6dfa">注意点</h2><p>Next.jsのSSGを利用している場合、Font Awesomeのアイコンが表示されなかったり、大きく表示される場合がある。<br>その場合、下記をインポートし、CSSを先読みにすることで、その事象を避けることができる。</p><pre><code>import "@fortawesome/fontawesome-svg-core/styles.css";</code></pre>

Font Awesome の記事一覧