wildhawk
画像を使わずアイコンが使える
WebアイコンフォントFontAwesomeの使い方
WebアイコンフォントFontAwesomeの使い方
画像を使わずアイコンが使える
今回はこのサイトでも多様している「FontAwesome」をご紹介します。
こんな人にオススメ
アイコンを画像で用意するのが面倒
他のサイトと同じようなアイコンを使いたい
手軽にアイコンを使いたい
手軽に多くのアイコンが利用でき、スマホなどの機種にも依存せず自由に使えるので、最近のWebサイトには必ず使われています。是非使えるようになって欲しいです
FontAwesemeは、Webサイトで使用できるアイコンフォントのライブラリーです。
以下のようなアイコンが用意されているので、事前に画像を用意す必要がなく手軽に利用できます。
旧Twitter
X-Twitter
Instagram
WordPress
ホームアイコンや別タブで開くリンクのアイコンなど、視覚的に分かりやすいアイコンが多数用意されています。しかも手軽に利用できるのがメリットです。
【公式サイト】
FontAwesomeは、以下のような特徴があります。
- 豊富なアイコン数 : 数千種類のアイコンを収録（無料+有料）
- 増えるアイコン : 定期的にバージョンアップしており、収録されるアイコンが増え続けている
- CSSでカスタマイズ : サイズ・色・アニメーションの変更が可能
- SVG対応 : ベクター画像形式で拡大縮小しても画像が劣化しない（モダン環境のみ）
- 無料で十分 : 無料でも多くのアイコンが利用可能だが、Pro版やPro+版でさらに拡張可能
Cocoonなどの一部テーマでは、既に組み込んでいる場合もあり、幅広く利用されているのも特徴だと思います。
FontAwesomeは無料で利用できますが、有料版（Pro版、Pro+）もあります。違いは以下の通りです。
| 項目 | 無料 | 有料（Pro、Pro+） |
|---|---|---|
| アイコン数 | 約2,000個 | 約50,000個 |
| SVGサポート | （一部） | （高度な機能有り） |
| カスタムアイコンアップロード | （自作アイコンが追加可能） | |
| シャープアイコン（Sharp style） | ||
| ライセンス許諾 | 非商用・商用OK（但し Pro に比べ制限あり） | 商用利用に適したライセンスを付与 |
| 価格 | 無料 | 有料 |
※Pro+はアイコンパックが使え、カスタムアイコンのアップロード数も多くなっています。
※有料版は利用人などが異なるプラン（Pro Lite+、Pro、Pro Max）で価格が異なるので、詳細は公式サイト をご確認ください。
無料でも使えるアイコンが多く、かなり満足できるし、公式サイトにも無料版は制限する予定は無いと一応、書かれているので、無料版の利用で良いと思います。
FontAwesomeを使うのはメリットが多くありますが、デメリットもあります。
- バージョンアップが多い
アイコンが増えるメリットもありますが、古いバージョンだと表示されないこともあり、アイコンを設置する場合に確認が必要 - アイコンの数が多すぎる
使えるアイコンが多いと選び放題ですが、逆に使いたいアイコンを絞り切れず、毎回迷う
例えば、別タブで開くアイコンはとがあり、サイト内で混在させたくないので、どちらを使うか決めた方が良い。
ちなみに、このサイトは後者で統一してるハズ。。。
最近は無料版を使う場合、ユーザー登録をする必要があります。
ただ、昔はユーザー登録しなくても利用できたので、私はユーザー登録せず、今もそのまま特に問題なく利用しています。
ユーザー登録すると英語で最新情報が届くと思われますので、良い子は登録しましょう。
【公式サイト】会員登録
FontAwesomeを使うには、以下を設定する必要があります。
- ① FontAwesomeの読み込み
- ② FontAwesomeの表示
- ③ FontAwesomeのカスタマイズ
FontAwesomeを読み込むには、以下のいずれかを設定する必要があります。
- CDNで読み込み
- FontAwesome kitで読み込み
- ダウンロードしたフォントファイルを読み込み
CDNで読み込み
CDNとはContent Delivery Network（コンテンツ・デリバリー・ネットワーク）の略称で、Webサイトの画像やコンテンツをキャッシュさせて負荷を分散し、画面表示を高速化する技術です。
FontAwesomeはCDNを用意しているので、下記のコードを<head>内に貼り付けるだけで対応できます。
※バージョン部分は最新バージョンにしてください。画面は「6.7.2」です。
See the Pen FontAwesome by 山内孝幸 (@hezfscev-the-looper) on CodePen.
FontAwesome kitで読み込み
FontAwesome kitも、公式が提供している設定方法です。
利用にはユーザー登録が必要です。
FontAwesome kitを使うメリットは、CDN同様にアイコンがアップデートしてもそのまま利用できることです。
無料版でも利用は可能ですが、アクセス数の上限が決められているので、アクセス数が多いサイトでは、有料版にするか「ダウンロードしたフォントファイルを読み込み」の方法にしましょう。
ダウンロードしたフォントファイルを読み込み
フォントファイルも、公式が提供している設定方法です。
利用にはユーザー登録が必要です。
フォントファイルを使うメリットは、FontAwesomeに都度アクセスする必要がないことです。
デメリットは、フォントファイルを自社のサーバーに格納するため、容量を使う必要があり、バージョンアップするには別途、フォントファイルをダウンロードして、自分のサーバーに格納する必要があります。
私はユーザー登録していないので、CDNで読み込む方法しかできません。
ただCDNの提供を停止するアナウンスがあったようなので、ご利用は自己判断でお願いいたします。
FontAwesomeの設定ができたら、アイコンを表示させたいと思います。
公式サイト（https://fontawesome.com/icons ）の上部「Icon」をクリックします。
検索欄で、表示したいアイコンを入力して検索します。
もちろん英語で入力します。
今回は試しに「home」で検索します。
PROが表示されているアイコンは有料版のみ利用できます。
今回は試しに「house」のアイコンをクリックします。
画面のようなポップアップが表示されます
右上のプルダウンやアイコンで、様々なスタイルを選択できますが、無料版はデフォルトしか利用できません。
今回はHTMLを試したいので、表示されているタグをクリックすると、コピーできます。
それをWebページに貼り付けると、アイコンが表示されます。
See the Pen house by 山内孝幸 (@hezfscev-the-looper) on CodePen.
FontAwesomeの公式からコピーしたHTMLタグは、そのまま利用するだけでなく、カスタマイズすることも可能です。
検索後にアイコンをクリックした後のポップアップ画面で、アイコンの左下のをクリックすると「COLOR」「SIZE」「ROTATE」「FLIP」を選ぶことができます。
選択後に表示されるHTMLをコピーしてWebページに貼り付ければ、カスタマイズしたアイコンを表示することができます。
See the Pen house2 by 山内孝幸 (@hezfscev-the-looper) on CodePen.
FontAwesomeのclassには様々なスタイルを用意しています。
その内の「fa-stack」はアイコンを重ねることが可能です。
- 親のタグ（サンプルではspan）のclassにfa-stackを設定
- アイコンの下側のiタグにはclassにfa-stack-1xを設定
- アイコンの上側のiタグにはclassにfa-stack-2xとstyleで赤表示を設定
すると、以下のように表示されます。
See the Pen house3 by 山内孝幸 (@hezfscev-the-looper) on CodePen.
素材サイトのご紹介
このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。
wildhawkからも写真素材を提供しています。是非ご活用ください