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

FontAwesome6

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

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

FontAwesome6

Font Awesome 6 ダウンロード

https://fontawesome.com/download

FontAwesome6

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

Font Awesome 6 の設定

ダウンロードして展開すると色々なフォルダがありますが、この中の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 を読み込みます。

Font Awesome 6 の使い方

1. アイコンの検索

FontAwesome6

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

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

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

2. コードのコピー

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

FontAwesome6

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

v6 fa-solid fa-house
v5 fas fa-home
v4 fa fa-home

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

3. 貼り付け

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

<i class="fa-solid fa-house"></i>
Font AwesomeのアイコンをCSSに埋め込む方法
Font AwesomeのアイコンをCSSに埋め込む方法

関連記事