ウェブフォントアイコンを使えば、いちいち画像ファイルを用意しなくても、おしゃれなアイコンを表示させることができます。

ウェブフォントアイコンを使うには、アイコンファイルを公開フォルダに設置して利用しますが、ウェブのヘッダー部分にリンクを貼るだけで使えてしまうものもあります。

今回はリンクを貼るだけで簡単に使えてしまう Font Awesome を紹介します。

Font Awesomeを使う準備

アイコンの選択方法

Font Awesome（http://fortawesome.github.io/Font-Awesome/） のページから使いたいアイコンを探します。

ホームページのメニューの Icons をクリックします。

アイコンが一覧になっているので、使いたいアイコンをクリックします。

アイコンページが表示され、下の方にHTMLが表示されています。

これをファイルに貼り付ければアイコンが表示されます。

色・大きさなどの変更

上記の iタグ を spanタグ などで囲みます。囲んだタグのクラス名を sample とします。
あとは CSS で sample に効果を与えればフォントの色・大きさなどが変わります。

リンクを貼るだけで使えて、フォントと同じようにスタイルシートで装飾するだけです。

一度使うと手放せなくなります。