Font Awesomeのアイコンフォントの使い方

Font Awesomeのアイコンフォントの使い方

2020年3月27日
Web制作

Webサイトでは様々なアイコンを使用します。画像のアイコンを使う方法もありますが、アイコンフォントのFont Awesomeを使うととても便利です。

Font Awesomeは特定のHTMLを追加するだけでアイコンを表示することが出来ます。しかも、そのアイコンはCSSで色やサイズを指定することが出来ます。色違いのアイコン画像を複数用意する必要がなくなります。

さっそく、Font Awesomeの使い方を解説していきたいと思います。

WebサイトでFont Awesomeを使う方法

まずはWebサイトでFont Awesomeを使う方法を解説します。

公式サイトからFont Awesomeをダウンロードする

公式サイトからFont Awesomeのファイル一式をダウンロードします。

「Download Font Awesome Free for the Web」のボタンをクリックしたらダウンロード出来ます。

HTMLファイルにFont AwesomeのCSSを読み込む

ダウンロードした圧縮ファイルを解凍します。解凍後のフォルダに以下のフォルダがあります。

  • webfonts
  • svgs
  • sprites
  • scss
  • metadata
  • less
  • js
  • css

この中の「webfonts」と「CSS」のフォルダを自分のプロジェクトフォルダにコピーします。そして、HTMLファイルに「CSS」フォルダ内のall.min.cssファイルを読み込みます。

<head>
  <meta charset="UTF-8">
  <title>Font Awesomeのデモ</title>

  <!-- Font AwesomeのCSSを読み込む -->
  <link rel="stylesheet" href="css/all.min.css"> 
</head>

Font Awesomeのアイコンを表示する

Font Awesomeで使えるアイコンは以下のページで確認できます。

左サイドバーの「Free」にチェックを入れると、無料で使えるアイコンだけが表示されます。

使いたいアイコンをクリックするとアイコンの詳細ページに遷移します。そのページの「Start Using This Icon」のボタンをクリックすると、アイコンを表示するためのHTMLコードが表示されるのでコードをコピーします。

コピーしたコードをHTMLファイルにペーストするとアイコンが表示されます。

<body>
  <p><i class="fas fa-chevron-circle-right"></i> Font Awesomeのアイコンを表示しました</p>
</body>

たったこれだけの作業でFont Awesomeのアイコンを表示することが出来ます。

CSSでFont Awesomeアイコンのスタイルを変更する

Font AwesomeのアイコンはCSSでスタイルを指定することが出来ます。例えば、アイコンを赤色にしたい場合はCSSで以下のように指定します。

※クラス名は使用するアイコンによって異なります。

.fa-chevron-circle-right {
  color: red;
}

アイコンのサイズを変更したい場合はCSSで以下のように指定します。

.fa-chevron-circle-right {
  font-size: 2em;
}

CSSを駆使することで他にも色々なことが出来るので試してみてください。

PhotoshopやIllustratorでFont Awesomeを使う方法

デザインカンプを作る際に、PhotoshopやIllustratorでもFont Awesomeのアイコンを使いたいことがあります。PCにFont Awesomeのアイコンフォントをインストールすることで簡単に使えるようになるので、その方法を解説します。

公式サイトからFont Awesomeのフォントファイルをダウンロードする

公式サイトからFont Awesomeのフォントファイルをダウンロードします。

「Download Font Awesome Free for the Desktop 」のボタンをクリックしたらダウンロード出来ます。

Font Awesomeのフォントをインストールする

ダウンロードした圧縮ファイルを解凍します。解凍後のフォルダに以下のフォルダがあります。

  • otfs
  • svgs
  • metadata

この中の「otfs」フォルダ内に3つのフォントファイルがあるので全てインストールします。

PhotoshopやIllustratorでFont Awesomeのフォントを表示する

Font Awesomeのアイコン一覧から使いたいアイコンをクリックします。

アイコンの詳細ページ上部の小さいアイコンをクリックすると、フォントを表示するためのUnicodeがコピーされます。

Font AwesomeのUnicodeをコピーする

PhotoshopやIllustratorのテキストツールで、先ほどコピーしたUnicodeをペーストします。おそらく初期状態では「Font AwesomeのUnicode」が表示されていると思います。
フォントファミリー を先ほどインストールした「Font Awesome 5 Free Solid」に変更するとアイコンが表示されます。

使用するアイコンによっては、フォントファミリー を「Font Awesome 5 Free Regular」か「Font Awesome 5 Brands Regular」にする必要があります。「Font Awesome 5 Free Solid」でアイコンが表示されない場合は、「Font Awesome 5 Free Regular」か「Font Awesome 5 Brands Regular」のどちらかに変更してみてください。

Font Awesomeの使い方まとめ

Font AwesomeはWebサイトでもPhotoshopやIllustratorなどのデザインソフトでも簡単にアイコンを表示することが出来ます。Font Awesomeを使い始めてからは、便利すぎてWebサイトのアイコンはほぼFont Awesomeのアイコンを使っています。

作業効率も格段に上がりますので、ぜひ使ってみてください。