CREATOR BLOG

アイコンフォント「Font Awesome」を活用して制作を効率化しよう!

2014/07/25
鈴木潤一
  • このエントリーをはてなブックマークに追加

こんにちは。すーさんです。

今日は、普段よく使うアイコンが439個もパッケージされたウェブフォント「Font Awesome」のご紹介。

アイコンはベクターデータなので、サイズの指定も自由自在、色やアニメーションなどCSSでの装飾も簡単にできて非常に使いやすいです。

Font_Awesome__the_iconic_font_and_CSS_toolkit

Font Awesome

ではさっそく使っていきましょう。

1.準備

上記サイトからファイルをダウンロードすることも出来ますが、今回はCDNを利用します

まずはhead内にこちらを追記して準備OKです。

2.使いたいアイコンをサイトからチョイス!

Font_Awesome_Icons

こちらのページから使いたいアイコンを選んで

fa-star__Font_Awesome_Icons

HTMLをコピー

3.アイコンを入れたい場所にHTMLを追記

あとはアイコンを表示したい場所にペーストするだけです。超絶手軽ですね!

検索

コメント

メール

フォントなので色の変更も簡単にできます

オプション

これだけでも相当便利ですが、さらに色々なオプションを用意してくれています。

サイズ変更






ボーダー枠

回転






などなど、その他のオプションは公式サイトで確認できます

まとめ

すぐに実感できるメリットとしては、解像度やサイズを気にせずにこれだけのクオリティのアイコンを自由に使えることでしょう。またデメリットとしては、あくまでフォントなので、複数色の指定が出来ないところでしょうか。
なにはともあれ、導入はすごく簡単なので機会があったらぜひ一度試してみてください。

Font Awesome

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive