【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

Webアイコンフォントの使い方まとめ

今回はFont Awesomeという超便利なサービスの使い方をまとめます。後半ではアイコンにさまざまなアニメーション効果をつける方法も解説します。

1. Font Awesomeとは?

font awesomeの画面イメージ

ざっくりというとウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです。

FontAwesome
公式ページです。アイコン一覧などもこちらから確認できます。

Webアイコンフォントとは?

ウェブページ上で文字と同じように表示できるアイコンのことです。画像でアイコンを貼るのと違い、拡大してもぼやけませんし、色もサイズも簡単に変えることができます。

使用例



たとえばこれらのアイコンはFontAwesomeを使って表示しています。このように色もサイズも自由に変えることができます。

2. 使用準備

FontAwesomeを使うために少しだけ準備をする必要があります。この準備には2つの方法があります。

方法1. CDNを使う

cdnを使う

CDNとはものすごくざっくりというと「専用のサーバー上にある画像やフォントなどのデータ」を読み込んで自分のWebサイトに表示させる仕組みです。つまりアイコンをダウンロードして自分のサーバーにアップロードしなくても使うことができるのです。

サルワカくんの顔(通常)
サルワカくん

個人的にはこの方法がオススメです。FontAwesomeに新しいアイコンが追加されたときにダウンロードし直す必要はありませんし、自分のサーバーへの負荷を減らすこともできます。何より楽なのが良いですね。

手順1. 以下のコードをコピー

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

念のため最新のコードをBootstrapCDNで確認すると良いでしょう。

手順2. headタグ内に貼付け

コピーしたコードをブログやWebサイトの<head>〜</head>の中に貼り付けます。よく分からなければ</head>の直前に貼ればOKです。これでアイコンフォントの使用準備は完了です。

headタグはどこで編集できる?

  • WordPress:[ダッシュボード]⇒[外観]⇒[テーマの編集]⇒右側のバーの[header.php]
  • はてなブログ:[設定]⇒[詳細設定]⇒[headに要素を追加]の枠内にコードを貼付け
  • Livedoorブログ:[ブログ設定]→[PC]→[カスタマイズ]→[HTMLファイル]
  • FC2ブログ:[設定]⇒[テンプレートの設定]⇒[◯◯のHTML編集]
  • Blogger:[テンプレート]⇒[HTMLの編集]

方法2.サーバーにデータをアップロード

こちらは自分のサーバーにアイコンフォントのデータをアップロードして使う方法です。この記事では解説は省きますが、こちらの記事が参考になるかと思います。

参考
Syncer
FontAwesomeのファイルの設定方法とCSSの読み込み方法が丁寧に解説されています。

3. Font Awesomeの使い方

準備さえ済ましてしまえば、アイコンフォントを表示させるのはとても簡単です。

手順1:使いたいアイコンフォントを探す

Font Awesomeでフォントを探す

アイコン一覧から使いたいアイコンを選びます。このページは何度も使うことになるかと思うのでブックマークしておくと良いでしょう。

使いたいフォントをクリック

使いたいアイコンをクリックします。どれでも構いません。

手順2:アイコンフォントのコードをコピー

font Awesomeのコードをコピー

アイコンの詳細ページが開きます。下の方の<i class〜></i>というコードをまるっとコピーします。

手順3:アイコンを表示させたい位置に貼付け

コピーしたコードをHTML内のアイコンを表示させたい位置に貼り付けます。これだけで以下のようにアイコンフォントを使うことができます。

HTMLコード
<p><i class="fa fa-tasks" aria-hidden="true"></i>ここにアイコンを表示</p>
ブラウザ表示

ここにアイコンを表示

ただし、はてなブログの場合、HTML編集画面で貼り付けたときにコードが消えてしまうことがあります。詳しくはこちらの記事をご覧ください。

サルワカくんの顔(通常)
サルワカくん

ちなみにコードの中のaria-hidden="true"というのは読み上げソフトに対して「ここは装飾なので読み上げなくて良いですよ」と伝えるものです。省いてしまってもアイコンは問題なく表示されます。

