第三回目はFont Awesome v6.2の使い方です（この記事を書いている段階では最新がv6.2です）。ちょっとコーディングから離れている間にサイトもリニューアルし、Font Awesome 6がメインになっていました。これまで同様、この記事はWEBフォントでの使用に限定にします。
目次
Font Awesome v6.2をWEBフォントとして使用する
まずはアカウント登録
v5で既にアカウント登録している人はログインしてそのまま使えます。まだアカウントを作成してない人は作成しましょう。
無料プラン、有料プランとありますが、個人使用では無料プランで十分だと思います。
v5からv6へ変更する
ヘッダーメニューのKitsより、Kitの詳細画面へ進みます。Settingsタブへ移動すると、バージョンを選択できるプルダウンメニューがあるので、バージョンを選択しページ下部のSave Settingsボタンをクリックで簡単に変更できます。
v5からv6への変更は問題ないようですが、逆のv6からv5へ変更した場合、これまで使用していたv6用のアイコンが表示できなくなります。
CDNを入手する
サイトのヘッダーメニューのKitsに入り、表示されている英数をクリックするとコードが表示されているページにたどり着きます。
<script src="https://kit.fontawesome.com/xxxxxxxxx.js" crossorigin="anonymous"></script>当然このコードは人によって変わります。上記はダミーです。
headタグにペーストしましょう。
使いたいアイコンを探す
FREEのアイコンだけ使う前提で話を進めます。
上記リンクではv6用のFreeのアイコンの検索画面になっていますが、普通に自分でサイトにいった場合は検索窓の右下にFont Awesomeのバージョンを選択できるプルダウンがv5になってないか気をつけてください。
使いたいアイコンをクリックすると、詳細が開きます。
HTMLタグで使用する
お馴染みiタグをコピペします。
<i class="a-solid fa-user-secret"></i>
上のところでアイコンのテイスト違いを選べますが、これらはほぼ無料対象外なので、使おうとしても”化け”てしまいます。
（化けた）
アイコンを簡単にアレンジする
なんとFont Awesomeではアレンジ用のclassが用意されています。
Kitsから入ったHow to Useのページに「3.Make It Awesome」のセクションからサイズ、回転（アニメーション）、リスト、重ねの解説ページへのリンクがあります。
英語のページですが、ここでclassの表を作る必要もないくらい分かりやすくまとめられてるのでご参照ください。
classを付加するだけで、ざっとこんな感じになります。
小さくした
大きくした
回転してる
点滅している
- リストの頭に付加してる
- リストの頭に付加してる
これは重ねようとしたけど失敗。
他のアレンジももっと詳しく知りたい方はこちらからご参照ください。
CSSで記述して擬似要素で使用する
基本的にはv5と変わりませんが、font-familyの指定が5から6へ変更になりました。（v5で使用していたものはそのまま表示できています）
以下、Freeのものだけ抜き出しました。
| font-family | “Font Awesome 6 Free”（Solid、Regular） | “Font Awesome 6 Brands”（ブランドロゴアイコンを使用する場合はこちら） |
|---|---|---|
| font-weight | 900（Solid） | 400（Regular、Brands） |
<p class="fontawesome-test04">ダミーテキストです</p>p.fontawesome-test05::before {
font-family: "Font Awesome 6 Free";
content:'\f24e';
font-weight: 900;
padding-right: 3px;
}ダミーテキストです
今度はトイレットペーパーアイコンにしてみました。
こちらもアイコンの色やサイズを変えたい場合は、color: #877666;、font-size: 2rem;といったように追記します。
ダミーテキストです