【 更新 】おすすめ記事はこちら

ツール

「Font Awesome 6」をCDNやダウンロードデータでブラウザに表示する

2022年2月7日に「Font Awesome」がバージョンアップされました。

今回は「5」から「6」へのメジャーアップデートということで、公式サイトも一新！

Font Awesome公式サイト

検索ボックスからアイコンを探して選ぶところは、前のバージョンと変わりませんが、

キーワード別に分けられたメニューからも選べるようになりました。

アイコンカテゴリー一覧

試しに「Medical+Health」を開くと、関連したアイコンが一覧で表示されます。

スタイルタブと「Free icons」の切り替えで、絞り込みもカンタン。

アイコンスタイル一覧

アイコンスタイルに「Thin」「Duotone」が加わり、表示のバリエーションも増えています。

気になるアイコンの数はというと、

Proプランで16,000種類（前回5,000種類）、Freeプランで2,000種類（前回1,500種類）以上と、大幅アップ。

引き続き「Adobe XD」や「Illustrator」で、デザインとしても利用することができます。

関連記事「Font Awesome 6」のアイコンをIllustratorやXDで使う方法

ますます使い勝手がよくなった「Font Awesome」。

変更点を押さえながら、ブラウザに表示するまでの手順を改めて確認していきましょう。

はじめに

「Font Awesome」をサイトで利用するには、まず、ベースとなる「コアスタイル」が必要。

以下どちらかのデータを<head>に読み込ませます。

  1. CDN（外部サーバー）にあるデータ
  2. ダウンロードデータ

内容はどちらも同じで、外部に接続して取得するか、ディレクトリに設置して適用するかの違い。

時間をかけずにサッと導入するなら、おすすめは①です。

「コアスタイル」を読み込んだあとは、「Font Awesome」をブラウザで表示する作業。

  1. <i>タグで埋め込む（HTML）
  2. プロパティの値で指定する（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をコピーします。

cdnjsにあるCDNコードをコピー

全データが含まれた「all」であれば、コードが一行で済みます。

コードを<head>にペースト。

<link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

ダウンロードする場合

「Font Awesome」のトップから「Download」をクリックします。

Downloadをクリック

ダウンロードページの「Font Awesome 6」にある「Free For Web」をクリック。

「LATEST」と出ているものが最新です。

Free For Webをクリック

ファイルを展開して「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」をクリックします。

Font AwesomeのInconsをクリック

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

ここでは「smile」と入力。

smileと入れて検索

次にカテゴリを確認します。

検索内容によって変わりますが「Solid」「Regular」「Brands」の3つが選択されていればOK。

Solid、Regular、Brandsカテゴリを選択

「Regular（一部）」「Light」「Thin」「Duotone」は、Pro限定で利用できます。

今回は無料で使いたいので「Free」をクリック。

Freeにチェックを入れる

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

smileの検索結果

ブラウザに表示

選んだアイコンを表示させていきます。

押さえておきたいのは「フォントの太さ」。「HTML」「CSS」どちらも共通です。

スタイル@font-weight
Solid900
Regular400
Light300
Thin100
Duotone900
Brands400
スタイル別（アイコンの太さ）

スタイルの見分け方は、赤枠のところ。

HTMLコードからスタイルを判断

アイコンを設置、指定したあとにfont-weightを入れてください。

HTMLの場合

「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」をコピーします。

Unicodeをクリックしてコピー

コードを表示したいところにペースト。ここでは <section> の中に入れます。

<body>  
    <section>
        <div class="i"></div>
    </section>
</body>

アイコンスタイル別のfont-familyは、下表のようになります。

スタイル@font-family
SolidFont Awesome 6 Free
Font Awesome 6 Pro
RegularFont Awesome 6 Free
Font Awesome 6 Pro
LightFont Awesome 6 Pro
ThinFont Awesome 6 Pro
DuotoneFont Awesome 6 Duotone
BrandsFont 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
Solid900
Regular400
Light300
Thin100
Duotone900
Brands400
スタイル別（アイコンの太さ）

「Font Awesome」のほかにも、GoogleのWebフォント「Material Icons」もおすすめ。

Material Iconsの公式サイト