ウェブのあれこれ
ウェブを活用したいひとのためのブログ
よく使われるアイコン画像をWEBフォントで!便利なCSS「Fontawesome」
2015/05/20 HTML/CSS

よく使われるアイコン画像をWEBフォントで!便利なCSS「Fontawesome」

WEBデザインではナビゲーションやリンクなど各所にアイコンをよく使いますよね。でもいちいち画像を準備するのは面倒・・・。レスポンシブでフォントサイズが変わったりすると面合わせがずれる・・・。そんな時には「Fontawesome」

アイコン数なんど519種類!簡単に使えるアイコンライブラリ

Font Awesome」はよく利用されるアイコン500種類近くをWEBフォントとして簡単に扱えるCSSのライブラリです。
ちなみに利用できるアイコンの一覧はこちら。いっぱいありすぎて目的のアイコンを探すのに苦労しそうな量です・・・。

ダウンロードしてCSSを読み込ませるだけで使える!

使い方はいたって簡単で、http://fortawesome.github.io/Font-Awesome/にページにアクセスして「Download」ボタンを押してダウンロード。

ダウンロードしたzipファイルを解凍して中に入っている「css」と「fonts」を設置するだけ。

<link rel="stylesheet" href="/css/font-awesome.min.css">

あとは設置したCSSを読み込むだけ!
これですぐに500種類ものアイコンを使えるようになります!

クラスを指定するだけで簡単実装

使い方は簡単で、アイコンを表示したい箇所に以下のようなタグとクラスを指定するだけ!

<span class="fa fa-camera-retro"></span>

たったこれだけ。サイズやアニメーション、回転や重ねて表示など使い方は様々!
詳しい使い方はこちら

WEBアプリを作るときはとても重宝する素敵ライブラリ

WEBサイトではあまりないかもしれませんが、WEBアプリをつっくる時なんかはナビゲーションのアイコンやユーザマーク、ゴミ箱、×ボタン、保存ボタン等々・・・・いろんなところにアイコンをつかいますよね。

Font Awesome」はかなりの種類のアイコンをカバーしているので、これひとつ入れておけばアイコンに悩むことはなくなるかも!?

Provided by Revolme inc.
revolme.co.jp