Webアイコンフォントの【Font Awesome】がアカウント登録必須になったので、使い方をおさらいしました
Font AwesomeはWebページ上にアイコンを表示させるためのサービス。汎用性の高いシンプルなアイコンが多数用意されています。アイコンの画像をご自身で用意しても構いませんが、このようなサービスを使うと手軽に実装でき、管理もしやすくなるでしょう。昔から愛されてきたこのFont Awesomeですが、少し前からアカウント登録が必要になりました。今回はアカウント登録の手順から基本的な使い方を紹介します。
↑私が10年以上利用している会計ソフト！
Font Awesomeのアカウント登録手順
これまではCDNと呼ばれる、誰もが共通で使えるファイルのURLをコピペして使用できていました。しかしこれからはメールアドレスを登録し、個別に割り振られたファイルのURLを使う必要があります。これはバージョン管理を自動化するためや、アイコンの表示を高速化するためだそうです。
ではさっそく登録してみましょう！Font AwesomeのWebサイトから「Start for Free」ボタンをクリック。
メールアドレスを入力して、「Send Kit Code」ボタンをクリック。
入力したメールアドレス宛に、こんなメールが届きます。「Click to Confirm Your Email Address + Set Things Up」ボタンをクリック。
パスワードの入力が求められます。任意のものを2回繰り返し入力したら「Set Password & Continue」をクリックして登録完了です！
Font Awesomeの基本的な使い方
1. JavaScriptファイルを読み込む
ログインすると利用できるキットが表示されています。そこにあるコードを <head> タグ内に貼り付けましょう。「Copy Kit Code」ボタンで簡単にコピーできますよ！
HTML
<!doctype html>
<html>
<head>
<script src="https://kit.fontawesome.com/あなたのFontAwesomeキットID.js"></script>
</head>
<body>
コンテンツが入ります
</body>
</html>
「Download Example File」ボタンをクリックすると、サンプルファイルがダウンロードできます。書き方の参考になりますよ。
2. アイコンを選択
表示させたいアイコンをアイコン一覧ページから探します。色が薄くなっているアイコンは有料のProユーザーのみ利用可能。
検索フィールドから単語を入力して検索もできます。日本語には対応していません。
3. HTMLコードを追加
好みのアイコンをクリック。ページ上部に <i class="〜〜〜"></i> というコードが表示されるので、クリックしてコピーします。body タグ内の、アイコンを表示させたい箇所に貼り付けましょう。すると、Webページ上にアイコンが表示されます。コピペだけで簡単に設置できましたね！
See the Pen
Font Awesome Demo – Basic by Mana (@manabox)
on CodePen.
Font Awesomeのカスタマイズ方法
基本がわかったところで、続いてデザインにあわせて好みの装飾をプラスしていきましょう！
サイズを変更する
アイコンフォントはその名の通りフォントなので、width や height でサイズを指定するのではなく、font-sizeでサイズを変更します。ラッキーなことにFont Awesomeではあらかじめサイズを変更するためのクラスが用意されているので、変更したいアイコンのタグにそれらのクラスを与えるだけで反映されますよ。基準となるサイズは適用されているCSSを引き継ぎます。
詳しい情報は公式サイトのSizing Iconsページを確認してください。
See the Pen
Font Awesome Demo – Sizing Icons by Mana (@manabox)
on CodePen.
CSSで装飾する
通常のHTML/CSSのように指定しているクラスにCSSで装飾を加えれば反映されます。例えば <i class="fas fa-home"></i> というコードを使用しているなら、「fa-home」クラスにスタイルを書いていきます。もちろん、ご自身で任意のクラスを加えてもOK。
アイコンの大きさは font-size で、色は color で指定します。
See the Pen
Font Awesome Demo – CSS Styling by Mana (@manabox)
on CodePen.
CSSの疑似要素で使う
ここまではHTMLの中に <i class="〜〜〜"></i> というコードを挿入していましたが、CSSの疑似要素を使ってアイコンを表示することも可能です。ただしWeb Font版のみ可能で、SVG版ではうまく動作しないので注意が必要です。
疑似要素ってなんだろう？って人は、過去記事「CSSの content プロパティーを使いこなそう！」を読んでみてくださいね！
手順はこれまでどおりFont Awesomeのファイルを読み込ませたあと、font-family プロパティーで必要なフォント名を、content プロパティーにはFont Awesome側で指定された文字コードを記述します。
箇条書きリストにFont Awesomeを使用した例：
See the Pen
Font Awesome Demo – CSS Pseudo-element by Mana (@manabox)
on CodePen.
SNSアイコンを使用した例：
See the Pen
Font Awesome Demo – CSS Pseudo-element Brands by Mana (@manabox)
on CodePen.
各プロパティーについて簡単に
font-family
通常のアイコンには「Font Awesome 5 Pro」を指定します。無料版であってもなぜかProをつけないと表示されませんでした。…なぜ？TwitterやFacebookなどのBrandsタイプのアイコンには、「Font Awesome 5 Brands」指定とします。
font-weight
通常のアイコンは font-weight も指定します。Solidタイプのアイコンには font-weight: 900; を、Regularタイプのアイコンには font-weight: 400; を記述しましょう。Brandsタイプのアイコンには指定する必要はありません。
content
表示させたいアイコンの文字コードを \ の後に続けて記述します。コードは各アイコンのページに表示されていますよ。
また、文字コードの一覧ページでも確認できます。設置したいアイコンの右側にある4桁の英数字を content に指定しましょう。
Font Awesomeにはさらに多くのアイコンが用意された有料のPro版もあります（年間$99）。まずは無料版で試してみるといいですね！
