ブログを読んでいるとこんな感じのアイコン（ ）が使用されているのをよく見かけると思います。
はてなブログにデフォルトで備わっているアイコンでも120種類くらいはあるのですが、ベーシックなもの以外は刺さるアイコンが正直少ないです。そこで今回は、無料でかわいいアイコンが2,000種類も使えるFont Awesomeをはてなブログで使用する方法を紹介したいと思います。
Font Awesomeを使用すれば、導入前ではちょっと味気ないグローバルメニューを導入後のようにアイコンを表示してかわいい感じにすることができます。
導入準備：会員登録
まずは以下のサイトにアクセスしてFont Awesomeに無料会員登録をしていきます。
ホームページにアクセスしたら「start for free」をクリックして次のページに進みます。
次のページでは自身のメールアドレスを入力して「Send Kit Code」をクリックします。すると入力したメールアドレス宛にメールが届くので、本文中の「 Confirm Your Email Address」を押して登録を進めます。
Font Awesomeのサイトに移動するので、パスワードや名前などを設定して「All set. Let's go!」ボタンまで押せれば登録作業は完了です。
導入準備：Kit Codeの配置
会員登録が完了すると、そのまま下の画像のようなKit's Codeが表示されているマイページに移動します。ここで「Copy Kit Code」を押してKit Codeをコピーしましょう。
コピーしたKit Codeをはてなブログに設置していきます。設置する場所は管理画面から"設定" > "詳細設定" > "
要素にメタデータを追加"です。これで導入準備は完了です。
アイコンの探し方
準備ができたのでアイコンを探していきます。まずは上のメニューにあるアイコンを押して検索ページに移動します。
移動したら検索欄にキーワード（例えばGAMEなど）を入力して、入力できたら無料アイコンだけ表示するために「Free」を押す、という流れでアイコンを探していきます。
アイコンの使い方
では実際にFont Awesomeのアイコンをブログに表示する方法を紹介します。今回は星のアイコンを例に説明していきます。
HTMLタブにある以下のコードをコピーして記事に張り付けるだけでＯKです。張り付ける場合は編集モードを"はてな記法", "Markdown記法", "HTML"で行います。
<i class="fa-solid fa-star"></i>
ちなみに有料アイコンのHTMLコードを張り付けても、有料ユーザー登録していないと空白で表示されてしまうので注意しましょう。
まとめ
最後までお読みいただきありがとうございました。 今回はFont Awesomeをはてなブログに導入する方法を紹介しました。
やり方がわかれば簡単にブログの見た目をアップデートすることができるので、ぜひ導入してみてください！