2022年3月現在、Font Awesomeの最新がVer6.1.1になっていました。
過去にも利用方法をご紹介しましたが、バージョンアップされているので、最新の使い方を改めてメモしておこうと思います。
▼過去記事はこちらからどうぞ
「Font Awesome」ウェブアイコンフォントの利用方法
改めて、そもそも「Font Awesome」って何？というところから確認していきます。
1.Font Awesomeって何？
Font Awesomeとは、商用利用が可能なWebアイコンフォントやSVGを提供しているサービスです。矢印やSNSアイコンなどちょっとしたアイコンマークを配置したい際に非常に便利で、webサイトやアプリ、Word、PDFなどのドキュメントなどにも埋め込んで利用することができます。
Webアイコンフォントってなに？
Webアイコンフォントとは、webサイトでフォントと同じように表示できるアイコンです。
これまで、画像で配置していたマーク的なものをアイコンフォントに変更することによって、拡大や縮小しても画質が荒れる心配もなく、色やサイズの変更もCSSで簡単にできます。さらにはアニメーションをつけるということも可能なため、数多くのwebサイトで利用されています。
無料版と有料版の違いは？
無料版の利用でも「商用利用」は可能です！
| 無料版 | 有料版 | |
| 利用できるアイコン数 | 2,009個 | 14,074個 |
| 利用できるKit数 | 1個 | 20個～無限 |
とりあえず使ってみたいという方は、無料版で試してみてアイコン数が足りないと感じたら有料版にアップグレードしても良いでしょう。
アイコンスタイルが6つある
以下のような６つのスタイルがあります。
- SOLID・・・・・塗りつぶし
- REGULAR・・・ライン
- LIGHT・・・・・細いライン
- THIN・・・・・より細いライン
- DUOTONE・・・濃淡で立体的
- BRANDS・・・・ブランドロゴ
塗りつぶしや線の細いシンプルなアイコンが用意されており、お好みで選択ができるようになっています。アイコンによっては、有料版（Pro）でしか利用できないスタイルもあるので、確認してください。
2.Font Awesomeの導入方法
Font Awesomeを使うには大きく２つの方法があります。
- CDNを利用して使う
- ファイルを自分のサーバーにアップロードして使う
簡単に使いたい方は「1.CDNを利用して使う」で試してみると良いでしょう。
1.CDNを利用して使う方法
CDNを利用して使うメリットは、アイコンなどを自身のサーバーにアップロードする必要がないため、サーバーへの負荷を考える必要がありません。また、HTMLタグを貼り付けるだけなので作業も簡単です。
また、CDNを利用して使う場合にはさらに２種類の方法があります。
- JavaScriptで読み込む
- CSSで読み込む
順を追って見ていきましょう。
1.JavaScriptで読み込む場合
JavaScriptで読み込む場合には、アカウント登録が必要です。登録の手順を見ていきましょう。
まずは、Font Awesomeの公式サイトから「Start」のページへ移動します。
すると「Get Started with Font Awesome」というメッセージ画面へ移動します。
黄色い枠線の中に、自分のメールアドレスを入力して「Send Kit Code」という黄色いボタンをクリックしてアカウント登録用のメールアドレスを登録します。
ボタンをクリックすると「Check Your Email」というメッセージが表示されるので、入力したメールアドレスの受信箱を確認します。
「Confirm Your Font Awesome Account Email Address」というタイトルのメールが送られてきますので、本文を確認します。
「Click to Confirm Your Email Address + Set Things Up」というボタンをクリックします。
最後に、パスワードを登録します。上と下に同じパスワードを入力して「Set Password & Continue」をクリックします。
すると、自分のアカウントが登録され、独自の「Kit’s Code」が発行されます。
下の画像の上部黄色い枠線の中が「あなたのコード」です。①の<script>コードを利用したいwebサイトの<head>～</head>タグ内にコピペすればすぐに利用することができます。
ここまでできたら「3.アイコンをwebサイトに表示してみる」へ進んでください↓
2.CSSで読み込む場合
Font AwesomeのGitHubのページへアクセスして、CDNコードをコピーしましょう。
黄色の枠の部分をコピーして、webサイトの<head>～</head>内に貼り付けます。
|
1 2 3 |
<head> <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> </head> |
ここまでできたら「3.アイコンをwebサイトに表示してみる」へ進んでください↓
2.ダウンロードして使う方法
ファイルをダウンロードして利用する場合は、Font Awesome公式サイトの「Download」ボタンをクリックします。
すると下の画面に移動しますので、左側の「6.1.1 For The Web」の「Free For Web」をクリックします。
すると、「fontawesome-free-6.1.1-web.zip」がダウンロードされますので、解凍してください。
中には各種フォルダーがありますが、ひとまず必要なのは「css」フォルダの中の「all.min.css」です。
cssフォルダの中には、下のようなファイルがあります。
この「all.min.css」ファイルを、使いたいwebサイトの<head>～</head>内で読み込めばOKです。※配置する階層は的確な場所に置くようにしましょう。
|
1 2 3 |
<head> <link rel ="stylesheet" href="all.min.css"> </head> |
3.アイコンをwebサイトに表示してみる
CDNまたはダウンロードのいずれかの手順で、<head>タグ内に読み込ませたら、次は実際にアイコンをサイト上に表示させていきましょう。
アイコンの表示方法は、以下の２パターンあります。
- HTMLに記述する
- CSSに記述する
どちらかやりやすい方を選択してください。
1.HTMLに記述する
それでは先に、1.HTMLに記述するやり方を見ていきましょう。
Font Awesome公式サイトのIconページを開きます。
※無料版を利用する場合は、左カラムの「Free」にチェックを入れてください。
無料で使える2,009個のアイコンに絞り込まれます。
アイコンを選ぶ
例えば下の画像の黄色枠の「angle-down（下向きの矢印）」を使いたいとします。
クリックすると下のようなウィンドウが表示されますので、HTMLに記載の<i>～</i>タグ部分をコピーします。
|
1 |
<i class="fa-solid fa-angle-down"></i> |
HTMLにペーストする
コピーしたタグを、HTMLの表示したい箇所にそのまま記述すればOKです。
|
1 |
<p><i class="fa-solid fa-angle-down"></i>下に移動する</p> |
2.CSSで記述する
次にCSSを使って記述する方法を見ていきます。
アイコンを選ぶ
先程と同じようにIconページから使いたいアイコンを選びます。
今度は下図の黄色枠の「Unicode」をコピーします。
address-bookのアイコンのUnicodeは「f2b9」ですね。
CSSに記述する
|
1 2 3 4 5 6 7 |
.icon::before{ content: '\f2b9'; font-family: "Font Awesome 6 Free"; display: inline-block; color: #333; font-size: 100; } |
この場合のHTMLコードは以下とします。
|
1 |
<p class="icon">address-book</p> |
iconクラスのcontentプロパティに、「半角のバックスラッシュ」を入れます。慣れないかもしれませんが覚えておいてください。
これで完了です！お疲れ様でした！
最後に
Font Awesomeの導入方法は以上になります。ここまで試してみて表示されないなど不具合がある場合は、有料版のアイコンやスタイルを無料で利用しようとしている。読み込んでいるFont Awesomeのバージョンが一致していない。などが考えられます。もし、表示されない場合は今一度確認してみてください。
有料版は年間$99～が利用ができますが、まずは無料版でお試ししてからアップグレードするか考えても良いと思います。
関連する記事はこちらです。