Font Awesome5の使い方を徹底解説!2019年版

WEBデザイン
助手くん
助手くん
Font Awesome のアイコンが便利だから、自分のブログでも使ってみたい!
管理人
管理人
って悩みを、解決していきます。

手軽で便利な web フォント「Font Awesome」。無料で 1,500 以上の使えるアイコンが使えます。

文字だけのサイトよりも、アイコンでナビゲーションしした方が、読者にとってもみやすい環境になることは間違いありません!

というわけで今回は、Font Awesome5の使い方を、徹底解説していきます。

Font Awesome5 の使い方

Font Awesome を使う手順
  1. Font Awesome の会員登録をする
  2. Font Awesome の導入準備をする
  3. HTMLまたは、擬似要素でアイコンを設置する

Font Awesome5 の使い方は、ざっくりこんな感じです。

それでは、ひとつずつ解説していきます。


1.Font Awesome の会員登録

Fontawesome signin

手順1は、Font Awesome で会員登録をします。

会員登録はこちら:Font Awesome

2019年から、登録がひつようになってます。以前はコードをコピーだけでしたが、仕様変更です。

英語が苦手でもわかりやすい記事を用意しました。登録手順は、こちらをどうぞ↓


2.Font Awesome の導入準備

Font Awesome の導入する3つの方法
  1. 導入方法1:WordPress プラグインを使う
  2. 導入方法2:HEAD内部にコードを入力する
  3. 導入方法3:SVG で導入する方法

手順2は、Font Awesome の導入準備をおこないます。どれか1つで、大丈夫ですよ。

WordPressなら、導入方法1がおすすめです。

それ以外なら、導入方法2または3を、お試しください。

1つずつ、解説していきます。


1.WordPress プラグインを使う方法

Wp fontawesome plugin

導入方法1は、WordPress プラグイン「Font Awesome」を、インストールします。

ダウンロードはこちら:Font Awesome

WordPress をご利用なら、プラグインで準備する方法がいちばん簡単です。

WordPressプラグイン「Font Awesome」のインストール方法と設定などの使い方は、こちらの記事をどうぞ↓


2.HEAD内部にコードを入力する方法

Fontawesome head

導入方法2は、<head></head> の中にコードを入力します。

助手くん
助手くん
<head></head>の中といわれてもわかりません...

わたしも初心者のころ、おなじでした。

というわけで、ブログサービスごとの実例をもとに、やり方を画像つきで解説させていただきました。

くわしいやり方は、こちらの記事をどうぞ↓

かんたんに <head></head> にコードを書き込めるWordPressプラグイン「Insert Headers and Footers」も、おすすめですよ↓

Insert Headers and Footers


3.SVG で導入する方法

導入方法3は、自前のサーバーを使って導入するSVGを使う方法です。

初心者には、すこしむずかしいです。

後日、別記事にて解説させていただきます。

※後日、追加予定。

3.設置方法

Font Awesome の設置方法
  • HTML でそのままコードを書く
  • 擬似要素で追加する

いよいよ Font Awesome アイコンを、あなたのサイトに設置していきます。

それでは実例をもとに、どのように設置するのか解説します。


HTML でそのままコードを書く

Wp globalmenu icon

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 で設置する方法で、アイコンを設置してみた記事がありますので、参考にしてみてください。

くわしいやり方は、こちらをどうぞ↓


擬似要素で追加する

Fa pseudo elements eycatch

擬似要素で、Font Awesome を追加してみましょう。

擬似要素で追加するとは?

Whatis css preudo

擬似要素で追加するとは、指定した HTML の前後に CSS で新たなコンテンツを加えるということです。

CSS擬似要素で呼びだす方法をおぼえると、WEBデザインの幅がひろがりますよ。

上級者むけですが、ぜひ覚えておきましょう。たとえば、こんな感じ↓

Font Awesome を擬似要素で追加する例

実際のやり方などくわしいことは、こちらをどうぞ↓

表示されないときは?

表示されないときの対処法
  1. バージョンの違いを確認
  2. 擬似要素のコードを確認
  3. ダブルクォーテーションを確認

わたしの経験だと、この3つが主な原因であることがおおいです。

アドバイスが、Font Awesome の「 □ 」で表示される問題を、解決できたら幸いです。

バージョンの違いを確認

まずは、Font Awesome のバージョンを確認してみましょう。

失敗例
  • HEAD内の Font Awesome コードが、バージョン4だった
  • バージョン5のコードが入っているのに、貼り付けたアイコンがバージョン4系だった
  • AMP ページの場合は、プラグイン「Font Awesome」が稼働しない
  • AMP ページの場合は、HEAD内に改めてコードを入れる必要がある

古いバージョンのアイコンを使っているため、

個人的に AMP ページの HEAD に、2つのコードを書いています↓

  • <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">

おまじない的なコードで、表示されない問題を解決したことがあります。

ほんとうは、すべてのアイコンをバージョン5で統一すればいいので、これから始める人には関係のない話かもしれません。

擬似要素のコードを確認

擬似要素のコードを、確認してみましょう。

擬似要素で呼びだすと、基本的にこの3つのコードは必須になります↓

.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 の使い方の手順
  1. 会員登録
  2. 導入準備
  3. 設置する

会員登録が必要になったり若干の変更があるため、初心者にもわかりやすく詳細に説明させていただきました。

Font Awesome5 の使い方をおぼえておいて、損はありませんよ。

とても簡単にあなたのサイトに、高品質でわかりやすいアイコンを無料で設置できるのですから!

そのほか、記事更新に役立つブログツールは、こちらの記事をご覧ください↓

サウンドオルビス

4,902,878 views

サウンドテック・ラボ編集部兼ライター。「音楽×テクノロジー」をキーワードに、毎日記事を更新中。DTM音楽制作のハウツーや最新情報で、あなたの「やってみたい!...

プロフィール

ピックアップ記事

カテゴリ内の記事