Font AwesomeでWebアイコンフォントを簡単表示【初心者でも利用が可能です】

普通に文章内で使用することはあまりないと思いますけど、サイト内に分かりやすい「記号」として使える「Webアイコンフォント」の利用ができる Font Awesome という便利なサービスがあります。

ただ「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」です。

導入パターンは３つ

Font Awesome の Webアイコンフォント をサイトに表示できるようにする方法が、３つほどあります。

設定方法３つ
  • 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

設定が終わったら、あとは Font Awesome にアクセスして使いたいアイコンを探して貼り付けるだけ。

探すにはアイコン一覧画面へアクセスして、その中から使いたいアイコンをクリックします。無料プランの場合には、色が濃くなっているアイコンだけが利用可能です。

一覧画面を見ると 5300 種類以上が表示されているので、上部の検索を使って探すこともできます。

リョウ

ただ１つだけ難点があって、アイコンを探す時に検索をしようと思った場合には「英語」のみが対象となります。

コードをコピーする

Font Awesome

使いたい 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>
ブラウザ

アイコンの幅を揃える

アイコンを表示させてみると分かるのですが、 など細いアイコンと四角いアイコンでは横幅が異なってしまいます。

ブラウザ
Home
Info
Library

そんな時は、「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>
ブラウザ
Home
Info
Library

アイコンをずっと回転させる

全てではないのですが、対象のアイコンのみは「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 はとても便利です。

サイトのデザインをカスタマイズしたいという人は、ぜひ利用してみてください！