アイコンフォントのFont Awesomeを使ってみた

 ブログやホームページを作成するとき、メニューやナビゲーションをわかりやすくしたり、デザインをカスタマイズするためにアイコンを使うことがあると思います。素材サイトから無料でダウンロードした画像で装飾をしますが、欲しい大きさがなかったり違う色が使いたかったりと、結構手間がかかったりします。

 そんな雑務を解決するのが「アイコンフォント」です。アイコンフォントはテキストなので、大きさの拡大・縮小、色の変更などを CSS からカスタマイズすることができます。アイコンなのに文字と同じように扱えるということです。フォントなのでテキストとのベースラインも合わせやすく、ベクターデータなので画像と違って大きくしてもギザギザになりません。

当ブログでも使っております。

20151118_1

 今回は、数あるアイコンフォントの中でもっとも有名な「Font Awesome」の使い方を解説してみたいと思います。

準備

HTML の <head> ~ </head> の間で Font Awesome を読み込ませる必要があります。

CDN の場合

Font Awesome は CDN で利用することができます。これは、ページを表示させるたびに毎回 Font Awesome のサーバーにアクセスし、アイコンフォントを入手する方法です。自分のサーバーにファイルをアップロードする手間が省けます。まずは、こちらのリンクにアクセスしてください。

この部分の HTML ソースをコピーし、<head> ~ </head> の間にペーストします。

20151118_2

ファイルをアップロードする場合

自分のサーバーに Font Awesome のファイルをアップロードし、それを読み込む方法です。Font Awesome のサーバーがダウンしても影響を受けることがありません。ファイルの大きさは 1MB ちょっとしかありませんので、アップロードの時間もそれほどかからないと思います。こちらのリンクからダウンロードします。

20151118_3

ZIP ファイルがダウンロードされるので、解凍した後に使用する HTML ファイル内に移動します。今回は「css」というフォルダを作成し、その中に移動しました。一部の必要なファイルだけ移動すれば動作するのですが、下手にフォルダの構成を変更すると font-awesome.min.css を修正しなければならないので、解凍したものをそのまま突っ込んでおいたほうが無難です。

20151118_4

<head> ~ </head> の間に link 要素を使って、次の一文を追記してください。

使い方

まずは、こちらのリンクにアクセスします。

欲しいアイコンをクリックします。

20151118_5

このソースコードをコピーし、HTML ファイルの表示したい場所にペーストします。

20151118_6

例えば次のように使います。

i タグを空タグで使用しています。構造的に意味がない HTML ソースなので、嫌う人もいるようですね。class 属性の「fa」は Font Awesome アイコンの基本的な表示が設定されているもので、「fa-○○○」の部分が各アイコンに割り振られたクラス名になっています。

こうなります。

20151118_7

アイコンフォントは文字と同じ扱いなので、こんなカスタマイズも可能です。

同じ幅で表示する

 各アイコンは幅を統一して作成されていないので、リストなどで縦に並べて使おうとすると、文字の始まる位置がバラバラで見栄えが悪くなります。

20151118_8

「fa-border」オプションで枠線を表示するとよくわかります。

20151118_9

アイコンを同じ幅で表示するオプション「fa-fw」があるので、これを設定してあげると、

20151118_10

幅が統一されてきれいに表示されます。枠線が必要ないのであれば、「fa-border」を削除してください。

20151118_11

アイコンフォントと文字との間隔が狭いようでしたら、アイコンの右側にマージンを設定してあげるとよいでしょう。

大きさを変更する

設定できる大きさのオプションは5つあります。

  • fa-lg:約1.33倍
  • fa-2x:2倍
  • fa-3x:3倍
  • fa-4x:4倍
  • fa-5x:5倍

20151118_12

回転させる

「fa-spin」オプションを設定すると、アニメーションによりアイコンが回転します。WordPress のテーマなどで、ソーシャルメディアでの拡散のために SNS ボタンを設置することがあると思いますが、シェア数を受信中にこのアイコンがくるくる回っているのを見たことがあるのではないでしょうか。

20151118_13

fa-spin さえ設定すれば、どんなアイコンでも回転させることができますが、fa-spinner に関しては、fa-spin ではなく「fa-pulse」オプションにすると8フレームで1回転するアニメーションになります。こちらのほうが待機中の雰囲気にあっているかも。

角度を指定する

設定できる角度のオプションは3つあります。

  • fa-rotate-90:90度
  • fa-rotate-180:180度
  • fa-rotate-270:270度

20151118_14

反転させる

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

20151118_15

:before、:after 要素を使う

 「空タグは HTML ソース的に嫌だな」という人は、:before 要素などでデザインのカスタマイズをすることをおすすめします。私もこちらのほうが好みです。例えば、このようなページでメニューの先頭にアイコンフォントを表示してみます。

20151118_16

こちらから HTML のテンプレート素材を頂きました。

メニューの HTML ソースは次のようになっています。

各アイコンのページには「Unicode」というものがあるので、これを使います。

20151118_17

今回使用するユニコードは「f02b」です。CSS ファイルに次のように記述します。

ユニコードをエスケープするのを忘れないでください。次のように表示されます。

20151118_18

テキストと同じように扱えるので、大きさや色の変更も簡単です。

20151118_19

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP