今回はFont Awesomeの使い方をご紹介します。Font Awesome5を疑似要素で使うメリットとしては、アイコン変更時にcssのcontetの値のみを変更すれば良いので管理が楽になります。
1.Font Awesomeを読み込む
Font AwesomeのCDNを<head>タグ内に記載し、webフォントとして使える状態にします。公式サイトからフォントファイルをダウンロードして使うこともできますが、CDNサーバーからファイルを読み込む方法が良いでしょう。
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"
2.アイコンのUnicodeを調べる
Font Awesomeの公式サイトのicon一覧ページから使いたいアイコンを選びます。html内に入れるときには<i class=”〜”>というタグを貼り付けますが、cssで使用する時には隣に記載してある文字列をコピーします。
3.CSSに擬似要素として指定
擬似要素に使用するには、たった3つのコードを記載するだけです。まずはclass名をつけたpタグを作成し、文字を入力してみましょう。準備ができたらcssにコードを書いていきます。擬似要素(::after or ::before)の指定は忘れずに。
content
contentには2で確認した文字を指定します。今回は「f015」で試します。'(シングルクォーテーション)で括り、文字の前には\（バックスラッシュ)を入れます。ちなみにバックスラッシュはaltキー+￥マークです。
font-family
Webフォントを擬似要素で指定する場合に設定します。基本的には上のFreeの方を指定してあげてください。
- font-family: ‘Font Awesome 5 Free’;
- font-family: ‘Font Awesome 5 Brands’;
font-weight
上記2つを指定すれば基本的に表示されますが、使用するフォントによっては表示されないという現象が発生します。その場合はfont-weightを指定します。（基本的にfont-weightは入れた方がいいですね）
指定する数値はSOLID・REGULAR・LIGHTのどのフォントを使うかによって変わります。
- Solid … font-weight: 900;
- Regular … font-weight: 400;
- Brands … font-weight: 400;
4.実装
実際に上記を使用すると下のようになります。以上Font Awesome5をCSSの疑似要素で指定する方法でした。
See the Pen
FontAwesome擬似要素 by Hiroki Nakamura (@marurain)
on CodePen.
