小金井にあるWEB制作会社の備忘録

MEMORANDUM

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>

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

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

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

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
BrandsFont Awesome 5 Brands
その他Font Awesome 5 Pro
種類font-weight
Solid900
Regular or Brands400
Light300