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

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>
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

となります。

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

幅を揃える

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

<i class="fa fa-anchor fa-fw"></i>
「fa-fw」なしバージョン
テキスト
テキスト
テキスト

「fa-fw」ありバージョン
テキスト
テキスト
テキスト

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

テキストの回り込み

「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-quote-left 2倍サイズ」を「pull-left」で回り込み。
→そちらは「pull-right」で回り込み


クルクル

「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>
normal
fa-rotate-90(90度傾き)
fa-rotate-180(180度傾き)
fa-rotate-270(270度傾き)
fa-flip-horizontal(反転)
icon-flip-vertical(反転&180度)


囲えます。

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>
四角囲い抜き
四角囲いベタ
丸囲い抜き
丸囲いベタ
キケン!
太陽&スマイル


以上!

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

Pocket