HAM MEDIA MEMO

このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。

Font Awesome, the iconic font designed for Bootstrap

※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。

Font Awesome とは？

Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができます。

Bootstrap 2.3.2 以前は Webフォントではなく、Glyphicons を CSS Sprite で提供されていましたが、 Font Awesome は Bootstrap のアイコンをもっと使いやすくするために、 Bootstrap のアイコンを Webフォント として利用できるようにしたのです。現在の Bootstrap の Glyphicons も Webフォント として利用してできるようになっていますが、アイコンだけを利用するなら Font Awesome を使うほうが簡単です。

無料で使えるフォントですが、使う前にライセンスは確認しておきましょう。

Font Awesome License

使い方：必要ファイルの準備

Get Started with Font Awesome

Font Awesome を利用方法は、必要ファイルをダウンロードして利用する方法と、 CDN を利用する方法の２つが用意されています。

CDN で利用

CDN は Bootstrap CDN で提供されています。

Bootstrap CDN #Font Awesome

head 要素内に下記コードを入れることで CDN で Font Awesome を利用できます。

HTML：CDN利用版

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

ファイルをダウンロードして利用

Font Awesome のトップページに 『Download』 のリンクがありますので、そこからファイルをダウンロードしましょう。

zip ファイルを解凍し、利用する CSSファイルとフォントフォルダをコピーして、利用するプロジェクトに入れてください。

HTML：ダウンロードファイルを配置

<link href="path/to/font-awesome/css/font-awesome.min.css" rel="stylesheet">

CSS の設置したフォルダ path/to/font-awesome/ はプロジェクトに合わせて変えてください。

Sass もしくは LESS での利用

ダウンロードファイルには Sass 版と LESS 版の２種類も同胞されています。プロジェクトの CSS に import する場合などに活用できます。

LESS は font-awesome.less 、 Sass は SCSS 形式で font-awesome.scss 、それぞれ必要ファイルが import されて構成されています。そのため、使わないコンポーネントがあれば font-awesome.xxxx ファイルから使わないコンポーネントをコメントアウトするか削除をして読み込まないようにするだけで、必要最低限のみの構成で利用することも可能です。

また、もしも Ruby on Rails のプロジェクトで利用するような場合は、Gemfile に gem 'font-awesome-xxxx' （xxxx は less もしくは sass）を記述して $ bundle でインストールしたり、 $ gem install font-awesome-xxxx で導入できるようになっています。

カスタマイズする場合のフォントファイルパス変更

デフォルトでは css フォルダと同じ階層に font フォルダが指定されているのですが、プロジェクトで別の階層に設置している場合は variables.less もしくは _variables.scss の @fa-font-path にて変更してください

アイコンの表示

アイコンを使うために一番簡単な方法は、Font Awesome のサイトで使いたいアイコンをクリックして、その先のページで表示される HTML をコピペして利用する方法です。

1. Icon 一覧ページへ

上にあるナビゲーションの Icons から移動します

2. 使いたいアイコンをクリック

使いたいアイコンでクリックします

3. HTML 要素をコピー

HTML例：旗

<i class="fa fa-flag"></i> fa-flag

class に fa と 各アイコンに割り振られている fa-xxxx を利用することで表示されます。コピー用では i 要素が利用されていますが、 span などの要素でも利用可能です。

.fa のスタイル

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

また、 fa-xxxx の各アイコンは擬似要素の :before で入れられています。

用意されいてるスタイルを利用する

Font Awesome のスタイルにはデフォルトで幾つかそのまま利用できるスタイルが用意されています。

Font Awesome Examples

アイコンを大きくする

class に fa-lg fa-2x fa-3x fa-4x fa-5x を入れることで大きくなります。

アイコンを大きくするサンプル

<p><i class="fa fa-flag fa-lg"></i> fa-flag（fa-lg）</p>
<p><i class="fa fa-html5 fa-2x"></i> fa-html5（fa-2x）</p>
<p><i class="fa fa-html5 fa-3x"></i> fa-html5（fa-3x）</p>
<p><i class="fa fa-html5 fa-4x"></i> fa-html5（fa-4x）</p>
<p><i class="fa fa-html5 fa-5x"></i> fa-html5（fa-5x）</p>

