Font Awesome 5の使い方とカスタマイズ方法を徹底解説！

Font Awesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富なのでWeb制作の様々な場面で活用することができます。

ただ、CDNを使ったり疑似要素（::beforeや::after）に記述したりなど、いくつか使い方があって初心者には少し難しく感じるかもしれません。

そこで、今回は最新の「Font Awesome 5」の使い方を初心者の方でも分かるように解説していきたいと思います。

Font Awesomeとは

Font Awesomeとは、Webサイトでアイコンフォントを簡単に導入することができるサービスです。

アイコンフォントとは、アイコン画像をテキストと同じように表示することができるもので、アイコンフォントを使用するメリットには下記のようなものがあります。

簡単な記述でアイコンを表示することができる
テキストと同じようにサイズや色を変えられる
サイズを大きくしても画像が粗くならない

特にFont Awesomeは無料プランでも1000種類以上のアイコンが用意されているため、これ1つで様々な種類のアイコンを使うことができます。

Font Awesome 無料版と有料版の違い

Font Awesomeには有料の「Proプラン」が提供されています。

無料版でも十分活用することができますが、Proプランに加入すると下記のような特典があります。

使用できるアイコンが3365個増える（全部で4845種類に！）
使用できるアイコンのスタイルが増える
使用できるアイコンのカテゴリが増える
Proプラン用のCDNが利用できる

プラン	料金
無料プラン	無料
Proプラン	60ドル/年

1年間で60ドルなので、だいたい7000円しないくらいですね。趣味でWebサイトを運営している人は無料プランで十分だと思いますが、アイコンは色々な場面で活用できるので登録する価値は十分あります。

Font Awesome 5の使い方

Font Awesomeを使う方法は、2種類あります。

CSSで読み込む
JavaScriptで読み込む

特に理由がない場合は、CSSで読み込む方法が一般的なのでこちらがおすすめです。

Font AwesomeをCSSで読み込む

CDNを使う
サーバーにファイルを配置する

CDNを活用すると、HTMLにタグを貼り付けるだけなので導入がとても簡単です。

サーバーにファイルを配置する方法もそこまで難しくないので、好きな方を選んでください。

CDNを使ってFont Awesome 5を使う方法（CSS）

CDNでFont Awesome 5を読み込みたい場合は、下記のタグをheadタグ内にコピペすればOKです。

サーバーにファイルを配置してFont Awesome 5を使う方法（CSS）

サーバーにファイルを配置する場合は、下記のページでFont Awesomeのファイルをダウンロードします。

そして、普段CSSを読み込む時と同じように、headタグ内にlinkタグを記述します。

Font AwesomeをJavaScriptで読み込む

Font Awesomeは、JavaScriptのファイルを読み込んで使用することもできます。

ただし、その場合はCSSの疑似要素（::beforeや::after）を使ってアイコンを表示することができないので注意しましょう。（テクニカルなことを行えば表示できますが、素直にCSSで読み込んで表示した方がいいでしょう。）

特に理由が無ければCSSを使う方法がおすすめです。

JavaScriptを使用する場合も、CSSと同様にFont Awesomeを使用する方法が2種類あります。

CDNを利用する
ファイルをダウンロードしてサーバーに配置する

CDNを使ってFont Awesome 5を使う方法（JS）

CDNを使う場合は、headタグ内に下記のコードを貼り付ければOKです。

サーバーにファイルを配置してFont Awesome 5を使う方法（JS）

サーバーにファイルを配置する場合は、下記のページでファイルをダウンロードしてください。

そして、下記のようにしてJavaScriptのファイルを読み込みます。

表示するアイコンを選ぶ

まずは、Font Awesomeのページから使用したいアイコンフォントを選びましょう。グレーアウトしているアイコンは、Proプランのみ利用可能なフォントとなっているため、無料プランの場合は濃く表示されているアイコンを選択してください。

画面左側の「Free」にチェックを入れると、無料プランで使用できるアイコンに絞り込むことができます。

Font Awesomeを使ってアイコンを表示しよう

では、Font Awesome 5でアイコンを表示する方法をご紹介していきましょう！Font Awesomeでアイコンを表示する方法には、大きく分けて下記の2つの方法があります。

HTMLに記述する
CSSに記述する

HTMLに記述してFont Awesomeのアイコンを表示する

