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

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

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

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です。

サーバーにファイルを配置して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)に下記のように指定します。

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

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

また、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

アイコンをリストで使う

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

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

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

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

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

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

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

まとめ

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

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

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

おすすめの記事