GatsbyJSでFontAwesomeを使い、Twitterアイコンを表示させる

こんにちは、けんぞうです。「GatsbyJSでFontAwesomeを使用する方法」を解説します。
今回のゴールとしては、Twitterのアイコンを表示させることです。

手順としては、以下の通りです。

  • 手順①:Gatsbyにインストールを行う
  • 手順②:import でFontAwesomeを使える状態にする
  • 手順③:jsファイル内で書き出す

手順①:Gatsbyにインストールを行う

インストールを行うコマンドをぶち込みます。

今回は「FontAwesome brands」に分類されるTwitterアイコンを表示させたいので、以下のコマンドも必要です。

手順②:import でFontAwesomeを使える状態にする

次にjsファイル内で、importを行いFontAwesomeが使える状態にします。今回はコンポーネントのHeader.jsにてFontAwesomeを使用するので、そちらに記述を行います。

手順③:jsファイル内で書き出す

最後に表示を行ってお終いです。

 

躓いたところ

FontAwesome Brands」をインストールしておらず、Twitterアイコンが表示されないというところで躓きました。そこさえカバーすれば、難しい内容ではなかったかなと、思います。

参考 react-fontawesomeGithub