アイコンの大きさを変える

<i class="fa fa-tasks fa-lg"></i>

FontAwesomeでは、アイコンの大きさを簡単に変えることができます。以下のコードをi class="〜"内に書くことでサイズを大きくすることができます。

  • fa-lg (1.333…倍)
  • fa-2x (2倍)
  • fa-3x (3倍)
  • fa-4x (4倍)
  • fa-5x (5倍)

実際にコードを書いてみます。

HTMLコード
<p><i class="fa fa-bomb fa-lg"></i></p>
<p><i class="fa fa-bomb fa-2x"></i></p>
<p><i class="fa fa-bomb fa-3x"></i></p>
<p><i class="fa fa-bomb fa-4x"></i></p>
<p><i class="fa fa-bomb fa-5x"></i></p>
ブラウザ表示

その他のサイズにしたいときは

上の5つのサイズ以外にしたい場合は自分の好きな名前のclassを追加して、そのclassに対してCSSでサイズ指定しましょう。

HTML
<p><i class="fa fa-bomb fa-small"></i></p>
<p><i class="fa fa-bomb fa-big"></i></p>
CSS
.fa-small {
	font-size: 0.8em 
	/*0.8倍の大きさに*/}
.fa-big {
	font-size: 6em 
	/*6倍の大きさに*/}
ブラウザ表示


アイコンの色を変える

【HTML】<i class="fa fa-tasks fa-example"></i>【CSS】 .fa-example {color: ◯◯}

アイコンの色を変えるときには、iタグに好きな名前のclassを追加し、それに対してCSSで色を指定します。たとえば以下のように書きます。

