WEBアイコン「Font Awesome5」の使い方を紹介

「Font Awesome」とは無料で利用できるWebフォントのことで、Font Awesomeを使えばSNSへのリンクボタンや動物、記号などのさまざまなアイコンを設置することが可能です。

そんなFont Awesomeのバージョンのひとつ、「Font Awesome5」はWebフォントだけではなく、JavaScriptやSVGという画像形式にも対応しています。

今回はFont Awesome5を使う前の準備や表示方法、使い方などを解説します。

Font Awesome5とは

「Font Awesome5」とはWebサイトにアイコンや記号などを簡単に挿入できるサービス、Font Awesomeのバージョンのひとつです。

Font Awesome5の特徴はそれまでのFont Awesome4までとは異なり、JavaScriptやSVGにも対応できるようになったことにあります。

また、最新版として「Font Awesome6」が登場していますが、そちらが2021年10月時点でまだベータ版で、利用可能なアイコン数がほとんど変わりません。

よって、無料で利用する場合はFont Awesome5を使用していても何の問題もないと言えます。

Font Awesome5の無料版と有料版に違いはある？

Font Awesome5には有料版の「Proプラン」があり、こちらは1年間で99ドル（1万円）の使用料がかかります。

Font Awesome5のProプランを使用すると、以下のような特典を受けられます。

• 使用可能なアイコン種類、スタイル、カテゴリが増える
• 複数の使用者による管理に対応
• 読み込み高速化
• 閲覧数の上限が100万PVになっている
• サポートが強化されている

基本的にFont Awesome5の無料プランでもSNSやWebサイトで多用するアイコンなどの使用は可能です。

また、筆者の勤務していたWeb制作会社でコーディング中にFont Awesome5を使用していた際も、無料プランのものを使用していたので、無料プランのまま使い付けても問題はありません。

Font Awesome5を使う前の準備

Font Awesome5を使用する前には、少しだけ準備をしておきます。

ここではFont Awesome5を使用する前に必要な2種類の準備方法について、解説していきます。

CDNを使用する

「CDN」とはサーバー上に存在する画像やフォントのデータを読み込んで、サイトに表示する方法のことです。

このCDNを使用することで、アイコンをダウンロードして自分達のサイトにアップロードしなくても、Font Awesome5を使うことができます。

このCDNを使用する方法の場合、新しいアイコンがFont Awesome5に追加されたとしてもそれをダウンロードする必要がなく、サーバーへの負荷を軽減できるというメリットが得られます。

CDN形式でFont Awesome5を使うには、以下のコードをサイトのheadタグ内に貼り付けるだけで済みます。

<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">

WordPressの場合、headタグは「header.php」に存在するので、以下の手順でheader.phpにアクセスします。

• 「ダッシュボード」→「外観」→「テーマエディター」→「php」

header.phpを開いてコードを貼り付ければ、アイコンの使用準備は完了です。

ライブラリを入手する

「ライブラリ」とはFont Awesome5の実行に必要なファイルで、これらをサーバーに読み込ませ、Font Awesome5をサイト上で使用するという方法もあります。

ライブラリを使ってFont Awesome5を使うには、以下の手順で作業を進めます。

• 公式サイトからライブラリ（font-awesome-5.15.4.zip）をダウンロード
• フォルダ内のfont-awesome.cssとfontsフォルダの位置関係が変わらないようにし、headタグに以下のコードを貼り付けてライブラリを読み込ませる。

<link href="./font-awesome.css" rel="stylesheet">

これでライブラリを使う場合のFont Awesome5の使用準備は完了です。

Font Awesome5の使い方

準備を終えた後はまずはFont Awesomeのページのアイコン一覧から、使用したいアイコンを選び、そのページを開きます。

そこから以下の2つの方法のうち、どちらか一方の方法でFont Awesome5を使用します。

• HTMLに記述する
• CSSの疑似要素で使用する

HTMLに記述する

HTMLにコードを記述してアイコンを表示する場合は、使用したいアイコンのページのiタグで表示された箇所をクリックします。

<i class="fas fa-address-book"></i>

iタグで表示されたコードをコピーした後は、それをHTMLへ貼り付けます。

色やサイズなどのスタイルを変更したい場合はiタグにクラス名を指定し、CSSでスタイルを指定します。

サイズを大きく場合は、クラス名に以下のコードを追加することで調整可能です。

• fa-lg:1.333倍～
• fa-2x:2倍
• fa-3x:3倍
• fa-4x:4倍
• fa-5x:5倍

 
<i class="fas fa-address-book fa-lg"></i> 

CSSの疑似要素で使用する

Font Awesome5のアイコンはCSSの疑似要素として使用することも可能です。

まず任意のHTMLタグにクラス名を付け、そのクラスをCSSで指定し、以下のようにスタイルを設定します。

クラス名::before {
content: 'アイコンのUnicode’;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}

アイコンのUnicodeは先程のiクラス表示の左側にあり、そこをクリックすることでコピーして貼り付けられます。

また、Font Awesome5を擬似要素で使う場合は、必ずfont-weightを指定しないとアイコンが表示されないので注意しましょう。

Font Awesome5のアイコンのカスタマイズ

Font Awesome5の基本的な使い方について確認したところで、ここからはFont Awesome5のアイコンをカスタマイズする方法を見ていきましょう。

アイコンの色を変更する方法

アイコンの色を変更する場合は、iタグの場合はそのクラス名を指定してCSSのcolorプロパティで色を指定します。

 <i class="fas fa-address-book example"></i>

.example{
  color:gray;
}

疑似要素を使用する場合も同様に疑似要素を適用させるクラス名を指定し、colorプロパティで色を決めます。

 
クラス名::before {
  content: 'アイコンのUnicode’;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
　color:orange;
}

アイコンと要素の間にスペースを入れる方法

Font Awesome5では「fa-fw」というクラス名をiタグに追加することで前後に余白を作り、幅を調整できます。

<i class="fas fa-address-book fa-fw"></i>

アイコンの表示角度を変える

Font Awesome5でアイコンの表示角度を変えるには、iクラスに以下のうち、回転させたい角度に応じたクラス名を指定します。

• fa-rotate-90:90°回転
• fa-rotate-180:180°回転
• fa-rotate-270:270°回転
• fa-flip-horizontal:水平方向に反転
• fa-flip-vertical:垂直方向に反転

アイコンを線で囲む

Font Awesome5でアイコンを線で囲むには、iタグのクラスに「fa-border」クラスを追加します。

<i class="fas fa-address-book fa-border"></i>

アイコンを重ねる

Font Awesome5でアイコン同士を重ねるには、以下の方法を使います。

• spanタグに「fa-stack」というクラス名を指定し、その中にiタグのアイコンを入れる
• 最初のiタグアイコン（背面）のクラス名に「fa-stack-2x」を指定
• 2番目（前面）のiタグアイコンのクラス名に「fa-stack-1x」を指定

 
<i class="fas fa-address-book fa-stack-2x "></i>
<i class="fab fa-tasks fa-stack-1x"></i>

Font Awesome5を活用してアイコンを表示しよう

Font Awesome5を使うことでWebアイコンを手軽に使用でき、デザインの幅を広げることができます。

CSSの使用によるスタイリング調整にも対応しており、リスト表示した項目の装飾にも使えるので、運用時の利便性に優れている点も特筆すべき事柄です。

Font Awesome5を積極的に使用し、Webサイトのコーディングを効率的に進めましょう。