記事内に商品プロモーションが含まれる場合があります
今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。
1. Font Awesomeとは？
ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。
※上のリンクは2017年末にリリースされたFontAwesome5です。旧バージョンを利用することもできます。
Webアイコンフォントとは？
ウェブページ上で文字と同じように表示できるアイコンのことです。画像でアイコンを貼るのと違い、拡大してもぼやけませんし、色もサイズも簡単に変えることができます。
使用例
たとえばこれらのアイコンはFontAwesomeを使って表示しています。このように色もサイズも自由に変えることができます。
FontAwesome5とは？
2017年末にリリースされたFontAwesomeの最新バージョンです。FontAwesome5には、無料プランと、有料のPROプランがあります。 ちなみに、旧バージョンのFontAwesomeはこれまで通り使い続けることができます。
PROプランだとアイコン種類が多く、さらに複数の太さのアイコンを使うことができます。料金は$60です（1度の支払いで使い続けることができます。）。
2. 使用準備
FontAwesomeを使うために少しだけ準備をする必要があります。この準備には2つの方法があります。
方法1. CDNを使う
CDNとはものすごくざっくりというと「専用のサーバー上にある画像やフォントなどのデータ」を読み込んで自分のWebサイトに表示させる仕組みです。つまりアイコンをダウンロードして自分のサーバーにアップロードしなくても使うことができるのです。
個人的にはこの方法がオススメです。FontAwesomeに新しいアイコンが追加されたときにダウンロードし直す必要はありませんし、自分のサーバーへの負荷を減らすこともできます。何より楽なのが良いですね。ただし、新アイコンが追加されたときにはURLの中のv○.○.○の部分を最新のバージョン番号に書き換えないと新アイコンは使えません。
手順１. 以下のコードをコピー
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
上のコードはFontAwesome5を使う場合のコードです。旧Verを利用する場合は、下記のコードをコピーしてください。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
WebフォントではなくSVG画像形式でアイコン表示することもできます。その場合には、以下のコードを貼り付けます（これだけで準備完了）。詳しくはこちらをどうぞ。
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
SVG+JavaScriptでアイコンを表示する場合にも、以下で説明する使い方手順は共通です。
手順2. headタグ内に貼付け
コピーしたコードをブログやWebサイトの<head>〜</head>の中に貼り付けます。よく分からなければ</head>の直前に貼ればOKです。これでアイコンフォントの使用準備は完了です。
headタグはどこで編集できる？
- WordPress：[ダッシュボード]⇒[外観]⇒[テーマエディター]⇒右側のバーの[header.php]
- はてなブログ：[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内にコードを貼付け
- Livedoorブログ：[ブログ設定]→[PC]→[カスタマイズ]→[HTMLファイル]
- FC2ブログ：[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]
- Blogger：[テンプレート]⇒[HTMLの編集]
方法2.サーバーにデータをアップロード
こちらは自分のサーバーにアイコンフォントのデータをアップロードして使う方法です。この記事では解説は省きますが、こちらの記事が参考になるかと思います。
3. Font Awesomeの使い方
準備さえ済ましてしまえば、アイコンフォントを表示させるのはとても簡単です。
手順1：使いたいアイコンフォントを探す
アイコン一覧から使いたいアイコンを選びます。このページは何度も使うことになるかと思うのでブックマークしておくと良いでしょう。
ちなみに：旧バージョンのアイコン一覧
使いたいアイコンをクリックします。薄いグレイで表示されているアイコンは、PRO（有料）プランでのみ使うことができます。
手順2：アイコンフォントのコードをコピー
アイコンの詳細ページが開きます。下にスクロールして、<i class〜></i>というコードをまるっとコピーします。
手順3：アイコンを表示させたい位置に貼付け
コピーしたコードをHTML内のアイコンを表示させたい位置に貼り付けます。これだけで以下のようにアイコンフォントを使うことができます。
<p><i class="fab fa-twitter"></i>ここにアイコンを表示</p>
ここにアイコンを表示
ただし、はてなブログの場合、HTML編集画面で貼り付けたときにコードが消えてしまうことがあります。詳しくはこちらの記事をご覧ください。
アイコンの大きさを変える
<i class="fas fa-tasks fa-lg"></i>
FontAwesomeでは、アイコンの大きさを簡単に変えることができます。以下のコードをi class="〜"内に書くことでサイズを大きくすることができます。
- fa-lg (1.333…倍)
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
実際にコードを書いてみます。
<p><i class="fas fa-bomb fa-lg"></i></p> <p><i class="fas fa-bomb fa-2x"></i></p> <p><i class="fas fa-bomb fa-3x"></i></p> <p><i class="fas fa-bomb fa-4x"></i></p> <p><i class="fas fa-bomb fa-5x"></i></p>
その他のサイズにしたいときは
上の5つのサイズ以外にしたい場合は自分の好きな名前のclassを追加して、そのclassに対してCSSでサイズ指定しましょう。
<p><i class="fas fa-bomb my-small"></i></p> <p><i class="fas fa-bomb my-big"></i></p>CSS
.my-small {
font-size: 0.8em
/*0.8倍の大きさに*/}
.my-big {
font-size: 6em
/*6倍の大きさに*/}
アイコンの色を変える
【HTML】<i class="fas fa-tasks my-example"></i>【CSS】 .my-example {color: ◯◯}
アイコンの色を変えるときには、iタグに好きな名前のclassを追加し、それに対してCSSで色を指定します。たとえば以下のように書きます。
<i class="fas fa-tag my-gray"></i> <i class="fas fa-tag my-skyblue"></i> <i class="fas fa-tag my-orange"></i>CSS
.my-gray {color: gray}
.my-skyblue {color: skyblue}
.my-orange {color: #fecb81}
アイコンと文字の間にスペースを作る
文字のすぐ横にコードを貼ると少し窮屈に感じるかもしれません。
半角スペースで対応
アイコンと文字の間に隙間を作るには半角スペースを入力するのが簡単だったりします。
fa-fwというクラス名を追加
<i class="fas fa-tasks fa-fw" ></i>
FontAwesomeではfa-fwという名前のclassをiタグに追加すると、前後にちょっとした余白が作られたりします。
このclassには「アイコン種類に関わらず、そのアイコンが取る幅を統一させる」という意味があります。つまり、アイコンの大きさに応じて左右にちょっとしたスペースを作ってくれるのです。
コレを「左右が詰まっているな」と感じたときに使うと、なかなかにちょうど良い隙間が出来たりします（アイコン種類にもよりますが）。
<p><i class="fas fa-tasks fa-fw"></i> ここにアイコンを表示</p>
ここにアイコンを表示
また、アイコンを縦に並べるときには、それぞれのiタグにfa-fwを入れると、綺麗に揃って並ぶようになります。
回転させる（アニメーション）
<i class="fas fa-tasks fa-spin"></i>
fa-spinというclass名を追加するだけでアイコンをくるくると回すことができます。実際に見てみましょう。
<i class="far fa-lemon-o fa-spin"></i> <i class="fas fa-cog fa-spin"></i>
FontAwesomeでは他にも色々なアニメーションをつけることができます。詳しくはのちほど解説します。
表示角度を変える
<i class="fas fa-tasks fa-rotate-90"></i>
以下のclass名を追加することで、アイコンを傾けて表示させることもできます。
- fa-rotate-90：90度傾ける
- fa-rotate-180：180度傾ける
- fa-rotate-270：270度傾ける
反転させる
<i class="fas fa-tasks fa-flip-horizontal"></i>
あまり使う機会は無いかもしれませんが反転させることもできます。
- 指定なし：
- fa-flip-horizontal：水平方向に反転
- fa-flip-vertical：垂直方向に反転
アイコンを線で囲う
<i class="fas fa-tasks fa-border"></i>
classにfa-borderを足すとアイコンまわりに線をひくことができます。
<i class="fas fa-tasks fa-2x fa-border"></i>
アイコンを重ねる
<span class="fa-stack">
<i class="fas fa-cloud fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
このようにアイコンどうしを重ねることもできます。使い方は以下のようになります。
- class名がfa-stackのspanタグの中に、２つのアイコンを入れる
- 背面のアイコンをはじめに書き、class名にfa-stack-2xを追加
- 次に前面のアイコンを書き、class名にfa-stack-1xを追加
4. Font AwesomeをCSSの疑似要素で使う方法
ここまではHTMLの中に<iほにゃらら></i>というコードを入れてきましたが、CSSでアイコンを表示させることもできます。具体的には疑似要素（before）を使います。
使い方の例
使い方の例は以下のようになります。
【HTML】
<p>これは<span class="bomb">爆弾</span>です。</p>
【CSS】
.bomb:before {
font-family: "Font Awesome 5 Free";
content: '\f1e2';
font-weight: 900;
}
・font-family: "Font Awesome 5 Free";でFontAwesomeを使うことを明示・content: '\f1e2'でアイコンの種類を指定というような書き方をします。バックスラッシュをお忘れなく。
アイコン種類を示すf1e2のようなコードは各アイコンのページで見ることができます。これをコピペして使いましょう。
<p>これは<span class="bomb">爆弾</span>です。</p>CSS
.bomb:before {
font-family: "Font Awesome 5 Free";
content: '\f1e2';
font-weight: 900;
}
これは爆弾です。
注意：font-weightの指定が必要
FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。Solidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて書きましょう。
ブランド系のアイコンを使う場合にはfont-familyを変える
やなどのブランド系のアイコンを使うときは、font-family名を"Font Awesome 5 Brands"とします。
【HTML】
<p>これは<span class="twitter">ツイッター</span>です。</p>
【CSS】
.twitter:before {
font-family: "Font Awesome 5 Brands";
content: '\f099';
}
ブランド系アイコンの見分け方
ブランド系のアイコンの場合、タグのclass名にfabが指定されています。
なお、旧バージョンのFontAwesome（4.7.◯以前）をお使いの場合には、font-family: FontAwesome;とします。FreeやBrandsなどは書きません。
SVG + JavaScriptでアイコンを表示させている場合にはもう一手間必要
<script defer src="~"></script>でアイコンを読み込んで表示させている場合、上記のCSS指定に加えて、もう一手間必要です。
head内に変換タグを追加
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script>
FontAwesomeConfig = { searchPseudoElements: true };
</script>
こちらのscriptをhead内に追加することで、疑似要素をSVGに変換してくれるようになります。
display:noneを指定
【CSS】
.twitter:before {
display: none;
font-family: "Font Awesome 5 Brands";
content: '\f099';
}
「JavaScript + SVG」での利用の場合には、font-familyとcontentの指定に加えて、display: none;も疑似要素に対して指定するようにしましょう。
見出しにアイコンを使う
見出しにアイコンフォントを使いたいときは以下のような書き方をしましょう。
【CSS】
h3:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
padding-right : 5px;/*文字との隙間*/
color: #f89174;/*アイコンの色*/
}
{padding-right}はアイコンと文字との隙間になるので、必要に応じて値を調整しましょう。また、この設定だと文字とアイコンは同サイズになります。アイコンを大きくしたり小さくしたりしたいときはfont-sizeで変更しましょう。なお、上の書き方例ではh3としていますが、h1でもh2でも書き方は全く同じです。
<h3>見出しにアイコンを使おう</h3>CSS
h3:before {
font-family: "Font Awesome 5 Free";
content: "\f00c";
font-weight: 900;
padding-right: 5px;
color: #f89174;/*アイコンの色*/
}
見出しにアイコンを使おう
なお、アイコンを使った見出しデザイン例はこちらの記事で大量に紹介しています。ぜひ参考にして頂ければと思います。
アイコンが表示されない？
一部のアイコンではfont-weight:●●を指定してやらないと表示されないことがあるようです。詳しくは「FontAwesome5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処法」が参考になります。うまくいかない場合には、一度チェックしてみてください。
箇条書きのマーカーの代わりに使う
リストデザインにアイコンフォントを使うこともできます。具体的なデザイン例をこちらで解説しているので、是非目を通してみてください。
6. 色々なアニメーションをつける方法
『Font Awesome Animation』という専用のスタイルシートを読み込めば、アイコンにより多くの動きをつけることができるようになります。
Font Awesome Animationの使い方
CDNによりFontAwesomeを読み込んでいる場合、以下のコードを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名を追加します。
<i class="fas fa-tasks アニメーションのclass名"></i>
たとえば、faa-wrench animatedというclassを追加すれば、前後に揺れるような動きをつけることができます。アイコンはどれを選んでも構いません。
<i class="fab fa-twitter faa-wrench animated"></i>
合わせてアイコンの色を変えたり、大きさを変えることもできます（さきほど紹介した方法と同じです）。
アニメーション一覧
ここから「Font Awesome Animation」により表現できる動きをまとめました。
| 動き | class名 | コード例 |
|---|---|---|
| レンチ風 | faa-wrench animated |
<i class="fab fa-twitter faa-wrench animated"></i> |
| ブルブル | faa-ring animated |
<i class="fas fa-bus faa-ring animated" ></i> |
| 横揺れ | faa-horizontal animated |
<i class="fas fa-male faa-horizontal animated"></i> |
| 縦揺れ | faa-vertical animated |
<i class="fas fa-futbol-o faa-vertical animated"></i> |
| 点滅 | faa-flash animated |
<i class="fas fa-star faa-flash animated"></i> |
| 跳ね | faa-bounce animated |
<i class="fas fa-music faa-bounce animated"></i> |
| スピン | faa-spin animated |
<i class="fas fa-refresh faa-spin animated"></i> |
| 浮遊 | faa-float animated |
<i class="fas fa-ship faa-float animated"></i> |
| パルス | faa-pulse animated |
<i class="fas fa-heart faa-pulse animated"></i> |
| シェイク | faa-shake animated |
<i class="fas fa-facebook faa-shake animated"></i> |
| ジャジャーン | faa-tada animated |
<i class="fas fa-plane faa-tada animated"></i> |
| 通過 | faa-passing animated |
<i class="fas fa-bicycle faa-passing animated"></i> |
| バック | faa-passing-reverse animated |
<i class="fas fa-bicycle faa-passing-reverse animated"></i> |
| バースト | faa-burst animated |
<i class="fas fa-bomb faa-burst animated"></i> |
アイコンへのhover時のみ動かす
class名のanimatedをanimated-hoverに書き換えると、アイコンにカーソルをのせたとき（hover時）のみアニメーションが有効になります。
<p><i class="fas fa-twitter fa-2x faa-wrench animated-hover"></i>←カーソルを当ててね</p>
←カーソルを当ててね
親要素へのhover時のみ動かす
親要素にカーソルをのせたときのみ動くようにすることもできます。たとえば、pタグの中にアイコンがある場合、pタグにカーソルをのせたときにアニメーションが有効になります。
方法
- 親要素に「faa-parent animated-hover」というclass名を追加
- アイコンには「faa-◯◯」というclass名だけ追加（「animated」はつけない）
<p class="faa-parent animated-hover"> <i class="fas fa-twitter faa-wrench"></i> ここにhover </p>
ここにhover
シェアボタンを作るときなんかに便利そうですね。くわしくはFont Awesome Animationをご覧いただくと良いかと思います。
