【WordPress】Font Awesome 5の使い方【CSSの::before】

【WordPress】Font Awesome 5の使い方【CSSの::before】 HTML/CSS

こんにちは、mickです。

Font Awesomeの使い方がわからない
Font Awesomeの4.7と5があるのはなぜ?違いは?
Font AwesomeをCSS(::before)での使い方を知りたい

こんな疑問を解決していきます。

Font Awesome を使うHTMLやCSSのサンプルソースコード付きです。

Font Awesome は無料のアイコンWebフォント

Font Awesome は無料で使うことができるアイコンのWebフォントです。

最新バージョンは、Font Awesome 5.14。
前のバージョンは、Font Awesome 4.7。

記事では Font Awesome 5 で統一しています。

WordPressテーマCocoonはデフォルトで使える

Font Awesome を使うには、事前に設定が必要です。
⇒ Font Awesome を始める(公式サイト)

ところが、WordPressテーマCocoonなら事前の設定は不要
HTMLやCSSを書くだけですぐに使えます。

Cocoon便利すぎ。

アイコンの種類が7000種類以上に爆増したFont Awesome 5

Font Awesome 4.7 では675種類のアイコンでした。
Font Awesome 5 では7848種類のアイコンと10倍以上に増量。

ただし、Font Awesome 5 は有料版を含めての数です。
無料版の Font Awesome 5 Free だと1598種類のアイコンが使えます。
(2020/09/25時点のFont Awesome 5.14)

有料版が増えたことでプレフィックス(faとか)が増えた

Font Awesome 4.7 までのプレフィックスはただ1つ fa だけでした。

これがFont Awesome 5 になってから次の5種類に増えています。

新しいプレフィックスアイコンスタイル説明対象
fabFont Awesome BrandsAmazonやAppleなどの
ブランド系アイコン
無料版
fas または faFont Awesome Solid従来のアイコン無料版
farFont Awesome Regular変化のあるアイコン有料版
falFont Awesome Light空白の多いアイコン有料版
fadFont Awesome Duotoneツートンのアイコン有料版
Font Awesome 5 で増えた5種類のプレフィックス

アイコンのバリエーションが増えた分、設定も増えたわけです。

Font Awesome 4.7 と Font Awesome 5 の混在はNG

Font Awesome 4.7と Font Awesome 5 を混在はNG

理由は、Font Awesome 公式に記述があります。
公式の記述を私なりに翻訳してみました。

2つのバージョンは混在させないように。(中略)Font Awesome 4.7が使えるように工夫をしているけれど、大きくなったCSSやアイコンへのアクセスが複雑なこと、そして表示できるかどうかは約束できない。犬とネコを同時に飼うように、まさにそれはカオスな状態だ。

Font Awesome公式「Upgrading from Version 4」翻訳

バージョンアップに手間がかかるのは、Web運営者泣かせ。

Font Awesome 5 の使い方(4.7も紹介)

Font Awesome を使う事前準備ができていれば使うのは簡単です。

ここではCocoonのようにWordPressのテーマに Font Awesome がインストールされているケースで紹介していきます。

Font Awesome を使う方法は2つ。

  1. HTMLで直接使う方法
  2. CSSの擬似クラスで使う方法

HTMLで Font Awesome を使う

Font Awesome を使うひとつ目の方法は、HTMLを直接Webページに貼り付けることです。
大まかな流れはこちら。

  1. 公式サイトでアイコンを探す
  2. アイコンに設定してあるHTMLをコピーする
  3. WebページにHTMLを貼り付ける

公式サイトでアイコンを探します。
⇒ Font Awesome 5 のアイコンギャラリー

Font Awesome 5 のアイコンギャラリー

Font Awesome 5 のアイコンは1000種類以上。
検索を上手に使っていきます。

アイコンギャラリーから bed を検索
アイコンギャラリーから bed を検索

今回は無料版を使うため、左の絞り込みメニューから「Free」と無料で使える「Solid」を選択。
そして、検索ボックスには「bed」を入力して検索しました。

アイコンのHTMLをギャラリーからコピーする
アイコンのHTMLをギャラリーからコピーする

アイコンに設定してあるHTMLをコピーします。
PROマークが付いているアイコンは、有料版で使えます。
また、アイコンスタイルはこのアイコンの画面で確認ができます。

