使い方

使い方は超簡単。まずはCDNでfont-awesome.cssを読み込みます。

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

あとはお好きなところにタグを埋め込むだけです。例えば「Twitterアイコンが欲しいぜ!」という方は以下のタグをHTMLに書きます。

<i class="fa fa-twitter"></i>

大きくしたかったら、fa-#xを加えます。

<i class="fa fa-twitter fa-4x"></i>

大きさはCSSのfont-sizeでも変えられます。

<i class="fa fa-twitter" style="font-size: 100px;"></i>

色も簡単に変えられます。

<i class="fa fa-twitter" style="font-size: 100px; color: orange;"></i>

素晴らしいですね!まさにAwesomeです!

アイコンの種類は以下にまとまっているので、その中から好きなモノを選びましょう。

使えるアイコンの一覧

また、使い方の例は以下に書いてあるので、一度目を通すことをオススメします。

Font Awesomeの使い方

まとめ

アイコンフォントには他にも色々な種類があるようです。以下の記事でいくつかまとめられていたので、そちらも見てみて下さい。

Web制作で使えそうなアイコンフォント

CATEGORIES