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

Font Awesome 6

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

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

目次

Font Awesome 6 ダウンロード

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

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

v6fa-solid fa-house
v5fas fa-home
v4fa fa-home

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

3. 貼り付け

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

<i class="fa-solid fa-house"></i>
あわせて読みたい
Font AwesomeのアイコンをCSSに埋め込む方法 Font Awesomeのアイコンをul,liのリストに毎回付けるのが面倒だったのでCSSに埋め込んでみました。 Font Awesome 4 Font Awesome 4 <i class="fa fa-check-squa...
  • URLをコピーしました!
目次