一行追加するだけ！CSSのみで使えるフォントアイコン【Font Awesome】の使い方とサンプル
Webサイト構築する上でアイコンってかかせないですよね。
画像の小さめのアイコンを使っていたりすると、この画面ではもう少し大きくしたいとかが簡単に出来なくて困ったことありませんか？
フリー素材を都度拾っているから、同じテイストの素材がなかなか見つからなかったり。
いいなと思った素材だけど、商用利用は有料だったり…。
そんな時にオススメなのがフォントアイコンの「Font Awesome」です。
スポンサーリンク
Font Awesomeとは
公式のトップページによると、「象徴的なフォントとCSSのツールキット」とあります。
公式：Font Awesome
ちょっと分かりづらいので簡単に説明すると、今まではアイコンを表示するのに、画像を使うのが普通でしたよね？
「Font Awesome」では、CSS3の「Webフォント」を利用して、アイコンを特殊文字として表示してくれます。
シンプルで統一感のあるアイコン型のフォントと、そのフォントを簡単に扱えるようにしてくれるものです。
オススメする理由
- 文字として扱えるので、どれだけ拡大しても綺麗に表示出来る。
色の変更や影をつけたりも出来ちゃう。 - 同じテイストでWebで使いそうなアイコンは一通り揃っている。
バージョンアップの度に旬なものが追加されていっています。（現在585種） - 商用でも無料で使用可能。
- 導入は1行貼り付けるだけ。
他にもたくさんありますが、後に続くサンプルを見てもらえば、魅力は伝わると思います。
Font Awesomeの導入の仕方
最も簡単な方法
以下のコードを自分のサイトの<head>タグの中に追加して下さい。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
これだけでOKです！
CDNを利用しない方法
最も簡単な方法はCDN（Wikipedia）を利用した方法です。CDNを利用せず、自分のサイトに置いて使用したい人もいると思います。ただ、外部とネットワーク繋がってない状態でローカルだけで試したいとか、自分でカスタマイズして利用するとかじゃない限りCDNを利用したほうが良いです。
それを踏まえた上で、必要な人に向けた手順です。まず、Font Awesomeにアクセスして、最新版をダウンロードします。
ダウンロードを選択
ダウンロードしたzipファイルを解凍すると、このようなファイル構成になっています。
必要なのは「css」と「fonts」なので、これらを自分のサイトに取り込みます。
※配置する場所はどこでも良いですが、この2つは同じ階層に置くようにします。
「css」に含まれるファイルは、カスタマイズする人はminの付いていない方、カスタマイズしない人はminの付いている方だけでも良いです。
後は同じように<head>タグの中で、配置したファイルを取り込むように追記します。
<link rel="stylesheet" href="[配置した場所]css/font-awesome[.min].css">
これで完了です。
WordPressのSTINGER5の場合
ちなみに当ブログはWordPressでテーマはSTINGER5を利用しているですが、最初から4.0.3のものが入っていました。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
今回の記事でサンプルの紹介しようとした所、動かないものがあったので新しいものに置き換えました。
アップデートで追加された機能がいくつかあるので、古いバージョンを使っている人は是非アップデートしておきましょう。
Font Awesomeのサンプル
公式にサンプルがあります。英語が苦手でない人は公式のドキュメント見たほうが確実です。
何となくでも、日本語の方がいい！という人向けです。
一応、公式に載ってない情報も載せたりしてます。
基本的な使い方
fa fa-picture-o
<i class="fa fa-picture-o"></i> fa fa-picture-o
<i>タグに、Font Awesome用のクラス「fa」と「使いたいアイコンの名前（今回は: fa-picture-o）」を指定します。
本来なら何の意味も持たない<span>タグの方が好ましいけど、<i>タグの方が楽だよね。というようなことを公式が言ってる気がする。
アイコン探しと、アイコンの名前の確認は、公式の「The Icons」を見ましょう。
サイズの変更
fa-lg 少し大きめ
fa-2x 2倍
fa-3x
fa-4x
fa-5x
<i class="fa fa-picture-o fa-lg"></i> fa-lg 少し大きめ <i class="fa fa-picture-o fa-2x"></i> fa-2x 2倍 <i class="fa fa-picture-o fa-3x"></i> fa-3x <i class="fa fa-picture-o fa-4x"></i> fa-4x <i class="fa fa-picture-o fa-5x"></i> fa-5x
サイズ指定には、fa-lg、fa-2x～fa-5xが存在する。
もっとでかいのが欲しいんだよ！とか、倍とかじゃなくピクセルで指定したい場合はスタイルを当てましょう。
fa-6xとか書いても6倍になりません。
font-size:6em 6倍
font-size:200px
<i class="fa fa-picture-o" style="font-size:6em"></i> font-size:6em 6倍 <i class="fa fa-picture-o" style="font-size:200px"></i> font-size:200px
横幅の固定
通常だと詰めて表示するのでガタガタになります。
Amazon
Visa
GitHub
WordPress
Facebook
クラス「fa-fw」を追加すると綺麗に揃います。
Amazon
Visa
GitHub
WordPress
Facebook
<i class="fa fa-fw fa-amazon"></i> Amazon <i class="fa fa-fw fa-cc-visa"></i> Visa <i class="fa fa-fw fa-github-alt"></i> GitHub <i class="fa fa-fw fa-wordpress"></i> WordPress <i class="fa fa-fw fa-facebook"></i> Facebook
ボーダーと回り込み
Webサイト構築する上でアイコンってかかせないですよね。画像の小さめのアイコンを使っていたりすると、この画面ではもう少し大きくしたいとかが簡単に出来なくて困ったことありませんか？
<p><i class="fa fa-quote-left fa-pull-left fa-border"></i>Webサイト構築する上でアイコンってかかせないですよね。画像の小さめのアイコンを使っていたりすると、この画面ではもう少し大きくしたいとかが簡単に出来なくて困ったことありませんか？ </p>
「fa-border」を追加すると、少しのパディングと角が少し丸まったボーダーがかかります。
「fa-pull-left 」を追加すると、左にアイコンが配置されて、後の要素が回りこみます。逆に回りこませるには「fa-pull-right」を追加します。
アニメーション
fa-spin 回転
<i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-spinner fa-spin"></i> <i class="fa fa-cog fa-spin"></i>
クラス「fa-spin」を付けることで時計回りに回転します。
fa-pulse 8フレーム回転
<i class="fa fa-circle-o-notch fa-pulse"></i> <i class="fa fa-refresh fa-pulse"></i> <i class="fa fa-spinner fa-pulse"></i> <i class="fa fa-cog fa-pulse"></i>
クラス「fa-pulse」を付けることで、「fa-spin」と違い、45度ずつの8フレームで回転します。歯車(´・ω・｀)
回転
ノーマル
fa-rotate-90
fa-rotate-180
fa-rotate-270
<i class="fa fa-hand-o-up fa-rotate-90"></i> fa-rotate-90 <i class="fa fa-hand-o-up fa-rotate-180"></i> fa-rotate-180 <i class="fa fa-hand-o-up fa-rotate-270"></i> fa-rotate-270
クラス「fa-rotate-90」、「fa-rotate-180」、「fa-rotate-270」を付けることで、後ろの数値分時計回りに回転します。用意されているのは、この3つのみで任意の角度を指定しても対応していません。他の角度を指定したい場合は自分で追加しましょう。
45度
<i class="fa fa-hand-o-up" style="transform: rotate(45deg);"></i> 45度
反転
ノーマル
fa-flip-horizontal
fa-flip-vertical
<i class="fa fa-level-up fa-flip-horizontal"></i> fa-flip-horizontal <i class="fa fa-level-up fa-flip-vertical"></i> fa-flip-vertical
クラス「fa-flip-horizontal」を付けると、水平方向に反転、「fa-flip-vertical」で垂直方向に反転します。
重ねる・色の反転（白色にする）
fa-square-o の上に fa-amazon
fa-square の上に fa-terminal
fa-circke の上に fa-twitter
fa-car の上に fa-ban
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-amazon fa-stack-1x"></i>
</span>
fa-square-o の上に fa-amazon<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-square の上に fa-terminal<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x" style="color:#55acee"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-circke の上に fa-twitter<br>
<span class="fa-stack fa-lg">
<i class="fa fa-car fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x" style="color:red"></i>
</span>
fa-car の上に fa-ban
親要素にクラス「fa-stack」、子要素に「fa-stack-1x」、「fa-stack-2x」を指定することで、アイコンを重ねて表示することが出来ます。
子要素のサイズは1倍の「fa-stack-1x」と2倍の「fa-stack-2x」しかありません。親要素にサイズ変更のクラスを追加することで、子要素の大きさが全て変更されます。
子要素の数は2個に制限されていないのでいくつでも重ねられるし、「fa-stack-1x」と「fa-stack-2x」の順序も自由です。
クラス「fa-inverse」を追加すると、色が白に変更されます。文字の範囲が反転するわけではありません。また、他に色を変更するクラスは用意されていないので、色を指定したい場合は自分で作る必要があります。
他にもBootstrapに組み込むサンプル等がありましたが、私のブログではBootstrap使う予定がないので紹介はしません。
終わりに
いかがでしたか「Font Awesome」は。入れておけば、ちょっとしたアイコンを追加する時にすごく便利そうです。
私の環境では古いバージョンが既に入っていて、サイト内で使われていたアイコンが、全部これだったのかと理解できて良かったです。
今回「Font Awesome」を最新のものにアップデートしました。これを機にアクセントを付けたいと思っていた部分にアイコンを追加して、分かりやすいサイトになるよう有効活用していこうと思います。
そういえば、ここ2年程Web業界から離れていて、HTML5とかCSS3とかの知識はほぼ皆無でしたが、Font Awesomeのおかげで、ほんの少しだけCSS3の要素に触れる事が出来ました。
相変わらずブラウザ間の差を吸収する為に似たようなこと大量に書かないといけないんですね。特にIEは別次元(^q^)
HTMLとCSSはデザイン要素強すぎて避けてましたが、Web系エンジニアで知らないままでは困るので徐々に勉強していきます。