Tips

Webアイコンフォント「Font Awesome 5」の使い方

By Halu36 / 2021年3月1日

Webアイコンフォントと言えば「Font Awesome」と言われるほどWEB業界ではよく使われています。

「Font Awesome」を初めて使う方に向けて解説します。

Webアイコンフォントについて

FontAwesome

フォントとして使用することができるアイコン素材のことを、Webアイコンフォントと言います。

例えば、メールや電話などのアイコンも画像として出さずにフォントとして表示することができるので、フォントと同様にサイズや色変更などCSS上で簡単に扱えるのがメリットです。

FontAwesome 5の使い方

1.FontAwesomeをサイトに読み込む

まずは、FontAwesomeをサイトに読み込みます。
サイトに読み込む方法は2種類ありますので、お好きなやり方で導入してください。

  1. CDNコードを使用してサイトに読み込む
  2. ファイルをダウンロードして、サイトに読み込む
FontAwesome

CDNを使用してサイトに読み込む方法

公式サイトにCDNが公開されていますので、コピペして<head></head>間に貼り付けます。

CDNを使用するときの注意点

FontAwesomeでは頻繁にアップデートが行われていますので、古いCDNを読み込んでいた場合アイコンが表示されない場合があります。

特に2018年にFont Awesome 4から5にアップデートされていますので、この関係で表示されていない可能性もあります。

公式サイトで常に最新のCDNが更新されていますので、もし古いCDNを読み込んでいる方は公式サイトで公開されているCDNで貼り替えてみてください。

ファイルをダウンロードして、サイトに読み込む

先程の「Start a New Project」のページの下部にスクロールすると、「Download」という項目がありますのでクリックしてダウンロードします。

ダウンロードが終わったら、サイトに読み込みます。

2.使いたいアイコンを探す

Font Awesomeをサイトに導入したら、早速アイコンを探します。

最初にFree（無料版）で絞り込む

Font Awesomeには無料版と有料版のアイコンがあります。

検索をした時に最初は無料アイコンと有料アイコンが混在した形で表示されますので、サイドメニューで「Free」を選択して無料版のみに絞り込みましょう。

プロ版の契約をしていないのに有料アイコンを貼り付けても、当然ですが表示されません。

カテゴリからアイコンを探す

サイドメニューにカテゴリ分けされているので、カテゴリから探したいときはクリックします。

検索ワードでアイコンを探す

使いたいアイコンがざっくり決まっていれば、検索ワードで探してみましょう。
日本語には対応していないので、英語での検索が必要です。

よく使う「Menu」や「Telephone」「Arrow」でも引っ掛かりますし、難しい単語であればGoogle翻訳で翻訳して検索すれば大体引っかかります。

3.アイコン詳細ページからコードをコピー

使いたいアイコンの詳細ページを開いたら、最上部に情報がまとまっています。

その中の<i> </i>の部分をクリックしてコピーします。

この部分からSVGなどもダウンロードできます。

FontAwesome

4.コピーしたコードをサイトに貼り付ける

先程コピーした<i> </i>の部分をサイトに貼り付けます。

<i class="fas fa-apple-alt"></i> りんご

5.CSSなどで色やサイズを整える

FontAwesomeはフォントアイコンのため、フォントと同様に色やサイズを整えることが出来ます。

<i class="fas fa-apple-alt"></i> りんご
i{
    font-size: 18px;
    color: red;
}

:beforeや:afterなどの疑似要素にFont Awesomeを使う方法

Font Awesomeのアイコンは、テキスト上だけでなく、CSSの疑似要素「:before」や「:after」などの疑似要素にも使用できます。

次の方法で簡単に挿入できます。

1.アイコン詳細ページからコードをコピー

先程は、<i> </i>のコードをコピーしてきましたが、疑似要素に使用する場合は下記の部分をコピーします。

FontAwesome

2.疑似要素でFont Awesomeを指定

div:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "f5d1";
}

下記のポイントを守って指定することで、疑似要素に指定できます。

ポイント

  1. font-family部分に、「”Font Awesome 5 Free”」を指定
  2. content部分に1でコピーしたコードを貼り付ける

疑似要素に指定することで、ボタンや、リストの先頭などに簡単にアイコンをつけることができるのでとても便利です。

Font Awesomeが表示されない？そんなときの解決法

主な原因は、CDNバージョンや貼付け位置・CSSでFont Awesomeを使用している場合などです。

Follow me!

こちらの記事はいかがですか

カテゴリー