普通に文章内で使用することはあまりないと思いますけど、サイト内に分かりやすい「記号」として使える「Webアイコンフォント」の利用ができる Font Awesome という便利なサービスがあります。
ただ「Font Awesome」は初期設定が必要なので、サイト初心者には少し難しい部分があるかもしれません。
でもどうしても使ってみたいという人でも使えるように、「Font Awesome」の導入方法からフォントの入れ方までを解説していきましょう。
もくじ
Font Awesome とは?

「Font Awesome」は、サイト内で利用できる Webアイコンフォントを提供しているサービス。ただ、表示するためには少し設定が必要となります。
とはいえ、データを読み込むようにする部分だけが大変なだけなので、最初の設定だけ頑張りましょう。
無料と有料との違い
Font Awesome には「有料プラン(年額/99ドル)」があって、5300 種類以上の Webアイコンフォントを利用することができます。
でも、「無料プラン」でも 1500 種類以上のよく使われる Webアイコンフォントが利用できるので、正直「無料プラン」で十分です。
「無料プラン」といっていますが何かに登録したりする必要もないので、「有料プラン」にしない場合にはデータを読み込む設定をしてあげるだけでOKです。
Font Awesome を導入する手順
Font Awesome にはバージョンがあるので、このサービスを利用するにはバージョンをチェックする必要があります。この記事を紹介している時点では、「Version 5.9.0」です。
導入パターンは3つ
Font Awesome の Webアイコンフォント をサイトに表示できるようにする方法が、3つほどあります。
- CDN で読み込む
- JavaScript で読み込む
- データをダウンロードして使う
どれでも導入は可能ですけど、データをダウンロードするパターンだとサーバーに負荷をかけることになるし、新しいアイコンが増えるたびにダウンロードする必要があります。
また JavaScript での読み込みもできますが、CSSの疑似要素(::beforeや::after)を使って表示させるのに一癖あるため、よっぽどの理由がない限りは「CDN」で読み込む方法がベストです。
ここでは「CDN」での読み込み方法しか解説しませんが、興味がある人は JavaScript で読み込む方法やデータをダウンロードして使う方法も調べてみてください。
表示させるための下準備
「Font Awesome」のアイコンを表示させるためには、サイトに情報を呼び出すためのコードを入れ込む必要があります。
<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet">
このコードを、表示させたいサイトの <head>〜</head> 内に埋め込みます。
新しいバージョンのアイコンを使いたい場合には、その都度「v○.○.○」の部分を最新のものへと修正してあげれば良いだけです。
設定はこれだけなんですが、ある程度サイトを使いこなしている人にとっては簡単ですが、始めたばかりという人にとってはちょっとハードルが高いかもしれません。
Font Awesome をサイトに表示させる

設定が終わったら、あとは Font Awesome にアクセスして使いたいアイコンを探して貼り付けるだけ。
探すにはアイコン一覧画面へアクセスして、その中から使いたいアイコンをクリックします。無料プランの場合には、色が濃くなっているアイコンだけが利用可能です。
一覧画面を見ると 5300 種類以上が表示されているので、上部の検索を使って探すこともできます。
リョウ
コードをコピーする

使いたい Webアイコンフォントが見つかったら、クリックして詳細ページに飛びます。そして、<i>〜</i> と書かれている部分をクリックすると自動でコピーされます。
<i class="fab fa-angellist"></i>
コピーしたコードを貼り付ける
コピーしたら、あとは表示させたい部分にそのまま貼り付けるだけ。これで、選択した Webアイコンフォントがサイト内に表示されます。
アイコンの大きさなどを変える
アイコン自体はコピペで簡単に表示できることが分かったと思いますが、「大きさ」なども簡単にコードを追加するだけで設定することができます。
大きさを変える
アイコンの大きさを変えるには、「fa-○○」を追加するだけ。何個も一気に変更したい場合は、div要素を利用したりcssを追加したりすれば可能です。
<i class="fab fa-angellist fa-xs"></i>
<i class="fab fa-angellist fa-sm"></i>
<i class="fab fa-angellist fa-lg"></i>
<i class="fab fa-angellist fa-2x"></i>
<i class="fab fa-angellist fa-3x"></i>
<i class="fab fa-angellist fa-5x"></i>
アイコンの幅を揃える
アイコンを表示させてみると分かるのですが、 など細いアイコンと四角いアイコンでは横幅が異なってしまいます。
そんな時は、「fa-fw」を追加すると横幅が均等になります。
<i class="fas fa-home fa-fw"></i>
<i class="fas fa-info fa-fw"></i>
<i class="fas fa-book fa-fw"></i>
アイコンをずっと回転させる
全てではないのですが、対象のアイコンのみは「fa-spin」と追加することでずっと回転させることができます。対象のアイコン一覧は、こちら 。
「fa-spinner」というアイコンだけは、「fa-pulse」と追加すると点が順番に消えながら回転しているような表示になります。
<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>
アイコンの向きを変える
アイコンの向きを変えたい場合は、「rotate-○○」で設定することができます。
<i class="fab fa-angellist fa-rotate-90"></i>
<i class="fab fa-angellist fa-rotate-180"></i>
<i class="fab fa-angellist fa-rotate-270"></i>
アニメーションを加える
「Font Awesome」のアイコンは、アニメーションを追加することができます。ただ、これも下準備が必要となります。
アニメーションの下準備
アイコンを表示させるための下準備と同じなのですが、下のコードも丸っとコピーして「header.php」の <head>〜</head> に追加します。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.css" type="text/css" media="all" />
そして以下のclass名を追加すれば、以下のようなアニメーションを表示させることができます。
アイコン | class名 |
---|---|
faa-wrench animated | |
faa-ring animated | |
faa-horizontal animated | |
faa-vertical animated | |
faa-flash animated | |
faa-bounce animated | |
faa-pulse animated | |
faa-shake animated | |
faa-tada animated | |
faa-burst animated |
さいごに
下準備さえしてしまえば、あとは自由に Webアイコンフォントを表示させることができるようになる Font Awesome はとても便利です。
サイトのデザインをカスタマイズしたいという人は、ぜひ利用してみてください!