<i class="fas fa-bed"></i>

ベッドアイコン

WebページにコピーしたHTMLを貼り付けておしまいです。

aria-hidden属性はテキスト読み上げ防止に使う

aria-hidden属性は、Font Awesome のアイコンを装飾で使うときに指定します。

<i class="fas fa-bed" aria-hidden="true"></i>

これは、テキストリーダーが読み上げないようにするための処理。
だから、画面にアイコンを表示するだけなら、あってもなくても影響はありません。

aria-hidden属性を書いてない!と慌てなくても大丈夫。

Font Awesome 4.7 を使う場合

Font Awesome 4.7 のアイコンギャラリーで bed を検索した結果
Font Awesome 4.7 のアイコンギャラリーで bed を検索した結果

Font Awesome 4.7 を使う場合は、4.7用のアイコンギャラリーからアイコンを探します。
⇒ Font Awesome 4.7 のアイコンギャラリー

HTMLをコピーしてWebページに貼り付ける点は、Font Awesome 5 のときと同じです。

CSSの擬似クラス(::before)でFont Awesomeを使う

Font Awesome を使うひとつの方法は、CSSの擬似クラス(::before)で使うことです。
大まかな流れはこちら。

  1. 公式サイトでアイコンを探す
  2. アイコンに設定してあるUnicodeをコピーする
  3. CSSでFont Awesomeを使うように記述する
  4. WebページでCSSを使う

まずは、HTMLを使うときと同じようにアイコンギャラリーからアイコンを探します。

アイコンギャラリーからアイコンのアイコンスタイルを確認してUnicodeをコピーする
アイコンギャラリーからアイコンのアイコンスタイルを確認してUnicodeをコピーする

アイコンギャラリーのアイコンの画面で、アイコンスタイルを確認します。
この例では「Solid」です。

そしてUnicodeをコピーしておきます。
この例では「f236」です。

これらを使って、次のようなCSSを記述します。

/* 共通のプロパティ設定 */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/* Solidアイコンのベッドを使う */
.bed::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f236";
}

ポイントは、2つ。font-familyプロパティfont-weightプロパティです。
この2つの値は、アイコンスタイルによって決まります。

アイコンスタイルfont-familyの値font-weightの値対象
BrandsFont Awesome 5 Brands400無料版
SolidFont Awesome 5 Free または Font Awesome 5 Pro900無料版
RegularFont Awesome 5 Pro400有料版
LightFont Awesome 5 Pro300有料版
DuotoneFont Awesome 5 Pro900有料版
アイコンスタイルによって決まる値

アイコンが思うように表示しないときは、次の3つを確認します。

  • font-familyの値
  • font-weightの値
  • content(Unicode)の値
Font Awesome のアイコンの設定に失敗
Font Awesome のアイコンの設定に失敗

これらの値がひとつでも間違っていると表示がうまくいきません。

Font Awesome 4.7 をCSS擬似クラスで書く

Font Awesome 4.7 で擬似クラスは次のように書いていました。
Font Awesome 5 との違いは大きく2つ。

  1. Font FamilyがFontAwesomeのみ
  2. font-weightの指定がない
/* バージョンでも共通のプロパティ設定 */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/* font-familyがFontAwesomeのみで、font-weightの指定がない */
.bed::before {
  font-family: FontAwesome;
  content: "\f236";
}

Font Awesome 5 よりも書くことが少なくてシンプルに見えますね。
しかし、今後のためにも Font Awesome 5 を使うことをオススメします。

まとめ。

Font Awesome の使い方と2つのバージョン4.7とバージョン5との違いを紹介しました。
Font Awesome 4.7 を使っていた人からは、かなり大きな変更だったと思います。

私が使い始めたのは、Font Awesome 5 が出てからなので、影響は小さくて済みました。

公式は、2020年中に次のバージョンの Font Awesome 6 をリリースすると発表しています。
さすがに Font Awesome 4.7 から Font Awesome 5 に変わったような大きな変化はない、と思いたいです。

もっと便利になっているといいな。

以上、みなさまの助けなれば幸いです。

初稿 2020/09/25

タイトルとURLをコピーしました