アイコンフォント『Font Awesome』の使い方について説明します。
アイコンフォント『Font Awesome』とは？
アイコンフォントとは、アイコンをフォントとして利用できるようにしたものです。サイズや色など、すべて CSS で調整することができます。また、画像でアイコンを貼るのと違って、拡大してもぼやけることもありません！！
今回は、種類が豊富な Font Awesome をご紹介します。
こちらの記事では、2017年末にリリースされた Font Awesome（Version 5）について説明します。Font Awesome（Version 5）には、無料プランと、有料の PROプラン があります。 有料プランはアイコンの種類も多く、料金は $60 です。ちなみに、旧バージョンもこれまで通り使い続けることができます。
ダウンロードの必要はなく、CDN（Contents Delivery Network）で利用が可能です。
CDN とは、専用のサーバー上にある画像やフォントなどのデータを読み込んで、自分の Webサイトに表示させる仕組みです。自分のサーバーへの負荷を減らせ、アイコンをダウンロードしなくても使うことができます。つまり、Font Awesome に新しいアイコンが追加されたときも、ダウンロードし直す必要はありません。
Font Awesome の使用方法
① 公式サイト にアクセスし、下記画像の水色の枠で囲んだ「How To Use」をクリックします。
② 下記画像の水色の枠部分が、CDN のコードです。こちらをコピーして <head>…</head> 内にペーストします。よく分からない場合は、</head> の直前に貼り付ければ大丈夫です。
水色の枠右下のクリップボードのイラストをクリックすると、簡単にコピーすることができます。
③ 次に、下の画像の水色の枠で囲んだ「Icons」をクリックします。
④ 下の画像のように表示されるので、使用したいアイコンをクリックします。ここでは例として、水色の枠で囲んだアイコン（address-book) を選びます。
⑤ 下の画像の水色の枠で囲んだ部分をコピーして、HTML 内のアイコンを表示させたい位置に貼り付けるだけでおしまいです。
はてなブログの場合、HTML 編集画面で貼り付けたときにコードが消えてしまうことがあるようです。
まとめ
とても簡単に使える Font Awesome ですが、なんと商用利用も可能とのこと！！
ぜひ気軽に使ってみましょう。