ブログをやっている人「Font Awesomeのアイコンがうまく表示されない。CDNとかダウンロードとか、使い方がよくわからないので、詳しい手順を知りたいな。」
こんな人向けに書いてみました。
Font Awesome（フォントオーサム）には、CDN・Kit利用とダウンロード利用、２つの使い方があります。自身がそうだったように、ここがごっちゃになると、アイコンがうまく表示されないので要注意です。
Font Awesomeの使い方
| 項目 | CDN・Kit | ダウンロード |
| レベル | 初心者向け | 中級者向け |
| アイコン設定 | やさしい | むずかしい |
| ブログ表示速度 | 低下しやすい | 低下しにくい |
CDN・Kit利用は、設定が簡単なので、ブログ初心者におすすめ。ただ、ブログの表示速度に影響が出やすいため、レンタルサーバーをいじれるなら、ダウンロード利用が望ましいです。
目次
- Font Awesomeってどんなサービス？
- Font AwesomeのCDN・Kit利用方法
- Font Awesomeをダウンロード利用方法
- Font Awesomeのアイコンの使い方
- Font Awesomeのアイコンのカスタマイズ
この記事を書いている人
自分のようにHTMLやCSSがよくわからない人向けに、Font Awesomeの利用方法を画像付きでまとめてみました。少しでも参考になれば幸いです。
Font Awesomeってどんなサービス？
Font Awesomeは、ブログをはじめ、Webサイトにアイコンを表示できる、Webアイコンフォントサービスです。全て商用利用OKで、有料版だと7,864個、無料でも1,608個のアイコンを使えます。
Font AwesomeのCDN・Kit利用方法
Font AwesomeのCDN利用方法です。
（CDN：Content Delivery Network）
この利用方法はインターネットを通じて、Font Awesomeのサーバからアイコンデータを取得し、それを自身のブログに表示させることになります。
- メリット ：設定が易しい
- デメリット：表示が重くなる
ブログ初心者など、とりあえずFont Awesomeのアイコンが表示されればOK、そんな人はCDNでサクッと設定してしまいましょう。
CDNからKitに移行中
※2022年現在、CDNも利用可能です。
CDN利用手順
- 公式サイトでCDNコードを取得
- header.phpにCDNコードを記述
Font AwesomeのCDN方式は、廃止予定となっています。そのため、将来的なことを考えると、無料会員登録を済ませて、Kit方式で利用した方が良いかもしれません。
手順①：CDNコードの取得
とはいえ、使用可能です。
サクッと利用するならこちら。
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
手順②：CDNコードの記述
Kit利用手順（CDN利用者は不要）
- 公式サイトでアカウント登録
- マイページでKitコードを取得
- header.phpにKitコードを記述
Font AwesomeのKit方式は、CDNに代わる新しい利用方法です。従来と異なるのは会員登録が必要なところで、個人用のKitコードが発行されます。無料で使えるのでご安心ください。
手順①：アカウントの登録
手順②：Kitコードの取得
手順③：Kitコードの記述
Font Awesomeのダウンロード利用方法（CDN・Kit利用者は不要）
Font Awesomeのダウンロード利用です。
この利用方法は、Font Awesomeのアイコンデータをダウンロードしてきて、自身が利用中のレンタルサーバーに配置することで、ブログに表示させます。
- メリット ：設定が難しい
- デメリット：表示が早くなる
ブログ中級者をはじめ、ブログの表示速度が気になる人、PageSpeed Insightsでパフォーマンスを指摘された人は、ダウンロード利用を検討してみましょう。
パフォーマンス改善の一例
※CDN・Kit利用より読者フレンドリーです。
ダウンロード利用方法（CDN・Kit利用者は不要）
- 公式サイトからアイコンデータを取得
- レンタルサーバーにアイコンを配置
- header.phpでアイコンを読み込む
Font Awesomeのアイコンデータは、アカウント登録しなくても、ダウンロードすることができます。ただ、使えるのは無料アイコンのみなので、ご注意ください。
手順①：アイコンデータの取得
手順②：アイコンデータの配置
これをレンタルサーバーのファイルマネージャーを利用してアップロードします。配置場所はpublic_html/ドメイン名/wp-content/themes/テーマ名/fonts/。厳密にはテーマ名以下なら大丈夫です。フォルダごとまるっと置きます。
手順③：アイコンデータの読み込み
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/fonts/fontawesome-free-6.x.x-web/css/all.css" type="text/css"/>
※パスやファイル名は修正してください。
Font Awesomeのアイコンの使い方
Font Awesomeのアイコンの使い方は…
- アイコンを見つける
- コードをコピーする
- コードを貼り付ける
とっても簡単です。例えば、画像のを使うなら<i class="fa-solid fa-gamepad"></i>のコードをコピペするだけ。こんな感じで2,000個も無料で使えます。
Font Awesomeのアイコンのカスタマイズ
Font Awesomeのアイコンは、カスタマイズも簡単にできます。まさに至れり尽くせりのサービスです。
- サイズを変える
- カラーを変える
- 表示角度を変える
- 左右・上限を反転させる
- 回転アニメーションを入れる
- アイコンを重ねて表示する
などなど。
細かな使い方は、サルワカさんの記事を読んでいただければ、全て解決します。アイコンの表示方法にこだわりたい人は、チェックしておきましょう。
以上、
Font Awesomeの使い方まとめでした。
２つの導入方法をおさらいすると…
| 項目 | CDN・Kit | ダウンロード |
| レベル | 初心者向け | 中級者向け |
| アイコン設定 | やさしい | むずかしい |
| ブログ表示速度 | 低下しやすい | 低下しにくい |
ブログの表示速度を考えると、CDN・Kit利用よりダウンロード利用がおすすめです。ただ、レンタルサーバーのファイルマネージャーをいじれることが前提となり、中級者向けと言えます。
そのため、ブログ初心者をはじめ、とりあえずFont Awesomeのアイコンを表示するだけなら、CDN・Kitでサクッと設定すると良いでしょう。慣れてきてから変更すればOKです。