HTMLに記述する場合は、ここの部分をクリックしてください。

すると、クリップボードに下記のようにコピーされるのでHTMLの表示したい箇所にコードをペーストしてください。

CSSに記述してFont Awesomeのアイコンを表示する

CSSに記述する場合は、まず任意のクラス名を付けてHTMLにタグを作成します。

そして、CSSで疑似要素（::beforeや::after）に下記のように指定します。

.icon::before {
	content:'\f35a';
	font-family:'Font Awesome 5 Free'
	font-weight:900;
}

contentに'\f209'のようにアイコンのUnicode(ユニコード)を記述します。アイコンのUnicodeは、アイコンページの下記の部分に表示されており、クリックするとクリップボードにコピーすることができます。

ちなみに、ブランドのアイコンを利用する場合は、font-family:'Font Awesome 5 Brands'を指定します。

.icon::before {
	content:'\f09a';
	font-family:'Font Awesome 5 Brands'
	font-weight:900;
}

また、Proプランを利用している場合はフォントのスタイルを変更することができます。CSSでスタイルを変更する場合は、font-weightを指定するようにしましょう。

それぞれのスタイルのfont-weightは下記の通りです。

Solid	font-weight:900
Regular	font-weight:400
Brands	font-weight:400
Light	font-weight:300

Font Awesomeの色々な使い方

Font Awesomeは、クラス名に特定のクラスを指定するだけでアニメーションや回転など様々な効果を簡単に付けることができるようになっています。

詳しい使い方をそれぞれ解説していきたいと思います。

アイコンの色を変更する

Font Awesomeはアイコンフォントなので、テキストと同様にcolorプロパティを指定することで色を変更することができます。

アイコンサイズを変更する

疑似要素として使用している場合は、font-sizeを変更することでアイコンサイズを変更することができます。

HTMLコードでアイコンを表示する場合は、下記のようにクラス名を付与することによってサイズの変更ができるようになっています。

クラス名	表示サイズ	表示サンプル
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

アイコンの横幅を揃える

Font Awesomeのアイコンは、それぞれ横幅が異なるためそのまま使用すると並べた時にガタガタしてしまいます。

Skating

Skiing

Nordic Skiing

Snowboarding

Snowplow

アイコンの横幅を揃えたい場合は、アイコンのクラスにfa-fwというクラス名を付与すればOKです。

 Skating
 Skiing
 Nordic Skiing
 Snowboarding
 Snowplow

Skating

Skiing

Nordic Skiing

Snowboarding

Snowplow

アイコンをリストで使う

アイコンをリストで使用する場合には、ulタグ、もしくはolタグのクラス名にfa-ulを、liタグのクラス名にfa-liを指定します。


  List icons can
  be used to
  replace bullets
  in lists

List icons can
be used to
replace bullets
in lists

アイコンを回転・反転させる

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

アイコンをアニメーションで動かす

アイコンを回転させる	fa-spin
アイコンを8ステップで回転させる	fa-pulse

回転するアニメーションと相性がいいのは、「Spinners」と呼ばれているアイコンです。Spinnersアイコンの一覧は下記で確認することができます。

アイコンをfloat表示する

文章の引用符に使用する場合などに、float属性を付与してテキストを回り込み表示させることができます。

float:left	fa-pull-left
float:right	fa-pull-right

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further… And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

アイコンにボーダーを付ける

アイコンにボーダーを付けたい場合は、fa-borderクラスを付与します。

アイコンを重ねて表示する

親要素にfa-stackクラスを付与
アイコンにfa-stack-1x、もしくはfa-stack-2xクラスを付与

fa-stack-1xを指定すると等倍で、fa-stack-2xを指定すると2倍のサイズで表示されます。

Font Awesome 6も登場予定

2020年後半に、新しく「「Font Awesome 6」が登場予定です。

アイコンの種類やスタイルが増えていて、より使い勝手に優れたサービスとなっています。

まとめ

アイコンフォントは、手軽にWebサイトでアイコンを使用することができ、アイコンの種類も豊富なのでデザインの幅が広がります。

Font Awesome以外の人気のアイコンフォントサービスを下記にまとめているので、ぜひ参考にしてみてください。

また、フリー写真素材やフリーイラスト素材もうまく活用すればデザインの幅が広がります。合わせて使ってみてください。

Web Design Trends

Webに関わるすべての人のためのメディア