割り当てられているスタイル

.fa-lg {
  font-size: 1.3333333333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}

アイコン表示幅を統一させる

アイコンによってそれぞれの幅が違うため、リストやリンクボタンなどで利用すると、テキスト部分の表示開始位置がかわってしまいます。 そのため、アイコンを表示している部分に統一の幅を持たせるために、 fa-fw を付加します。

fa-fwをつけていない場合

<p><i class="fa fa-home"></i>ホーム</p>
<p><i class="fa fa-calendar"></i>スケジュール</p>
<p><i class="fa fa-github"></i>Github</p>
<p><i class="fa fa-cogs"></i>設定</p>

余白やスペースなどを付けないとアイコンとテキストは当然くっつきます。また、アイコンによってサイズが違うものもあるため、テキストの開始位置がずれてしまいます。

fa-fwをつけた場合

<p><i class="fa fa-home fa-fw"></i>ホーム</p>
<p><i class="fa fa-calendar fa-fw"></i>スケジュール</p>
<p><i class="fa fa-github fa-fw"></i>Github</p>
<p><i class="fa fa-cogs fa-fw"></i>設定</p>

fa-fw をつけることで icon 部分に横幅が付きます。

.fa-fw に割り当てられているスタイル

.fa-fw {
  width: 1.2857142857142858em;
  text-align: center;
}

リストで利用する場合

リストで利用する場合は ul の class に fa-ul をつけ、 li の class に fa-li をつけます。

<ul class="fa-ul">
  <li><i class="fa fa-home fa-li"></i>ホーム</li>
  <li><i class="fa fa-calendar fa-li"></i>スケジュール</li>
  <li><i class="fa fa-github fa-li"></i>Github</li>
  <li><i class="fa fa-cogs fa-li"></i>設定</li>
</ul>

.fa-ul と .fa-li に割り当てられているスタイル

.fa-ul {
  padding-left: 0;
  margin-left: 2.142857142857143em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.142857142857143em;
  width: 2.142857142857143em;
  top: 0.14285714285714285em;
  text-align: center;
}

.fa-fw をつける場合と違い、 .fa-li ではリストを absolute で配置しています。そのため、テキストのスタイルによってはうまく中央にならない場合もあります。うまく中央にならない場合は .fa-li の top の位置を調整してみましょう。もしくは li の line-height でも調整は可能です。

ボーダーで囲う

<p><i class="fa fa-quote-left fa-2x fa-border"></i></p>

.fa-border に割り当てられているスタイル

.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em;
}

回り込み

pull-left と pull-right でアイコンの横にテキストの回り込みを指定できます。

