Font Awesome を使おう

2022/05/11

自分の SNS アカウントへのリンクは、アイコンのみで良さそうなので Font Awesome を導入した。 (個人的にはタイポグラフィなサイトが好みなので、文字多めな傾向はある。)

必要な Package をインストール

このサイトは、Gatsby で作っているので、React で利用するのとほぼ一緒な感じで設定した。

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

次に必要な icon の方もインストール。 Twitter のアイコンなどを含んでいる ‘brands’ と Feed アイコンをいったアイコンも使いたいので ‘solid’ の方をインストール。

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

実際に使ってみる

使いたい箇所のコンポーネントをゴニョゴニョ修正。 Font Awesome で使いたいアイコンを探して、表記を camel case に読みかえて import する。

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSquareRss } from "@fortawesome/free-solid-svg-icons"
import {
  faTwitter,
  faGithub,
  faSpeakerDeck,
  faInstagram,
} from "@fortawesome/free-brands-svg-icons"

あとは使いたい箇所で、以下のようにアイコンを呼びだせば表示された。

<a href="https://twitter.com/nawoto">
  <FontAwesomeIcon icon={faTwitter} />
</a>

スタイルを読みこんでおく

リロード時などに Font Awesome のアイコンの表示が崩れないように事前に Style を読みこんでおくために、gatsby-broeser.js に以下を追記。

// CSS style for Font Awesome
import "@fortawesome/fontawesome-svg-core/styles.css"

無事にアイコンが表示できたはず 🎉

this articlewritten by(nawoto)

author

Profile picture

NISHIMURA Naoto

西村直人。 おもにnawoto という名前でいろいろしています

read me

© 2022, NISHIMURA Naoto All Rights Reserved.