Font Awesomeのアイコンが表示されない！と思ったらバージョンが古いだけだった。
先日、はてなブログのテーマ「Haruni」を導入しました。
オークニズムさんのブログでも紹介されているように、本当にグラデーションが今風で素晴らしいです！
カスタマイズも作者さんのブログでたくさん紹介されており、忙しい社会人にとっては頭を悩ますことも少なくて助かりました！
そして、グローバルメニューも順調に導入できたので、最後にFont Awesomeでアイコンを導入してみよう！と思い、これまたオークニズムさんのブログを参考に設定を行いました。
しかし、何度やってもアイコンが表示されない・・・
ちゃんと手順通りやっているのに・・・
自分の調べ方が悪いのか、検索しても解決法がなかなか見つからない・・・
で、もう一度手順を見返していると、「一応、バージョンとかがあって更新される可能性もある」との記載が・・・
やっぱりバージョンが古いのか？と思い、自分で公式ページに行き、コードを調べるとバージョンが「4.7.0」ではなく「5.6.3」と表記されていました。
とりあえず良くわからんが、バージョンが古いだけのようでした(笑)
あとは自分でコードを探し、手順通り設定をしたらアイコンが表示されるようになりました。
よかったー！
なので、備忘録として、手順をまとめておきたいと思います。
Font Awesomeとは？
説明を読んでもよくわかりませんでしたが、とりあえずネットワーク上のアイコンを使えるようになるとのこと。
こんな家のマークがそうです！
↓
アイコンがあるとやっぱり分かりやすい！
Font Awesomeを使う準備
まずは、公式ページに行き「headに要素を追加」に貼りつけるコードを探します。
無料のアイコンを使用するので、「Start Using Free」をクリック。
コードが表示されているので、そのまま全てコピーします。
コピーしたら、はてなブログの設定画面へ行きます。
「設定」→「詳細設定」→「headに要素を追加」にコピーしたコードを貼りつけます。
（すでにコードが入っている場合は、改行して下に貼りつければOK！）
追加したら、最後に「変更する」を押し忘れないように！
これで準備が完了です。
Font Awesomeを使ってみよう
それでは実際に使いたいアイコンを設定していきましょう。
使いたいアイコンを探す
もう一度Font Awesomeの公式ページへ行き、使いたいアイコンを探します。
ここにたくさんのアイコンあります。
今回はプロフィール用のアイコン「address-book」を設定していきます。
「address-book」のページにいくと、上にコードが表示されています。
これですね！ <i class="fas fa-address-book"></i>
クリックするだけでコピーできます。
はてなブログ側の設定
そして、コピーしたらはてなブログの設定画面にいきます。
「デザイン」→「ヘッダ」→「タイトル下」のHTMLの欄に先ほどのコードをコピーします。
すでにグローバルメニューのHTMLが記載されているので、必要な場所にコピーしていきます。
私のブログではすでに以下のコードが入っているので、アイコンを表示させたい場所の前にコピーします。
<li><a href="https://www.raiguiter.com/profile">
Profile</a></li>
↓
<li><a href="https://www.raiguiter.com/profile">
<i class="fas fa-address-book"></i> Profile</a></li>
こんな感じです。
ここでは「Profile」の前に表示させたいので、直前にコピーしました。
ちなみに「Profile」とアイコンの間には半角のスペースを追加しています。
半角のスペースを入れるとバランスがいい感じになりますよ。
設定後の画面を確認してみると・・・
見事！アイコンが表示されました！おしゃれー！
しっかり「半角スペース」も反映されています！
バージョンを最新にするときの注意
私の導入した、はてなブログのテーマ「Haruni」では古いバージョンのFont Awesomeを使用していたようで、新しいバージョンにすることで、アイコンが一部表示されなくなってしまいました・・・！
なので、Font Awesomeホームページから同じアイコンを探し、最新のコードに書き換えました。
一例として「twitter」アイコンのコードは
旧 <i class="fa fa-twitter"></i>
↓
新 <i class="fab fa-twitter"></i>
このように「b」を付け加えたらちゃんと表示されましたー！
最初は焦ったけど、簡単な変更で表示できるようになったので安心しました。
まとめ
経験者からしたら簡単なことだと思うのですが、初心者の私はここまで行き着くのに、かなり苦労しました(笑)
でも苦労した分、アイコンを変えたりする方法も覚えられたので結果オーライでした！
アイコンを変えることでオシャレ度も一気にアップするので、ぜひ皆さんも挑戦してみてください！
