WebアイコンフォントFont Awesome 6【無料版】のダウンロードと使い方

2022.09.14

Font Awesomeが2022年2月にバージョン5からバージョン6にアップデートされました。Proプランで約16,000種類（前回約5,000種類）、Freeプランで約2,000種類（前回約1,500種類）と、大幅にアップされました。

今回はFont Awesome 6 のFreeプラン（無料版）設定方法をご紹介いたします。

Font Awesome 6 ダウンロード

「Free For Web」からダウンロードします。

ダウンロードして展開すると色々なフォルダがありますが、この中のcssフォルダ内にある all.min.css ファイルと webfonts フォルダ内一式をサイトにアップロードします。

css/all.min.css
webfonts

├─css
└─webfonts

※階層は変更しないでください。cssフォルダとwebfontsフォルダは同じ階層で。

<link rel ="stylesheet" href="./css/all.min.css">

<head> 内で all.min.css を読み込みます。

１、メニューの「Icons」または「」を選択します。

２、検索ボックスで英字で利用したいアイコン名を入れて検索します。

３、「Free」にして無料アイコンに絞ります。

使用したいアイコンを選択します。

コードのあたりをマウスオーバーしてクリックするとコピーできます。

書き方がバージョン5から変わりました。

あとは利用したいhtml上に貼り付けてご利用ください。

<i class="fa-solid fa-house"></i>

Bootstrap5カラムを入れ替える（表示順の変更）

Bootstrap5テキストクラス