ウェブサイトやブログではSNSアイコンやボタン横の矢印アイコンなど、デザイン面と情報整理の両面でアイコンがとても役立ちます。
たた、自分でアイコンを全部作るのは大変です。そこで便利なのがアイコンをHTMLとCSSだけで表示できるFont Awesomeというサービス。アイコンフォントなので、色やサイズを文字の様に変更できるのが特徴です。
難しい設定は必要なく、CDNJSからCDN経由でファイルを読み込めばすぐに利用出来るようになります。
アイコンを用意するのが大変な時でもFont Awesomeなら大抵の物は揃うので、さっと手軽に使いたい時は便利です。
アローアイコンの様にCSSの疑似要素で作成出来るアイコンと、アイコンフォントの併用といった使い方もおすすめです。
今回はCDNでFont Awesomeの使い方、CDN以外での始め方や使い方も全部解説。カスタマイズやアイコンが表示されない場合についても紹介します。
※この記事では、font awesome 5もしくはfont awesome 6を対象にしています。
この記事の目次
Font Awesomeとは？
Font Awesomeとは、サイトやブログでアイコンフォントを簡単に利用できる様にするサービス。アイコンライブラリやツールキットと呼ばれるものです。
アイコンの表示には画像ファイルを使う必要は無いので軽量です。HTMLとCSSを使って表示させる事が出来ます。軽量かつ色やサイズをCSSで変更出来るようになっています。アニメーションを付ける事も可能です。
Font Awesomeは多くのサイトで使われており、SNSアイコンやペンや歯車と言った分かり易いモチーフや、ちょっとしたアクセントに役立つ矢印アイコンなどはよく見かけます。
アイコンの画像ファイルをダウンロードすれば、FigmaやIllustrator、Photoshopといった画像編集アプリでのデザイン時にも使えます。
Font AwesomeにはFree（無料版）とPro（有料版）の2つあり、どちらも商用利用が可能です。無料版と有料版の違いは利用出来るアイコンの種類と選べるスタイル（アイコンの見た目）の数です。
| Free無料版 | アイコン数 |
|---|---|
| Font Awesome 5 Free Icons | 1,608 フリーアイコン |
| Font Awesome 6 Free Icons | 2,025 フリーアイコン |
Font Awesome 6つの特徴を日本語で紹介
Font Awesomeはアイコンが簡単に使えるサービスですが解説はすべて英語。アイコンフォントを使えると言ってもFont Awesome全体としてはどんな特徴があるのか分かりにくいです。
実は私自身も「サイトでアイコンフォントを使ってきたけど、他には何が出来るの？」となったため、Font Awesomeの6つの特徴を日本語に翻訳、解説を加えて紹介します。
個人用CDN
翻訳：非常にシンプルな埋め込みコードをサイトに追加すると、Font Awesomeのすべてに即座にアクセスできるようになります。
これはHTMLのヘッダーでCSSファイルなどをCDN経由で読み込む事を指します。
<i class=”fa-regular fa-heart”></i>
翻訳：シンプルで覚えやすい構文を使用して、Webサイトにアイコンを配置。気分に合わせてスタイルを簡単に変更できます。
HTMLにiタグを追加し、アイコン用のクラスを付与して表示させます。サイズや色程度なら画像アプリを使わずともCSSで変更可能です。
インスタントアップデート
翻訳：コードに触れたりプッシュしたりすることなく、その場でアイコン構成を変更できます。
自動アクセシビリティなど
翻訳：アイコンのアクセシビリティを自動化し、読み込みタイミングを制御。Font Awesomeバージョン 4との互換性を確保します。
Font Awesome5以降からの仕様変更に対応するためのもの。
独自のアイコンをアップロードする
翻訳：プロジェクトに完璧にフィットするように、独自のカスタム アイコン、ロゴ、さらにはその他のアイコンセットを使用してFont Awesomeを拡張します。
これはKitと呼ばれる機能を使った方法で、自分が使いたいアイコンだけをセットにして読み込ませるもの。後述の「Font Awesomeの使い方」で解説します。
ダウンロード
翻訳：Figmaコンポーネント、アイコンフォント、SVGを使用してデスクトップ上でデザインするか、ファイルを取得して自身で管理します。
デザイナーが画像編集アプリでサイトのデザインで使うデータをダウンロード出来ます。当然コーディングでも同じアイコンフォントを指定出来ます。
Font Awesomeの始め方3つ
今回はFont Awesomeの無料版での使い方を紹介します。Font AwesomeではKitを使った方法をおすすめしていますが、無料版の場合は利用制限が厳しいのでサイトやブログの運営には向きません。
Font AwesomeのFree iconsと呼ばれる無料版を使うなら、CDNを使った読み込みがおすすめ。モックアップのデザインもするのであれば、一緒にアプリ用のファイルをダウンロードしておけば便利です。
Font Awesomeの始め方をおすすめ順にまとめると以下の通り。それぞれ使い方も紹介します。
- CDNでFont Awesomeを使う
- CDNJSからCDNで読み込む。
- ファイルをダウンロードして使う
- デザインアプリでアイコンを使う場合。
- Kitツールでアイコンを管理
- 利用するには会員登録が必要。
プロジェクトにもよりますが、基本的にはCDNを利用するのが簡単です。そもそもファイルのダウンロードやCDN経由でのファイル読み込みに会員登録は必要ありません。
CDNでFont Awesomeを使う
HTMLファイルのヘッダーにCDN経由のURLを追加するだけで利用出来るようになります。CDNを利用してFont Awesomeを読み込む事でファイルの読み込み速度の向上も期待できます。
このCDN（Content Delivery Network）とは、インターネット上でデジタルコンテンツを効率的に配信するためのネットワークの事。世界中に分散されたサーバーを利用してコンテンツを提供します。
CDNの配信サーバーにデータを一時的にキャッシュさせておく事で、ユーザーのブラウザからのロード時間を短縮し、ウェブサイトのパフォーマンスを向上させる仕組みです。
Font AwesomeはcdnjsというサイトのCDNを利用します。このサイトに掲載してあるリンク先から必要なリンクを読み込ませるだけ。使い方と共に紹介します。
CDNJSでFont Awesomeを読み込む方法
CDNJSは無料で利用可能なCDNの一つ。オープンソースのJavaScriptライブラリやフレームワーク、CSSライブラリなどの静的なウェブリソースを提供しています。
URLを見ると分かる通り、Font Awesomeのファイルをホストしているcdnjsはcloudflare（クラウドフレア）なので安心です。
CDNJSで使うファイルをコピーする
Font Awesomeの場合、まず本体であるall.min.cssかfontawesome.min.cssのどちらかを読み込ませます。それぞれの違いはすべてのアイコンスタイルを含むか？含まないか？です。
プロジェクトに合わせてregular.min.cssやbrands.min.cssなど必要なCSSファイルだけを含める事でページの読込み速度向上になります。
アイコンをクリックすればコピー出来ますが、内容はそれぞれ要件に合わせて選んでください。
- 表示されているURL部分だけのコピーです。linkタグなどは自分で記述します。
- リンクタグのコピーです。integrity属性とreferrerpolicy属性が含まれています。
- integrity属性は、外部ファイル（通常はスクリプトやスタイルシート）が改ざんされていないことを確認するためのセキュリティ機能です。
- referrerpolicy属性は、例えば、ユーザーがあるサイトから外部サイトに遷移する際に、外部サイトに元のサイトの情報を漏洩させたくない場合に使用されます。
- integrity属性のハッシュ値をコピーします。
<!-- まずはFont Awesomeの本体を読み込む -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/fontawesome.min.css" integrity="sha512-d0olNN35C6VLiulAobxYHZiXJmq+vl+BGIgAxQtD5+kqudro/xNMvv2yIHAciGHpExsIbKX3iLg+0B6d0k4+ZA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- BrandsやSolidファイルを使う場合 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/brands.min.css" integrity="sha512-8RxmFOVaKQe/xtg6lbscU9DU0IRhURWEuiI0tXevv+lXbAHfkpamD4VKFQRto9WgfOJDwOZ74c/s9Yesv3VvIQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/regular.min.css" integrity="sha512-TzeemgHmrSO404wTLeBd76DmPp5TjWY/f2SyZC6/3LsutDYMVYfOx2uh894kr0j9UM6x39LFHKTeLn99iz378A==" crossorigin="anonymous" referrerpolicy="no-referrer" />これでFont Awesomeを利用する準備が出来ました。HTMLタグのクラスへの記述方法は、後述するFont Awesomeの使い方をご覧下さい。
ファイルをダウンロードして使う
Font Awesomeのアイコンはダウンロードして利用する事も出来ます。ダウンロードファイルはウェブ用とデスクトップアプリ用の2つがあります。
- Webサイトやブログで使用するファイル「Free for Web」
- デスクトップアプリで使用するファイル「Free for Desktop」
用途や目的に合わせて、ファイルをダウンロードして下さい（それぞれFree版とPro版があります）。
現在Version5とVersion6が選択出来ます。バージョンによりファイル内容は異なります。
Web用とデスクトップ用のダウンロードファイルについて日本語に翻訳して解説します。
①Webサイトで使うダウンロードファイル
Webサイトやブログで利用する無料版ファイルをダウンロードする場合は【Free for Web】を選択します。
こちらはFont AwesomeのWebFontsとCSSをサーバーのディレクトリに保存して使用します。
fontawesome.cssとスタイルであるsolid.cssなどのCSSファイルを格納します。
通常のCSSファイルと同じようにheadタグ内にパスで読み込ませます。コアスタイルファイルであるfontawesome.cssを一番最初に読み込ませます。
<head>
<!-- Font AwesomeのSolidとBrandsファイルを使う場合 -->
<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet">
<link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet">
</head>
<body>
<i class="fa-solid fa-user"></i>
<!-- ↑ solid styleのクラス指定 -->
<i class="fa-brands fa-github-square"></i>
<!-- ↑ brand styleのクラス指定 -->
</body>
②デスクトップアプリで使うダウンロードファイル
実はデザインの編集アプリでもウェブと同じアイコンフォントが使えます。デザインの段階でもFont Awesomeを使ってデザインしておけば、完成時のイメージを掴む事が出来ます。
デスクトップ用の無料版ファイルをダウンロードするには【Free for Web】を選択します。
ダウンロードしたフォルダにはフォントファイルとSVG画像が含まれています。フォントファイルをPCにインストールすれば、画像編集アプリのテキストツールでFont Awesomeのアイコンフォントを表示出来ます。
例えばペンのアイコンをテキストで入力する場合は、フォントツールでFont Awesome 6 FreeのSolidを選び、「pen」と打てばペンのアイコンになります。クラスで指定した「fa-pen」の「pen」の部分ですね。
<i class="fa-solid fa-pen"></i>アイコンフォントのクラス名はFont Awesomeの公式サイトで探すと便利です。
一方、SVG画像ファイルはFigmaやIllustrator、Photoshopなどでアイコン画像を利用する事も出来ます。モックアップを作る際には重宝します。
新しい合字ベースのフォント ファイルを使用して、それを非常に簡単にすることを試みました。さらに必要な場合に備えて、各アイコンの洗練されたベクター SVG バージョンが個別に含まれています。
| フォルダー | ファイル |
|---|---|
| /otfs | Font Awesomeの各スタイルのフォントファイル Font Awesome 6 Free-Solid-900.otf Font Awesome 6 Free-Regular-400.otf Font Awesome 6 Brands-Regular-400.otf |
| /svgs | Font Awesomeの各アイコンに最適化された個別の.svg ベクター ファイル (スタイルごとに分離) |
Kitツールでアイコンを管理
Kitでは自分のアイコンをアップロードしたり、プロジェクトに必要なアイコンやスタイルだけを組み込んだアイコンのセットを1つだけ作れます。Font Awesome CDNのように、HTMLのヘッダーに自分専用のコードを1行追加するだけです。
ただ無料版の場合だと利用制限が厳しく、月間ページビュー10,000までのアクセス制限があります。恐らくサイトやブログの運営に使うならすぐに足りなくなるでしょう。
もし無料のまま使いたいのであれば、ポートフォリオサイトなどアクセスが限定的な場所で使うのがおすすめです。
Kitを使うためには会員登録とKitの設定が必要です。
Font Awesomeの使い方
Font Awesomeのアイコンはを使うためにはアイコンのクラス名を知る必要があります。検索窓もありますが、名前で探すよりもカテゴリーやスタイルから選ぶ方が分かり易いと思います。
まずサイトのページ上部にある【icons】からアイコンフォントページへ行くと、ページ内に各カテゴリーへのリンクボタンが並んでいます。アイコン一覧へはここから行く事が出来ます。
カテゴリーのリンクボタンからアイコンフォント一覧へ行くと以下の様になっています。今回は【Design】カテゴリーを選びました。
アイコン一覧ページではFree iconsとPro版が一緒に並んでいます。アイコンの数が多いので、無料版を使う場合はFree iconsにチェックを入れておく事で無料版だけに絞り込むと分かり易いです。
ここでは真ん中にある【pen】のアイコンを使って解説をしていきます。
①アイコンファミリーを選択する
ClassicとSharpが選べます。無料のFree iconsで使えるのはClassicのみです。Sharpは文字通り、見た目が角ばった印象のアイコンです。
Sharpを選ぶと有料のPro版に切り替わります。
②アイコンのスタイルを選択する
アイコンスタイルはSolid、Regular、Light、Duotone、Tineがあります。
無料のFree iconsではsolidのみが使えます。
③カスタマイズできるスタイリングツール
【Styling Tools】をクリックすると見た目や動きを追加してカスタマイズ出来ます。
追加できるものは、【カラー】【サイズ】【アニメーション】【回転】です。
ここで無理に設定せず、CSSで変更しても良いと思います。
④タグとクラスをコピーする
各スタイルを変更するとそれに伴いクラスも自動的に追加・変更されます。
コードの部分をクリックすればそのままコピーする事も出来ます。後は自身のHTMLファイルにタグごと貼り付ければ完了です。
Font Awesomeが表示されない時の原因
Font Awesomeを使う際、意図せずアイコンが表示されない事も有ります。
Font Awesomeには複数のバージョンや有料版によるスタイルクラスの違い、Unicodeなどがあり、表示させるだけでも沢山の選択肢があります。
実は単純なミスである事も多いので紹介したいと思います。表示されない時は確認してみて下さいね。
Free版とPro版で使えるアイコンが違う
アイコン一覧で探す際、Free iconsにチェックマークを入れると無料版のみで絞り込みが出来るのですが、スタイルなどの設定を触っている間にPro版に切り替わってしまう事がよくあります。
無料で使う場合は、間違ってPro版のコードを貼っていないか確認しましょう。
バージョンでコードが違う
同じアイコンでもバージョンによりクラス名が違います。こちらも結構ありがちなミスです。
<!-- Font Awesome 5 の場合 -->
<i class="fab fa-twitter"></i><!-- Font Awesome 6 の場合 -->
<i class="fa-brands fa-twitter"></i>まとめ
Font Awesomeはウェブサイトやブログでアイコンを使うのに便利なサービスです。デザイナーがガッツリ作り込むほどではない場合や、運用の手間を減らしたい場合に取り入れてみてはいかがでしょうか。
無料プランでも十分使えますし、実際に仕事でFont Awesomeを使う事も有ります。今はまだ使った事が無い方も一度試してみて下さいね。
