FontAwesomeとは
FontAwesomeとはCSSで指定することのできるアイコンライブラリです。フォントオーサムと読みます。 アイコンの種類は執筆時点で500以上!
例えばこんなアイコンがあります。
アイコンのクオリティと種類の豊富さも魅力ですが、何よりも嬉しいのはその手軽さです。 CSSで使えるので、javascriptは一切不要です。CSSスプライトなどを作る必要もありません。
次からの説明でその簡単さを感じ取っていただければ幸いです。
Get Started
英語で書いてみましたがFontAwesomeの導入方法を解説します。
最も簡単な方法はCDNがあるので、そこに直接リンクを指定することです。 <head></head>タグの間に次の1行を追加するだけです。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Contents Delivery Networkの略で、画像や映像などのコンテンツを配信する専用サーバです。ここではFontAwesomeのcssファイルを取得できます。CDNを活用すれば事前準備が不要になります。また、ページ表示の際のリクエスト先が分散されるためパフォーマンスが良くなることもあります。
もちろんダウンロードしてプロジェクトに組み込むこともできます。 以降の手順は上記方法を利用される場合は飛ばしてください。
公式サイトからダウンロードして、zipファイルを解凍します。 いくつかファイルとフォルダがありますが、必要なのは以下の1ファイル、1フォルダです。
- css/font-awesome.min.css
- fonts/
この時、ひとつ注意点はfont-awesome.min.cssから見たfontsフォルダの位置関係が../fontsとなるように気を付けてください。位置関係を間違ってしまうとうまく読み込むことができません。
あとはcssファイルを<head></head>タグ内で呼び出すだけです。
<link rel="stylesheet" href="{パス}/font-awesome.min.css">
使い方いろいろ
準備ができたので早速使ってみましょう。 使い方は簡単で、<i>タグのclassにfaとセットしたいアイコンのクラス名をセットするだけです。
<i class="fa fa-star"></i>
のアイコンが表示されると思います。 各アイコンのクラス名は公式サイトのIconsページで確認できるので、いろいろ試してみましょう。
ちなみに、このアイコンはフォントという扱いになっています。 なので、大きくしたり、色を変えたりといった指定はいつも通りの方法でできちゃいます。
サイズを変えて赤色のアイコンにする。
<i class="fa fa-car" style="font-size:30px;color:#FF0000;"></i>
影を付ける
<i class="fa-cloud" style="font-size:30px;color:#0033FF;text-shadow:2px 2px 2px rgba(0, 0, 0, 0.4);"></i>
表示を変更する方法はクラスにも用意されています。 大きさを変えたり回したりすることができます。
大きさを変更する。
<i class="fa fa-bomb"></i> <i class="fa fa-bomb fa-2x"></i> <i class="fa fa-bomb fa-3x"></i> <i class="fa fa-bomb fa-4x"></i> <i class="fa fa-bomb fa-5x"></i>
回転させるときはfa-spinを追加します。
<i class="fa fa-cog fa-spin"></i>
リストのアイコンとして利用することもできます。
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li> </ul>
- phone
- mobile phone
- address
どうでもいい使い方
本当にどうでもいいですが、FontAwesomeのクラスは普通のCSSなので、アイコンじゃなくても適用することができます。 例えば、文字を回転させたりとか。
<span class="fa-spin">あ</span> <span class="fa-spin">い</span> <span class="fa-spin">う</span> <span class="fa-spin">え</span> <span class="fa-spin">お</span>あいうえお
まあ、どうでもいいですね。
FontAwesome使い方まとめ
最後にもう一度、主な使用方法をまとめておきます。
<!-- FontAwesomeを読み込む --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <!-- アイコンをセットする --> <i class="fa fa-cart"></i> <!-- アイコンを大きくする --> <i class="fa fa-cart fa-3x"></i> <!-- アイコンを回転させる --> <i class="fa fa-gear fa-spin"></i>