第二回目はFont Awesome v5.14の使い方です（この記事を書いている段階では最新がv5.14でした）。使い方が増えたらしいけど、この記事はWEBフォントでの使用に限定にします。
v4から使い方が変わって戸惑った人も多いのでは。
目次
Font Awesome v5.14をWEBフォントとして使用する
CDNを入手する
v4まではWEBフォントとして使用するのが基本的でしたが、v5以降は複数の使い方ができるようになり、またアカウント登録が必要になります。
フォームからメールアドレスを送信するとコードが返ってくるので、headタグにペーストします。
<script src="https://kit.fontawesome.com/xxxxxxxxx.js" crossorigin="anonymous"></script>これは人によって変わるので、上記はダミーです。
どうしてメールアドレスが必要なのさ？
「Webサイトごとにキットを作成しているため、コードをプッシュすることなく、設定をすばやくアップグレードして変更できます。これを行うには、Font Awesomeアカウントを作成する必要があります。これにより、どのキットがあなたのものであるかがわかり、戻って管理できるようになります。
Font Awesomeアカウントは無料でご利用いただけますが、アカウントを設定するには有効なメールアカウントが必要です。」。
と答えています。
「Font Awesome6作ってるよ〜」といったお知らせメールも届くので、Font Awesomeファンの人は楽しいかも。
アカウントを作成すると以後ログイン画面からプランや使用状況が確認できるみたいです。
使いたいアイコンを探す
FREEのアイコンだけ使う前提で話を進めます。
左サイドメニューで「FREE」のアイコンだけを表示させています。
使いたいアイコンをクリックすると、そのアイコンの詳細ページに移動します。色々な使い方が提示されていますね。
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タイプを使用する場合はこちら） |
<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が出しているプラグインもありますね。
基本的にCDNを読み込む方法を使ってるので、こっちは試しません。
