Font Awesomeで楽々アイコン表示　その使い方

「ミニマル＆シンプルで、ところどころアイコンを入れる程度……」というデザインのリクエストをいただくことがあるけれど、シンプルなアイコンって結構難しいのよ。というか、分かりやすくするならば、一般的に知られているアイコン使えばいいじゃないの。って話ですよね。

そんな一般的なアイコンは、「Font Awesome」を利用しましょう。
いわゆるWEBフォント・・・というか、アイコンがフォントになったCSSツールキットです。…で合ってるかな？

デザイナーがFont Awesomeからアイコンを選んでくれればコーダーは楽々。
どっちもやるならもっと楽ちん。

Font Awesomeの使い方

①headerにawesomeフォントのcssを入れる

直接参照

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

または、サーバーにアップして使う場合は、Font Awesomeをダウンロードして、「css」と「fonts」フォルダを使う（この2つのフォルダは同じ階層に）。

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

（私のコピペ用なのでパスはお好きに…）

②フォントを選んでコードを入れる。

Font Awesomeのアイコン一覧のフォントをクリックして、ソースを確認
例えばを入れるなら、

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

と記述するだけ。

「もう既にhtmlがいっぱいありすぎて、修正なんてできない！」「その都度<i>タグいれるの面倒！」という場合は、スタイルシートにも追加できます。

li:before {    
    font-family: 'FontAwesome';
    content: '\f13d';
    margin: 0 5px 0 -15px;
}

既にあるliタグの疑似要素:beforeに対して、
font-familyにFontAwesome、contentにUnicodeを指定する。
Unicodeは、フォント詳細ページ（例）に記述されています。

でも、これだけじゃない。

Font Awesomeのスタイルを調整する

Font Awesomeのスタイルシートには、予め用意されたスタイルがいくつかあります。

大きさは6種類あって、ノーマルなコード（<i class=”fa fa-xxxxx”></i>）は一番小さいサイズなので、大きさに合わせて「fa-lg〜fa-5x」を追加すると

<i class="fa fa-anchor fa-lg"></i>
<i class="fa fa-anchor fa-2x"></i>
<i class="fa fa-anchor fa-3x"></i>
<i class="fa fa-anchor fa-4x"></i>
<i class="fa fa-anchor fa-5x"></i>

となります。

あくまでもフォントなので、色を変えたい時は、別途cssに.faもしくはそれを囲っているタグにフォントカラーを指定。Awesomeのcssで用意されているのは6サイズですが、自身のテキストとバランスがとれないとか、アイコンだけ大きくしたい時も、font-sizeで調整します。

幅を揃える

アイコンによって横幅が違うので、リストなどの縦並びでテキストがズレる場合は「fa-fw」を追加する

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

さらには、一覧にあるアイコンは、回したり反転させたり囲ったりもできます。

テキストの回り込み

「pull-left」 or 「pull-right」でテキストの回り込み

<i class="fa fa-quote-left fa-2x pull-left"></i>
<i class="fa fa-quote-left fa-2x pull-right"></i>

クルクル

「fa-spin」または「fa-pulse」で
こういったアイコンに便利なクルクル。

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

ほら↓

（CSS3のアニメーション対応ブラウザのみ）

傾きとか反転とか

「fa-rotate」で傾けたり反転させたり。

<i class="fa fa-anchor"></i>
<i class="fa fa-anchor fa-rotate-90"></i>
<i class="fa fa-anchor fa-rotate-180"></i>
<i class="fa fa-anchor fa-rotate-270"></i>
<i class="fa fa-anchor fa-flip-horizontal"></i>
<i class="fa fa-anchor fa-flip-vertical"></i>

囲えます。

2つのアイコンフォントを「fa-stack」で囲うと…

<!-- 四角囲い抜き：anchor（1倍）を、square-o（2倍）で囲う -->
<span class="fa-stack fa-lg">
	<i class="fa fa-square-o fa-stack-2x"></i>
	<i class="fa fa-anchor fa-stack-1x"></i>
</span>
<!-- 四角囲いベタ：anchor（1倍）を反転（inverse）させ、square（2倍）で囲う） -->
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-anchor fa-stack-1x fa-inverse"></i>
</span>
<!-- 丸囲い抜き：anchor（1倍）を、circle-o（2倍）で囲う -->
<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <i class="fa fa-anchor fa-stack-1x"></i>
</span>
<!-- 丸囲いベタ：anchor（1倍）を反転（inverse）させ、circle（2倍）で囲う） -->
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-anchor fa-stack-1x fa-inverse"></i>
</span>
<!-- キケン：anchor（1倍）を、ban（2倍）で囲う -->
<span class="fa-stack fa-lg">
  <i class="fa fa-anchor fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x"></i>
</span>
<!-- 太陽＆スマイル：smile（1倍）を、sun（2倍）で囲う -->
<span class="fa-stack fa-lg">
  <i class="fa fa-sun-o fa-stack-2x"></i>
  <i class="fa fa-smile-o fa-stack-1x"></i>
</span>

以上！

画像を書き出したり位置調整する必要もなく、便利♪