Font Awesomeとは、無料で利用可能なWebアイコンフォントで、アイコンの種類がとても豊富なのでWeb制作の様々な場面で活用することができます。
ただ、CDNを使ったり疑似要素（::beforeや::after）に記述したりなど、いくつか使い方があって初心者には少し難しく感じるかもしれません。
そこで、今回は最新の「Font Awesome 5」の使い方を初心者の方でも分かるように解説していきたいと思います。
INDEX
Font Awesomeとは
Font Awesomeとは、Webサイトでアイコンフォントを簡単に導入することができるサービスです。
アイコンフォントとは、アイコン画像をテキストと同じように表示することができるもので、アイコンフォントを使用するメリットには下記のようなものがあります。
- 簡単な記述でアイコンを表示することができる
- テキストと同じようにサイズや色を変えられる
- サイズを大きくしても画像が粗くならない
特にFont Awesomeは無料プランでも1000種類以上のアイコンが用意されているため、これ1つで様々な種類のアイコンを使うことができます。
最新のバージョンはFont Awesome 5
2017年にFont Awesome 5が登場しました。それ以前はFont Awesome 4が使われていましたが、Font Awesome 5になってから若干使い方が変わっています。
Webの解説記事では、Font Awesome 4と5の解説記事が混在しているので、これからFont Awesomeを使う場合はFont Awesome 5を導入することをおすすめします。
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です。
|
1 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"> |
サーバーにファイルを配置してFont Awesome 5を使う方法（CSS）
サーバーにファイルを配置する場合は、下記のページでFont Awesomeのファイルをダウンロードします。
そして、普段CSSを読み込む時と同じように、headタグ内にlinkタグを記述します。
|
1 |
<link rel="stylesheet" href="./folder/all.css"> |
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です。
|
1 |
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js"></script> |
サーバーにファイルを配置してFont Awesome 5を使う方法（JS）
サーバーにファイルを配置する場合は、下記のページでファイルをダウンロードしてください。
そして、下記のようにしてJavaScriptのファイルを読み込みます。
|
1 |
<script src="/{ファイルのディレクトリ}/all.js"></script> |
表示するアイコンを選ぶ
まずは、Font Awesomeのページから使用したいアイコンフォントを選びましょう。グレーアウトしているアイコンは、Proプランのみ利用可能なフォントとなっているため、無料プランの場合は濃く表示されているアイコンを選択してください。
画面左側の「Free」にチェックを入れると、無料プランで使用できるアイコンに絞り込むことができます。
Font Awesomeを使ってアイコンを表示しよう
では、Font Awesome 5でアイコンを表示する方法をご紹介していきましょう！Font Awesomeでアイコンを表示する方法には、大きく分けて下記の2つの方法があります。
- HTMLに記述する
- CSSに記述する
HTMLに記述してFont Awesomeのアイコンを表示する
HTMLに記述する場合は、ここの部分をクリックしてください。
すると、クリップボードに下記のようにコピーされるのでHTMLの表示したい箇所にコードをペーストしてください。
|
1 |
<i class="fas fa-address-book"></i> |
CSSに記述してFont Awesomeのアイコンを表示する
CSSに記述する場合は、まず任意のクラス名を付けてHTMLにタグを作成します。
|
1 |
<div class="icon"></div> |
そして、CSSで疑似要素（::beforeや::after）に下記のように指定します。
|
1 2 3 4 5 |
.icon::before { content:'\f35a'; font-family:'Font Awesome 5 Free' font-weight:900; } |
contentに'\f209'のようにアイコンのUnicode(ユニコード)を記述します。アイコンのUnicodeは、アイコンページの下記の部分に表示されており、クリックするとクリップボードにコピーすることができます。
ちなみに、ブランドのアイコンを利用する場合は、font-family:'Font Awesome 5 Brands'を指定します。
|
1 2 3 4 5 |
.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プロパティを指定することで色を変更することができます。
|
1 |
<i class="fas fa-award" style="color:red;"></i> |
アイコンサイズを変更する
疑似要素として使用している場合は、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のアイコンは、それぞれ横幅が異なるためそのまま使用すると並べた時にガタガタしてしまいます。
アイコンの横幅を揃えたい場合は、アイコンのクラスにfa-fwというクラス名を付与すればOKです。
|
1 2 3 4 5 |
<div><i class="fas fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div> <div><i class="fas fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div> <div><i class="fas fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div> <div><i class="fas fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div> <div><i class="fas fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div> |
アイコンをリストで使う
アイコンをリストで使用する場合には、ulタグ、もしくはolタグのクラス名にfa-ulを、liタグのクラス名にfa-liを指定します。
|
1 2 3 4 5 6 |
<ul class="fa-ul"> <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li> <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li> <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li> <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li> </ul> |
- 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 | 垂直方向に反転 |
|
1 2 3 4 5 6 7 8 |
<div class="fa-4x"> <i class="fab fa-behance"></i> <i class="fab fa-behance fa-rotate-90"></i> <i class="fab fa-behance fa-rotate-180"></i> <i class="fab fa-behance fa-rotate-270"></i> <i class="fab fa-behance fa-flip-horizontal"></i> <i class="fab fa-behance fa-flip-vertical"></i> </div> |
アイコンをアニメーションで動かす
| アイコンを回転させる | fa-spin |
|---|---|
| アイコンを8ステップで回転させる | fa-pulse |
|
1 2 3 4 5 |
<i class="fas fa-spinner fa-spin"></i> <i class="fas fa-circle-notch fa-spin"></i> <i class="fas fa-sync fa-spin"></i> <i class="fas fa-cog fa-spin"></i> <i class="fas fa-spinner fa-pulse"></i> |
回転するアニメーションと相性がいいのは、「Spinners」と呼ばれているアイコンです。Spinnersアイコンの一覧は下記で確認することができます。
アイコンをfloat表示する
文章の引用符に使用する場合などに、float属性を付与してテキストを回り込み表示させることができます。
| float:left | fa-pull-left |
|---|---|
| float:right | fa-pull-right |
|
1 2 |
<i class="fas fa-quote-left fa-2x fa-pull-left"></i> <p>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.</p> |
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クラスを付与します。
|
1 |
<i class="fas fa-arrow-right fa-border"></i> |
アイコンを重ねて表示する
- 親要素に
fa-stackクラスを付与 - アイコンに
fa-stack-1x、もしくはfa-stack-2xクラスを付与
fa-stack-1xを指定すると等倍で、fa-stack-2xを指定すると2倍のサイズで表示されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fab fa-twitter fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-2x"> <i class="fas fa-circle fa-stack-2x"></i> <i class="fas fa-flag fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-2x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-terminal fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-4x"> <i class="fas fa-square fa-stack-2x"></i> <i class="fas fa-terminal fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-2x"> <i class="fas fa-camera fa-stack-1x"></i> <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i> </span> |
Font Awesome 6も登場予定
2020年後半に、新しく「「Font Awesome 6」が登場予定です。
アイコンの種類やスタイルが増えていて、より使い勝手に優れたサービスとなっています。
まとめ
アイコンフォントは、手軽にWebサイトでアイコンを使用することができ、アイコンの種類も豊富なのでデザインの幅が広がります。
Font Awesome以外の人気のアイコンフォントサービスを下記にまとめているので、ぜひ参考にしてみてください。
また、フリー写真素材やフリーイラスト素材もうまく活用すればデザインの幅が広がります。合わせて使ってみてください。
