Font Awesome, the iconic font and CSS toolkit

このサイトでもいたるところで使っているアイコン類。Font Awesomeを利用しています。

導入方法

使い方はとても簡単。まずは下記の記述で Font Awesome を読み込みます。

[code lang=text]
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
[/code]

アイコンを導入したいところに下記のように記載します。

[code lang=text]
<i class="fa fa-hogehoge"></i>
[/code]

fa-hogehoge の部分に何を記載したらいいかは、こちらから利用したいアイコンをクリックすればわかります。

活用のヒント

Sublime Text を利用しているのであれば、

• Font Awesome – Packages – Package Control

でコードの補完ができます。 最初の読み込みについても

• Libraries from CDN

を利用すれば、補完ができます。その他のCDNも使えるのでお勧めです。

また、Alfred Appで有料版のPowerpack利用していれば、Font Awesome Workflow for Alfred 2 を利用して、アイコンを探す手間を省くこともできます。

使ってるデモはこんな感じ。 font-size やら color で手軽にサイズや色を変更できるのも嬉しいところですね