<p><i class="fa fa-quote-left fa-2x pull-left"></i>ハムというニックネームは、本名『はせがわ ひろむ』の名前の最初と最後の文字です。ひらがなで書くと７文字あって長いので、最初と最後以外の文字はいらないと言われてポイチョされました。ハムは顔文字では『(´ ºムº `)』で表示されることもあります。<i class="fa fa-quote-right fa-2x pull-right"></i></p>

アイコンに .pull-right と .pull-left をつけたサンプル

アイコンに .pull-right と .pull-left をつけないサンプル

p要素の内側にアイコンをいれた場合の違いはこのくらいです。

.pull-right と .pull-left に割り当てられているスタイル

.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: .3em;
}
.fa.pull-right {
  margin-left: .3em;
}

そもそも .pull-xxx の スタイルが float するだけのテキストのため、このようになっています。

違いを確認するため、アイコンを p要素の外側に配置してみます。

まずはアイコンをp要素の外側に配置して、pull-xxx を付けずに表示させてみます。

アイコンをp要素の外にだして .pull-right と .pull-left を付けないサンプル

ブロック要素の外側に配置されるため、テキストは回り込まない状態になります。

回り込みするために、 pull-xxx の class をつけます。

アイコンを p 要素の外にだして .pull-right と .pull-left を付けたサンプル

どちらも p 要素の外側にだした場合は、上のサンプルをみてもわかるように、最後の pull-right がテキストブロックのあとで出てきます。

回転アニメーション

fa-spin でアイコンが回転します。

<p><i class="fa fa-spinner fa-spin"></i></p>
<p><i class="fa fa-refresh fa-spin"></i></p>
<p><i class="fa fa-cog fa-spin"></i></p>

回転サンプル

.fa-spin に割り当てられているスタイル

.fa-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
/* 〜 keyframe の prefix部分省略 〜 */@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

角度（90°毎の回転）と反転

fa-rotate-x で90°・180°・270°の回転をし、fa-flip-xxx で縦か横で反転をします。

<p><i class="fa fa-shield fa-fw"></i>normal<br />
<i class="fa fa-shield fa-rotate-90 fa-fw"></i>fa-rotate-90<br />
<i class="fa fa-shield fa-rotate-180 fa-fw"></i>fa-rotate-180<br />
<i class="fa fa-shield fa-rotate-270 fa-fw"></i>fa-rotate-270<br />
<i class="fa fa-shield fa-flip-horizontal fa-fw"></i>fa-flip-horizontal<br />
<i class="fa fa-shield fa-flip-vertical fa-fw"></i>icon-flip-vertical</p>

角度と反転サンプル

角度と反転関連のスタイル

.fa-rotate-90 {
  /* 〜 prefix部分省略 〜 */  transform: rotate(90deg);
}
.fa-rotate-180 {
  /* 〜 prefix部分省略 〜 */  transform: rotate(180deg);
}
.fa-rotate-270 {
  /* 〜 prefix部分省略 〜 */  transform: rotate(270deg);
}
.fa-flip-horizontal {
  /* 〜 prefix部分省略 〜 */  transform: scale(-1, 1);
}
.fa-flip-vertical {
  /* 〜 prefix部分省略 〜 */  transform: scale(1, -1);
}

矢印関連は回転させずともそれぞれの角度のアイコンが用意されているのでスタイルは不要ですが、サンプルの用に盾や星のアイコンなどではそれぞれの角度で用意されていないので、無いような場合に利用してみてください。

アイコンの重ねによる組み合わせ

アイコンを重ねて表示できるよう、組み合わせ用のスタイルも用意されています。

<p>
  <span class="fa-stack fa-lg">
    <i class="fa fa-heart fa-stack-2x"></i>
    <i class="fa fa-apple fa-stack-1x fa-inverse"></i>
  </span>
  fa-heart と fa-apple
</p>

アイコンの重ねによる組み合わせサンプル

サンプル・・・ハートとアップルの組み合わせ、微妙だったかも（笑）

アイコン組み合わせ関連のスタイル

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #ffffff;
}

アイコンを自前の CSS に組み込みたい場合

ここまでは基本的な使い方を書いたのですが、その他活用 Tips を２つ書いておきます。

デフォルトで用意されているスタイルには、 :before の擬似要素で使うものばかりが用意されています。

使うかわからないですが、直接テキストに入れたいような場合、 font-family: 'FontAwesome'; を指定し、HTMLでは該当するコードを指定することで利用ができます。例えば fa-flag のアイコンを使いたい場合は、 &#x + f024 + ; となります。

この例の f024 は Unicode で、Cheatsheet のページを見るか、各アイコン詳細ページのアイコン大小が表示されいてる部分の直下に書いてあります。

Font Awesome Cheatsheet

CSSの :before や :after で使う場合は &#xの部分を \ （バックスラッシュ）にすることで利用できます。

Fireworks や Photoshop で使いたい場合

Fireworks や Photoshop などのツールで使いたい場合、フォントを Font Awesome に設定して、 Cheatsheet のページでアイコンを選択＆コピーをしてから、ツールで貼付けをすることで利用できるようになります。

Cheatsheet を利用しない方法もあると思うのですが、どのアイコンを使うかを Cheatsheet で選んでからそれをコピーするだけなので、とても簡単だと思います。

Tipsの紹介は以上です。長々と書いてしまいましたが、 Font Awesome 活用してみてください。