アイコンフォント「Font Awesome」を活用して制作を効率化しよう!
- 2014/07/25
- 鈴木潤一
こんにちは。すーさんです。
今日は、普段よく使うアイコンが439個もパッケージされたウェブフォント「Font Awesome」のご紹介。
アイコンはベクターデータなので、サイズの指定も自由自在、色やアニメーションなどCSSでの装飾も簡単にできて非常に使いやすいです。
ではさっそく使っていきましょう。
1.準備
上記サイトからファイルをダウンロードすることも出来ますが、今回はCDNを利用します
1 |
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" /> |
まずはhead内にこちらを追記して準備OKです。
2.使いたいアイコンをサイトからチョイス!
こちらのページから使いたいアイコンを選んで
HTMLをコピー
3.アイコンを入れたい場所にHTMLを追記
あとはアイコンを表示したい場所にペーストするだけです。超絶手軽ですね!
検索
1 |
<p><i class="fa fa-search"></i> 検索</p> |
コメント
1 |
<i class="fa fa-comment"></i></i> コメント</p> |
メール
1 |
<p><i class="fa fa-envelope-o"></i> メール</p> |
フォントなので色の変更も簡単にできます
1 |
<p><i class="fa fa-star fa-3x" style="color: #fc0"></i></p> |
オプション
これだけでも相当便利ですが、さらに色々なオプションを用意してくれています。
サイズ変更
1 |
<i class="fa fa-thumbs-o-up fa-lg"> |
1 |
<i class="fa fa-thumbs-o-up fa-3x"></i> |
1 |
<i class="fa fa-thumbs-o-up fa-5x"></i> |
ボーダー枠
1 |
<p><i class="fa fa-heart-o fa-border fa-3x"></i></p> |
回転
1 |
<i class="fa fa-spinner fa-spin"></i> |
1 |
<i class="fa fa-refresh fa-spin"></i> |
1 |
<i class="fa fa-cog fa-spin"></i> |
などなど、その他のオプションは公式サイトで確認できます
まとめ
すぐに実感できるメリットとしては、解像度やサイズを気にせずにこれだけのクオリティのアイコンを自由に使えることでしょう。またデメリットとしては、あくまでフォントなので、複数色の指定が出来ないところでしょうか。
なにはともあれ、導入はすごく簡単なので機会があったらぜひ一度試してみてください。