はじめに
Font Awesomeの使用方法をメモしておきます。
(バージョンはFontAwesome6)
Font Awesomに登録
Font Awesomにて、登録 or ログイン。
HTMLファイルのタグ内にFont Awesomeの読み込みを記述
FontAwesomeホームページの右上のアイコンからYour Kitsにアクセスし、発行済みのKitをクリックすると、
<script src="https://kit.fontawesome.com/[ユーザーによって違います].js" crossorigin="anonymous"></script>
上記のようなscriptタグが表示されるので、コピーしてHTMLファイルのheadタグ内に記述する。
アイコンを表示させたい位置に記述
ホームページ内のIconsにアクセスすると、使用可能なアイコンが全て表示される。
（有料登録でないと使用できないものも有り）
使用したいアイコンをクリックし、Start Using This Iconをクリックするとアイコンのコードが表示されるので、コピーして表示したい部分に貼り付ける。
アイコンのサイズ指定
アイコンのサイズ指定の方法はfa-[サイズ]を指定するだけ。
//サイズで指定
<i class="fas fa-[アイコンの名前] fa-xs"></i>
<i class="fas fa-[アイコンの名前] fa-sm"></i>
<i class="fas fa-[アイコンの名前] fa-lg"></i>
//数字で細かく指定(1~10)
<i class="fas fa-[アイコンの名前] fa-1x"></i>
<i class="fas fa-[アイコンの名前] fa-2x"></i>
.
.
.
<i class="fas fa-[アイコンの名前] fa-9x"></i>
<i class="fas fa-[アイコンの名前] fa-10x"></i>
アイコンの向きを変更
//90°回転（右周り）
<i class="fas fa-[アイコンの名前] fa-rotate-90"></i>
//180°回転
<i class="fas fa-[アイコンの名前] fa-rotate-180"></i>
//270°回転
<i class="fas fa-[アイコンの名前] fa-rotate-270"></i>
//反転
<i class="fas fa-[アイコンの名前] fa-flip-horizontal"></i>
//ぐるぐる回転
<i class="fas fa-[アイコンの名前] fa-spin"></i>