2022年2月7日に「Font Awesome」がバージョンアップされました。
今回は「5」から「6」へのメジャーアップデートということで、公式サイトも一新!

検索ボックスからアイコンを探して選ぶところは、前のバージョンと変わりませんが、
キーワード別に分けられたメニューからも選べるようになりました。

試しに「Medical+Health」を開くと、関連したアイコンが一覧で表示されます。
スタイルタブと「Free icons」の切り替えで、絞り込みもカンタン。

アイコンスタイルに「Thin」「Duotone」が加わり、表示のバリエーションも増えています。
気になるアイコンの数はというと、
Proプランで16,000種類(前回5,000種類)、Freeプランで2,000種類(前回1,500種類)以上と、大幅アップ。
引き続き「Adobe XD」や「Illustrator」で、デザインとしても利用することができます。
ますます使い勝手がよくなった「Font Awesome」。
変更点を押さえながら、ブラウザに表示するまでの手順を改めて確認していきましょう。
はじめに
「Font Awesome」をサイトで利用するには、まず、ベースとなる「コアスタイル」が必要。
以下どちらかのデータを<head>
に読み込ませます。
- CDN(外部サーバー)にあるデータ
- ダウンロードデータ
内容はどちらも同じで、外部に接続して取得するか、ディレクトリに設置して適用するかの違い。
時間をかけずにサッと導入するなら、おすすめは①です。
「コアスタイル」を読み込んだあとは、「Font Awesome」をブラウザで表示する作業。
<i>
タグで埋め込む(HTML)- プロパティの値で指定する(CSS)
こちらも状況に応じて適切な方法を選んでください。
注意点としては「Font Awesome 6 Pro」は、CDNを利用できないということ。
Font Awesome 6 Pro is not available on the Font Awesome CDN!
Font Awesome 6’s Free icons are available via the Font Awesome CDN with SVG or Webfont frameworks, however you’ll need to set up and use a Kit to access Pro Icons. If you’d still prefer to use the Pro icons via the CDN, Font Awesome 5 still supports that.
Install Manualy|Font Awesome Docs
CDNでProアイコンを使いたいときは「Font Awesome 5」で対応する必要があります。
今後はアカウントを作って「Kits」の利用を考えてもいいかも。
データを設置
CDNの場合
cdnjsにアクセスし、URLをコピーします。

全データが含まれた「all
」であれば、コードが一行で済みます。
コードを<head>
にペースト。
<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
ダウンロードする場合
「Font Awesome」のトップから「Download」をクリックします。

ダウンロードページの「Font Awesome 6」にある「Free For Web」をクリック。
「LATEST」と出ているものが最新です。

ファイルを展開して「css」フォルダをクリック。
all.css all.min.css brands.css brands.min.css fontawesome.css fontawesome.min.css ...
all.min.css
を自分の「css」フォルダに移動します。
さらに、同じ階層に「webfonts」フォルダ一式を入れてください。
├─css └─webfonts
ダウンロードデータと「同じ配置」「同じフォルダ名」にしないと、エラーになります。
他のファイルと同じように<head>
に読み込ませます。「webfonts」は不要。
<link rel ="stylesheet" href="./css/all.min.css">
アイコンを検索
「Icons」をクリックします。

検索ボックスに「英語で」キーワードを入力し、アイコンを探します。
ここでは「smile」と入力。

次にカテゴリを確認します。
検索内容によって変わりますが「Solid」「Regular」「Brands」の3つが選択されていればOK。

「Regular(一部)」「Light」「Thin」「Duotone」は、Pro限定で利用できます。
今回は無料で使いたいので「Free」をクリック。

無料枠で利用できる「smile」アイコンが絞られました。

ブラウザに表示
選んだアイコンを表示させていきます。
押さえておきたいのは「フォントの太さ」。「HTML」「CSS」どちらも共通です。
スタイル | @font-weight |
---|---|
Solid | 900 |
Regular | 400 |
Light | 300 |
Thin | 100 |
Duotone | 900 |
Brands | 400 |
スタイルの見分け方は、赤枠のところ。

アイコンを設置、指定したあとにfont-weight
を入れてください。
HTMLの場合
「HTML」タブのコードをコピーします。

コードを表示したいところにペースト。ここでは <section>
の中に入れます。
<body> <section> <i class="fa-regular fa-face-smile"></i><!-- 追記したコード --> </section> </body>
以下のように指定すると確認しやすいので、任意でお使いください。
@charset "utf-8"; body{ background-color: #183153; } /* 中央寄せ */ section{ position: absolute; top: 50%; left: 50%; -webkit-transform : translate(-50%,-50%); transform : translate(-50%,-50%); } /* アイコン */ i::before{ font-size: 30rem; font-weight: 400; /* 追記したコード */ color: #ffd43b; }
CSSの場合
「Unicode」をコピーします。

コードを表示したいところにペースト。ここでは <section>
の中に入れます。
<body> <section> <div class="i"></div> </section> </body>
アイコンスタイル別のfont-family
は、下表のようになります。
スタイル | @font-family |
---|---|
Solid | Font Awesome 6 Free Font Awesome 6 Pro |
Regular | Font Awesome 6 Free Font Awesome 6 Pro |
Light | Font Awesome 6 Pro |
Thin | Font Awesome 6 Pro |
Duotone | Font Awesome 6 Duotone |
Brands | Font Awesome 6 Brands |
以下のように指定すると確認しやすいので、任意でお使いください。
@charset "utf-8"; body{ background-color: #183153; } /* 中央寄せ */ section{ position: absolute; top: 50%; left: 50%; -webkit-transform : translate(-50%,-50%); transform : translate(-50%,-50%); } /* アイコン */ .i::before{ content: '\f118'; /* 追記したコード */ font-family: 'Font Awesome 6 Free'; /* 追記したコード */ font-weight: 400; /* 追記したコード */ font-size: 30rem; color: #ffd43b; display: inline-block; }
「content」プロパティの値には「半角のバックスラッシュ」を忘れずに入れてください。
おわりに
「Font Awesome 6」へのバージョンアップで、プロパティの値が少し変わりました。
font-family
がFont Awesome 6 xx
になったのはもちろんですが、
スタイル名を値に入れる形式から「Pro」「Free」というプラン別に分けて指定する形に変化。
有料プランでなければ、スタイルにFree
と入れるだけでいいので、分かりやすくなった印象です。
厳密には「Brands」(Proなら「Duotone」も)がスタイル名を指定しているので、気をつけるのはココだけ!
表示されないときは、font-weight
とあわせて内容を確認してくださいね。
スタイル | @font-weight |
---|---|
Solid | 900 |
Regular | 400 |
Light | 300 |
Thin | 100 |
Duotone | 900 |
Brands | 400 |
「Font Awesome」のほかにも、GoogleのWebフォント「Material Icons」もおすすめ。
