2019.05.02

GatsbyJS製ブログでFont Awesomeを使う方法

今回はGatsbyJS製ブログでFont Awesomeを使う方法を紹介します。デモはサブブログの404ページをどうぞ。

Font Awesomeのインストール

cd (フォルダー名)

npm i --save @fortawesome/fontawesome-svg-core

npm i --save @fortawesome/free-solid-svg-icons

npm i --save @fortawesome/react-fontawesome

1行ずつ実行してください。

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

import { faCoffee } from 
'@fortawesome/free-solid-svg-icons'

今回は例としてコーヒーのアイコンを使います。アイコンを使いたいファイルでインポートしてください。

<FontAwesomeIcon icon={faCoffee} />

アイコンの表示にはキャメルケース(？)を使う必要があったと思います。なので他のアイコンを使う場合もキャメルケースで書いてください。

Memo

キャメルケース（英: camel case）は、複合語をひと綴りとして、要素語の最初を大文字で書き表すことをいう。キャメルケースとは、大文字が「らくだのこぶ」のように見えることからの命名である。参考：キャメルケース

ReactでFont Awesomeを使う方法はこちらの記事で書いてます。少し技術的になりますが良かったらどうぞ。

参考