Font Awesome5の使い方を徹底解説！2019年版
手軽で便利な web フォント「Font Awesome」。無料で 1,500 以上の使えるアイコンが使えます。
文字だけのサイトよりも、アイコンでナビゲーションしした方が、読者にとってもみやすい環境になることは間違いありません！
というわけで今回は、Font Awesome5の使い方を、徹底解説していきます。
目次
Font Awesome5 の使い方
- Font Awesome を使う手順
- Font Awesome の会員登録をする
- Font Awesome の導入準備をする
- HTMLまたは、擬似要素でアイコンを設置する
Font Awesome5 の使い方は、ざっくりこんな感じです。
それでは、ひとつずつ解説していきます。
1.Font Awesome の会員登録
手順１は、Font Awesome で会員登録をします。
会員登録はこちら：Font Awesome
2019年から、登録がひつようになってます。以前はコードをコピーだけでしたが、仕様変更です。
英語が苦手でもわかりやすい記事を用意しました。登録手順は、こちらをどうぞ↓
2.Font Awesome の導入準備
- Font Awesome の導入する３つの方法
- 導入方法１：WordPress プラグインを使う
- 導入方法２：HEAD内部にコードを入力する
- 導入方法３：SVG で導入する方法
手順２は、Font Awesome の導入準備をおこないます。どれか１つで、大丈夫ですよ。
WordPressなら、導入方法１がおすすめです。
それ以外なら、導入方法２または３を、お試しください。
１つずつ、解説していきます。
1.WordPress プラグインを使う方法
導入方法１は、WordPress プラグイン「Font Awesome」を、インストールします。
ダウンロードはこちら：Font Awesome
WordPress をご利用なら、プラグインで準備する方法がいちばん簡単です。
WordPressプラグイン「Font Awesome」のインストール方法と設定などの使い方は、こちらの記事をどうぞ↓
2.HEAD内部にコードを入力する方法
導入方法２は、<head></head> の中にコードを入力します。
わたしも初心者のころ、おなじでした。
というわけで、ブログサービスごとの実例をもとに、やり方を画像つきで解説させていただきました。
くわしいやり方は、こちらの記事をどうぞ↓
かんたんに <head></head> にコードを書き込めるWordPressプラグイン「Insert Headers and Footers」も、おすすめですよ↓
3.SVG で導入する方法
導入方法３は、自前のサーバーを使って導入するSVGを使う方法です。
初心者には、すこしむずかしいです。
後日、別記事にて解説させていただきます。
※後日、追加予定。
3.設置方法
- Font Awesome の設置方法
- HTML でそのままコードを書く
- 擬似要素で追加する
いよいよ Font Awesome アイコンを、あなたのサイトに設置していきます。
それでは実例をもとに、どのように設置するのか解説します。
HTML でそのままコードを書く
HTML で、Font Awesome を設置してみましょう。
コードをコピペするだけなので、初心者はこちらの方法がおすすめです。
こんな感じで↓
- Font Awesome HTML で導入
- → 実際のコード：<i class="fas fa-map-marked-alt"></i>
- → 実際のコード：<i class="fab fa-apple"></i>
- → 実際のコード：<i class="fas fa-external-link-alt"></i>
Font Awesome のよく使う場面は、ブログメニューなどのアイコンだと思います。
HTML で設置する方法で、アイコンを設置してみた記事がありますので、参考にしてみてください。
くわしいやり方は、こちらをどうぞ↓
擬似要素で追加する
擬似要素で、Font Awesome を追加してみましょう。
擬似要素で追加するとは、指定した HTML の前後に CSS で新たなコンテンツを加えるということです。
CSS擬似要素で呼びだす方法をおぼえると、WEBデザインの幅がひろがりますよ。
上級者むけですが、ぜひ覚えておきましょう。たとえば、こんな感じ↓
- Font Awesome を擬似要素で追加する例
- ↑このリストタイトルの指マークも、擬似要素です。
- WordPressのグローバルメニュー横にアイコンを設置する方法
- WordPressのグローバルメニュー横にアイコンを設置する方法
実際のやり方などくわしいことは、こちらをどうぞ↓
表示されないときは？
- 表示されないときの対処法
- バージョンの違いを確認
- 擬似要素のコードを確認
- ダブルクォーテーションを確認
わたしの経験だと、この３つが主な原因であることがおおいです。
アドバイスが、Font Awesome の「 □ 」で表示される問題を、解決できたら幸いです。
バージョンの違いを確認
まずは、Font Awesome のバージョンを確認してみましょう。
- 失敗例
- HEAD内の Font Awesome コードが、バージョン４だった
- バージョン５のコードが入っているのに、貼り付けたアイコンがバージョン４系だった
- AMP ページの場合は、プラグイン「Font Awesome」が稼働しない
- AMP ページの場合は、HEAD内に改めてコードを入れる必要がある
古いバージョンのアイコンを使っているため、
個人的に AMP ページの HEAD に、２つのコードを書いています↓
- <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
おまじない的なコードで、表示されない問題を解決したことがあります。
ほんとうは、すべてのアイコンをバージョン５で統一すればいいので、これから始める人には関係のない話かもしれません。
擬似要素のコードを確認
擬似要素のコードを、確認してみましょう。
擬似要素で呼びだすと、基本的にこの３つのコードは必須になります↓
.link::before {
content: '\f35d';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}- 確認すること
- content のシングルクォーテーションが、ダブルクォーテーションになっていないか
- font-family の名前に、ちゃんと Free がついているか
- font-weight は、無料版では「400・900」どちらかを指定しているか
- CSS ::before の書き方は、間違っていないか
あらためて、CSSの擬似要素で呼びだす方法を、読み返してみましょう↓
ダブルクォーテーションを確認
ダブルクォーテーションの自動変換を、確認してください。
ブログサービスによっては「""」が、自動変換されて引用符になっているパターンをよく見かけます。
WordPress では、ダブルクォーテーションが自動変換される機能があり、コピペするとうまく動作しないんですよ。
コードをコピーしてお使いになる際は、お気をつけください。
まとめ
Font Awesome5の使い方を、2019年用として徹底解説してきました。まとめると、こんな感じ↓
- Font Awesome5 の使い方の手順
- 会員登録
- 導入準備
- 設置する
会員登録が必要になったり若干の変更があるため、初心者にもわかりやすく詳細に説明させていただきました。
Font Awesome5 の使い方をおぼえておいて、損はありませんよ。
とても簡単にあなたのサイトに、高品質でわかりやすいアイコンを無料で設置できるのですから！
そのほか、記事更新に役立つブログツールは、こちらの記事をご覧ください↓
