第二回目はFont Awesome v5の使い方です。使い方が増えたらしいけど、この記事はWEBフォントでの使用に限定にします。
v4から使い方が変わって戸惑った人も多いのでは。
追記2022.10.05: v6も公開されたことでサイトの使い勝手が変わっていたので、記事も修正しました。
目次
Font Awesome v5をWEBフォントとして使用する
CDNを入手する
v4まではWEBフォントとして使用するのが基本的でしたが、v5以降は複数の使い方ができるようになり、またアカウント登録が必要になります。個人使用では無料プランで十分だと思います。
フォームからメールアドレスを送信するとコードが返ってくるので、headタグにペーストします。
追記2022.10.05: この記事を作成したアカウント登録すると上記のようにメールにコードが記載されていましたが、現在は異なるかもしれません。サイトのヘッダーメニューのKitsに入り、未作成ならNew Kit+をクリックし作成、作成済みなら表示されている英数をクリックするとコードが表示されているページにたどり着きます。
<script src="https://kit.fontawesome.com/xxxxxxxxx.js" crossorigin="anonymous"></script>当然このコードは人によって変わります。上記はダミーです。
アカウントを作成すると以後ログイン画面からプランや使用状況が確認できます。
v5←→v6へのバージョン移動も簡単
Font Awesome v6に移行する場合は、ヘッダーメニューのKitsからYour Kitの数字をクリック→Settingsタブへ移動しVersionのプルダウンからバージョンを選択→ページ下部のSave Settingsボタンをクリックで、簡単に変更できます。
使いたいアイコンを探す
FREEのアイコンだけ使う前提で話を進めます。
左サイドメニューで「FREE」のアイコンを絞り込んでいます。
上記リンクではv5用のFreeのアイコンの検索画面になっていますが、普通に自分でサイトにいった場合は検索窓の右下にFont Awesomeのバージョンを選択できるプルダウンがv6になってないか気をつけてください（v5では使用できないアイコンが表示されることになります）
使いたいアイコンをクリックすると、詳細が開きます。
HTMLタグで使用する
お馴染みiタグをコピペします。
<i class="fab fa-accessible-icon"></i>
車椅子アスリートのアイコンが出ました！
よく見るとclassがFont Awesome v4から変化しています。過去案件からの流用でclassを持ってくるとアイコンが表示されないので気を付けましょう。
このHTMLタグの場合、自分でCSSで調整もできますが、Font Awesomeのオプションでサイズや間隔やアニメーションを設定できるclassがあります。
使いこなせると便利かもしれないので、興味あったらサルワカさんのサイトで分かりやすくまとめられているのでご参照ください。
英語が気にならなければ、本家サイトのドキュメントが一番詳しいです。
CSSで記述して擬似要素で使用する
v4からの変更点
font-familyの指定が変更になり（v4ではいらなかった””で囲む必要もあります）、font-weightの指定が必要になりました。
| font-family | “Font Awesome 5 Free” | “Font Awesome 5 Brands”（ブランドロゴアイコンを使用する場合はこちら） |
|---|---|---|
| font-weight | 900（Solid） | 400（Regular、Brands） |
<p class="fontawesome-test03">ダミーテキストです</p>p.fontawesome-test03::before {
font-family: "Font Awesome 5 Free";
content:'\f24e';
font-weight: 900;
padding-right: 3px;
}ダミーテキストです
今度は天秤アイコンにしてみました。
こちらもアイコンの色を変えたい場合は、color: #877666;といったように追記します。
ダミーテキストです
WordPressで使用する
Font Aewsomeが出しているプラグインもありますね。こちらはv6対応になっています。
私は基本的にCDNを読み込む方法を使ってるので、こっちは試していません。プラグインのバージョンアップに伴ってFont Awesomeのバージョンも変化していくことを考えると、自分でバージョンを意図的に固定できるCDNの方がいいんじゃないかと。