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

目次

Font Awesomeとは?

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

Font Awesome5

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

※上のリンクは2017年末にリリースされたFontAwesome5です。旧バージョンを利用することもできます。

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

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

使用例



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

FontAwesome5とは?

2017年末にリリースされたFontAwesomeの最新バージョンです。FontAwesome5には、無料プランと、有料のPROプランがあります。 ちなみに、旧バージョンのFontAwesomeはこれまで通り使い続けることができます。

PROプランだとアイコン種類が多く、さらに複数の太さのアイコンを使うことができます。料金は$60です(1度の支払いで使い続けることができます。)。

使用準備

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

方法1. CDNを使う

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

個人的にはこの方法がオススメです。FontAwesomeに新しいアイコンが追加されたときにダウンロードし直す必要はありませんし、自分のサーバーへの負荷を減らすこともできます。何より楽なのが良いですね。ただし、新アイコンが追加されたときにはURLの中のv○.○.○の部分を最新のバージョン番号に書き換えないと新アイコンは使えません。

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

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

 旧Verを利用する場合

上のコードはFontAwesome5を使う場合のコードです。旧Verを利用する場合は、下記のコードをコピーしてください。

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

 SVG & JavaScriptで使用する方法

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.サーバーにデータをアップロード

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

Font Awesomeの使い方

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

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

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

ちなみに:旧バージョンのアイコン一覧

使いたいアイコンをクリックします。薄いグレイで表示されているアイコンは、PRO(有料)プランでのみ使うことができます。

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

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

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

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

htmlのコード

<p><i class="fab fa-twitter"></i>ここにアイコンを表示</p>
ブラウザ表示

ここにアイコンを表示

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

<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倍)

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

htmlのコード

<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でサイズ指定しましょう。

htmlのコード

<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倍の大きさに*/}
ブラウザ表示


アイコンの色を変える

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

htmlのコード

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

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

htmlのコード

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

ここにアイコンを表示

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

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

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

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

htmlのコード

<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を足すとアイコンまわりに線をひくことができます。

htmlのコード

<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タグの中に、2つのアイコンを入れる
  • 背面のアイコンをはじめに書き、class名にfa-stack-2xを追加
  • 次に前面のアイコンを書き、class名にfa-stack-1xを追加

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のようなコードは各アイコンのページで見ることができます。これをコピペして使いましょう。

htmlのコード

<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でも書き方は全く同じです。

htmlのコード

<h3>見出しにアイコンを使おう</h3>

cssのコード

h3:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  font-weight: 900;
  padding-right: 5px;
  color: #f89174;/*アイコンの色*/
}
ブラウザ表示

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

色々なアニメーションをつける方法

『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を追加すれば、前後に揺れるような動きをつけることができます。アイコンはどれを選んでも構いません。

htmlのコード

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

htmlのコード

<p><i class="fas 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="fas fa-twitter faa-wrench"></i> ここにhover
</p>

出力結果

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

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP