対象: HTML・CSS、Font Awesome 5
難易度: ★★☆
所要時間: 約10分
今回はFont Awesomeの使い方をご紹介します。Font Awesome 5を疑似要素で使うメリットは、アイコンを変更したい時にCSSのcontentの値だけを変更すればよいので、管理がぐっと楽になることです。
HTMLをコンテンツ(意味のある情報)だけに保ちたいコーポレートサイトや、テーマのカスタマイズでアイコンをホバー時だけ差し替えたい時など、「アイコンは見た目の装飾」と割り切れる場面で特に相性が良い書き方です。
1. Font Awesomeを読み込む
Font AwesomeのCDNを<head>タグ内に記載し、Webフォントとして使える状態にします。公式サイトからフォントファイルをダウンロードして使うこともできますが、CDNサーバーから読み込む方法の方が手軽でおすすめです。
<link rel="stylesheet" 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. 実装
実際に上記を使用すると、下のようになります。
See the Pen FontAwesome擬似要素 by Hiroki Nakamura (@marurain) on CodePen.
表示されない場合、原因の多くはcontentのUnicode文字列の指定ミスか、font-familyとfont-weightの組み合わせが合っていないことです。特にSolidアイコンはfont-weight: 900;が必須なので、忘れず指定するようにしましょう。
今回のようにCSSの疑似要素だけで管理する方法は、アイコンを大量に使い回す場面で威力を発揮します。逆に、コードを見ただけでどのアイコンか分かりやすくしたい場合は、下記のHTMLタグを直接書く方法も合わせて覚えておくと便利です。
まとめ
- 疑似要素でFont Awesomeを使うと、アイコン変更時にCSSの
contentだけ書き換えれば済むので管理が楽になる - 指定するのは
content(Unicode文字列)・font-family・font-weightの3つ - 表示されない時は、まず
font-weightの指定漏れを疑うとよい
