WEBアイコンや記号・マークをカンタンに表示させたい！Font Awesome

読みやすさのためにアイコンを使いたいな、でも作ると手間かかるし…。
そんな時、商用OKのフリーアイコンはとっても便利です！

初心者でも簡単！　Webアイコンフォント　Font Awesome

Font Awesomeには無料と有料（PRO版）があり、有料版だと使用できるアイコンの種類が増えます。無料版でも使いやすいアイコンが豊富に揃っています。
お手軽なのでこのサイトでも使っていますよ。
Font Awesome5.9以降はアカウント登録が必要です（無料）。

STEP1

head 内に下記を記述して読み込みます。CDN（Web上に公開されているファイル）なので自分のサーバーにアップしなくても使用可能です。公式サイトからファイルをダウンロードして使うこともできますよ。
WordPressのテーマによっては、Font Awesomeがあらかじめ導入されているものもあります。ソースを見てチェックしてみてくださいね。

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

 

STEP2

使用したいアイコンを一覧から検索して、記述されているコードをコピーして貼り付けます。

編集ページにそのまま記述（例）
<i class="fas fa-shopping-cart"></i>

cssに疑似要素で記述（例）
セレクタ:after {
  content:'\f07a';
  font-family:'Font Awesome 5 Free';
  font-weight:900;
}

cssに疑似要素で記述 旧バージョン4.7（例）
セレクタ:after {
  content:'\f07a';
  font-family: FontAwesome;
}

 

注意

cssに疑似要素で設定する際は、タイプをfont-weightで設定します。Solidタイプの表示にはfont-weight: 900;を、Regularタイプ、Brandsタイプの表示にはfont-weight: 400;を記述すること。ブランドアイコンを使うときは、font-family名を"Font Awesome 5 Brands"とすること。

サイズや回転などカンタンにスタイルを変更

Font Awesomeはコードにクラスをつけるだけで大きさや角度を変えられます。

fa-3xを追加した例
<i class="fa fa-3x fa-camera" aria-hidden="true"></i>
fa-3x fa-rotate-90を追加した例
<i class="fa fa-3x fa-rotate-90 fa-camera" aria-hidden="true"></i>
fa-spinner fa-pulse fa-2x fa-fwを追加した例
<p class="mt_20"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>

 

　… そのまま

　… fa-3xを追加

　… fa-3x fa-rotate-90を追加

　… fa-spinner fa-pulse fa-2x fa-fwを追加

こちらからそのままクラスを使える使用例を見ることができます。
スタイルいろいろ 公式サイトExamples
可愛いアイコンやアニメーション、なんだか楽しいですね。

この他、こまかいサイズ変更・回転や色や線、アニメーションなどを自分でクラスをつけてスタイルシートで指定すれば好きなように装飾できます。

Font awesome 表示されない！？

あれ？設定したのに表示されない！
そんな時にチェックしたいポイントがこちらです。

Font awesomeのバージョン

ヘッダーに入れたCDNなどのFont awesomeのバージョンと、ページに入れたアイコンのFont awesomeのバージョンが異なると表示されません。

cssの記述

font-familyやfont-weightが抜けてないか確認します。バックスラッシュ”\”も忘れずに。
Solidタイプの表示にはfont-weight: 900;を、Regularタイプ、Brandsタイプの表示にはfont-weight: 400;を入れます。
バージョンによっても書き方が違うので注意します。

有料版から選んでしまった

アイコン一覧から探したときに、有料のアイコンからコピーしているかも？

おまけ　よく使う特殊文字

スペース

（cssで空白を作るほうが、調整可能で環境の影響が小さいため推奨されているようです。）

 　半角スペース
 　半角スペースより少し広い空白
 　全角スペースとほぼ同じ大きさの空白
 　 の空白より小さい空白

 

その他

©　コピーライト（著作権）
"　クォーテーション（引用符）
&　アンパサンド
<　小なり
>　大なり