Font Awesomeを使ってWebアイコンを実装

ホームページを制作する中でアイキャッチ等のポイントとして使われているアイコン。
以前は画像を作成して設置していましたが、スタンダードなものであればWEBアイコンフォント「Font Awesome」を使って表現が可能なので、使い方をメモ。

「Font Awesome」を使ったWebアイコンの実装の方法

「Font Awesome」のサイト内に用意されているタグを設置するだけでもWEBアイコンの実装は可能ですが、空タグになるのは好ましくないので、CSSの疑似要素（before）使った方法で実装。

サイトに登録して外部読込用タグを取得

「Font Awesome」のサイトで登録(無料)を済ませた後に表示される「kit code」をコピー、使用するサイトの「head」タグ内にコードを記載。
SSL化に影響がないよう、プロトコル部分を削除。

<script src="//kit.fontawesome.com/○○○○○○○○○○.js" crossorigin="anonymous"></script>

• Font Awesome

使いたいアイコンを検索して、アイコンのコードと種類を確認。

サイト内の検索フォームから利用したいアイコンを検索。

アイコンの詳細ページで「種類」と「ユニコード」を確認。

HTMLとCSSを編集してアップロード

前の工程で確認した「ユニコード」をCSSの「content」の部分に頭に「\」(円マーク)を付けて記載。
使用するアイコンの種類により「font-family」と「font-weight」も変更。

※下記の参考例は「icon-mail」というクラスの疑似要素(before)を使用。

HTML

<ul>
<li class="contact"><a href="/contact/" class="icon-mail">お問い合せ</a></li>
</ul>

CSS

.icon-mail::before {
    font-family: "Font Awesome 5 Pro";
    content: "\f0e0";
    font-weight: 900;
}

「font-family」と「font-weight」の対応表

種類	font-family
Brands	Font Awesome 5 Brands
その他	Font Awesome 5 Pro

種類	font-weight
Solid	900
Regular or Brands	400
Light	300