HTML
<i class="fa fa-tag fa-gray"></i>
<i class="fa fa-tag fa-skyblue"></i>
<i class="fa fa-tag fa-orange"></i>
CSS
.fa-gray {color: gray}
.fa-skyblue {color: skyblue}
.fa-orange {color: #fecb81}
ブラウザ表示


アイコンと文字の間にスペースを作る

アイコンと文字の間にスペース

文字のすぐ横にコードを貼ると少し窮屈に感じるかもしれません。

半角スペースで対応

アイコンと文字の間に隙間を作るには半角スペースを入力するのが簡単だったりします。

fa-fwというクラス名を追加

<i class="fa fa-tasks fa-fw" ></i>

FontAwesomeではfa-fwという名前のclassをiタグに追加すると、前後にちょっとした余白が作られたりします。

fa-fwの意味

このclassには「アイコン種類に関わらず、そのアイコンが取る幅を統一させる」という意味があります。つまり、アイコンの大きさに応じて左右にちょっとしたスペースを作ってくれるのです。

コレを「左右が詰まっているな」と感じたときに使うと、なかなかにちょうど良い隙間が出来たりします(アイコン種類にもよりますが)。

HTMLコード
<p><i class="fa fa-tasks fa-fw"></i> ここにアイコンを表示</p>
ブラウザ表示

ここにアイコンを表示

サルワカくんの顔(通常)
サルワカくん

また、アイコンを縦に並べるときには、それぞれのiタグにfa-fwを入れると、綺麗に揃って並ぶようになります。

回転させる(アニメーション)

<i class="fa fa-tasks fa-spin"></i>

fa-spinというclass名を追加するだけでアイコンをくるくると回すことができます。実際に見てみましょう。

HTML
<i class="fa fa-lemon-o fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
ブラウザ表示

FontAwesomeでは他にも色々なアニメーションをつけることができます。詳しくはのちほど解説します。

表示角度を変える

<i class="fa fa-tasks fa-rotate-90"></i>

以下のclass名を追加することで、アイコンを傾けて表示させることもできます。

  • fa-rotate-90:90度傾ける
  • fa-rotate-180:180度傾ける
  • fa-rotate-270:270度傾ける

反転させる

<i class="fa fa-tasks fa-flip-horizontal"></i>

あまり使う機会は無いかもしれませんが反転させることもできます。

  • 指定なし:
  • fa-flip-horizontal:水平方向に反転
  • fa-flip-vertical:垂直方向に反転

アイコンを線で囲う

<i class="fa fa-tasks fa-border"></i>

classにfa-borderを足すとアイコンまわりに線をひくことができます。

HTML
<i class="fa fa-tasks fa-2x fa-border"></i>
ブラウザ表示

アイコンを重ねる

<span class="fa-stack"> <i class="fa fa-cloud fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span>

このようにアイコンどうしを重ねることもできます。使い方は以下のようになります。

  • class名がfa-stackのspanタグの中に、2つのアイコンを入れる
  • 背面のアイコンをはじめに書き、class名にfa-stack-2xを追加
  • 次に前面のアイコンを書き、class名にfa-stack-1xを追加

それぞれのアイコンは色を変えたり、動きをつけることができます。1つだけ例を紹介しておきます。

HTML
<p>
  <span class="fa-stack">
    <i class="fa fa-twitter fa-stack-2x fa-skyblue" ></i>
    <i class="fa fa-cog fa-stack-1x fa-spin fa-blue"></i>
  </span>
</p>
CSS
.fa-skyblue {
	color: skyblue;}
.fa-blue {
	color: #668ad8;}

ブラウザ表示


4. Font AwesomeをCSSで使う方法

ここまではHTMLの中に<iほにゃらら></i>というコードを入れてきましたが、CSSでアイコンを表示させることもできます。具体的には疑似要素(before)を使います。

文章の中で使う場合

使い方は以下のようになります。

【HTML】 <p>これは<span class="bomb">爆弾</span>です。</p> 【CSS】 .bomb:before { font-family: FontAwesome; content: '\f1e2'; }

font-family: FontAwesome;でFontAwesomeを使うことを明示content: '\f1e2'でアイコンの種類を指定というような書き方をします。

ユニコードをコピーする

アイコン種類を示すf1e2のようなコードは各アイコンのページの「Unicode:〜」というところで見ることができます。これをコピペして使いましょう。

実際の使用例を紹介します。

HTML
<p>これは<span class="bomb">爆弾</span>です。</p>
CSS
.bomb:before {
	font-family: FontAwesome;
	content: '\f1e2';
	}
ブラウザ表示

これは爆弾です。


左右に余白を作る

アイコンと文字の間にちょっとしたスペースを作りたいときはpadding: 0 2px;のように余白を指定すればOKするか、以下のような方法をとりましょう。

HTML
<p>これは<span class="bomb">爆弾</span>です。</p>
CSS
.bomb:before {
  font-family: FontAwesome;
  content: '\f1e2';
  display: inline-block;/*inline-blockなら幅が指定できる*/
  width: 1.2em;/*文字の1.2倍の横幅に*/
  text-align: center;/*その中で中央寄せ*/
	}
ブラウザ表示

これは爆弾です。


左右に余裕ができました。inline-blockの役割については、以下の記事が参考になるはずです。

見出しにアイコンを使う

見出しにアイコンフォントを使いたいときは以下のような書き方をしましょう。

【CSS】 h3:before { font-family: FontAwesome; content: "\f00c"; padding-right : 5px;/*文字との隙間*/ color: #f89174;/*アイコンの色*/ }

{padding-right}はアイコンと文字との隙間になるので、必要に応じて値を調整しましょう。また、この設定だと文字とアイコンは同サイズになります。アイコンを大きくしたり小さくしたりしたいときはfont-sizeで変更しましょう。なお、上の書き方例ではh3としていますが、h1でもh2でも書き方は全く同じです。

HTML
<h3>見出しにアイコンを使おう</h3>
CSS
h3:before
{
  font-family: FontAwesome;
  content: "\f00c";
  padding-right: 5px;
  color: #f89174;/*アイコンの色*/
}
ブラウザ表示

見出しにアイコンを使おう

なお、アイコンを使った見出しデザイン例はこちらの記事で大量に紹介しています。ぜひ参考にして頂ければと思います。

箇条書きのマーカーの代わりに使う

リストデザインにアイコンフォントを使うこともできます。具体的なデザイン例をこちらで解説しているので、是非目を通してみてください。

5. FontAwesomeでアイコンフォントを探すコツ

検索バーを使う

一覧からアイコンを探すときに1つずつ目視で見ていくのは大変です。オススメなのは、一覧ページの上の方にある検索バーを使うことです。英語で検索をしなければなりませんが、関連したアイコンを幅広く表示してくれます。

Fontawesomeでアイコンを簡単に見つける方法

たとえば「iPhone」と検索すれば、電話やスマホのアイコンを表示してくれます。

日本語で検索する

ありがたいことに各アイコンを日本語で検索することのできるサービスもあります。アイコン探すに活用すると良いでしょう。

参考
FontAwesome 日本語検索
日本語で探したいときに便利です。

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="fa fa-tasks アニメーションのclass名"></i>

たとえば、faa-wrench animatedというclassを追加すれば、前後に揺れるような動きをつけることができます。アイコンはどれを選んでも構いません。

HTML
<i class="fa fa-twitter faa-wrench animated"></i>
ブラウザ表示

合わせてアイコンの色を変えたり、大きさを変えることもできます(さきほど紹介した方法と同じです)。

アニメーション一覧

ここから「Font Awesome Animation」により表現できる動きをまとめました。

動き class名 コード例
レンチ風 faa-wrench animated <i class="fa fa-twitter faa-wrench animated"></i>
ブルブル faa-ring animated <i class="fa fa-bus faa-ring animated" ></i>
横揺れ faa-horizontal animated <i class="fa fa-male faa-horizontal animated"></i>
縦揺れ faa-vertical animated <i class="fa fa-futbol-o faa-vertical animated"></i>
点滅 faa-flash animated <i class="fa fa-star faa-flash animated"></i>
跳ね faa-bounce animated <i class="fa fa-music faa-bounce animated"></i>
スピン faa-spin animated <i class="fa fa-refresh faa-spin animated"></i>
浮遊 faa-float animated <i class="fa fa-ship faa-float animated"></i>
パルス faa-pulse animated <i class="fa fa-heart faa-pulse animated"></i>
シェイク faa-shake animated <i class="fa fa-facebook faa-shake animated"></i>
ジャジャーン faa-tada animated <i class="fa fa-plane faa-tada animated"></i>
通過 faa-passing animated <i class="fa fa-bicycle faa-passing animated"></i>
バック faa-passing-reverse animated <i class="fa fa-bicycle faa-passing-reverse animated"></i>
バースト faa-burst animated <i class="fa fa-bomb faa-burst animated"></i>

アイコンへのhover時のみ動かす

class名のanimatedanimated-hoverに書き換えると、アイコンにカーソルをのせたとき(hover時)のみアニメーションが有効になります。

HTML
<p><i class="fa fa-twitter fa-2x faa-wrench animated-hover"></i>←カーソルを当ててね</p>
ブラウザ表示

←カーソルを当ててね


親要素へのhover時のみ動かす

親要素にカーソルをのせたときのみ動くようにすることもできます。たとえば、pタグの中にアイコンがある場合、pタグにカーソルをのせたときにアニメーションが有効になります。

方法

  1. 親要素に「faa-parent animated-hover」というclass名を追加
  2. アイコンには「faa-◯◯」というclass名だけ追加(「animated」はつけない)
HTML
<p class="faa-parent animated-hover">
  <i class="fa fa-twitter faa-wrench"></i> ここにhover
</p>
ブラウザ表示

ここにhover


シェアボタンを作るときなんかに便利そうですね。くわしくはFont Awesome Animationをご覧いただくと良いかと思います。

サルワカくんの顔(通常)
サルワカくん
ここまでFontAwesomeの使い方を解説してきました。他にアイコンフォントの面白い表現を見つけたら追記していきます。
サルワカ