アイコンがもっと便利に簡単にFontAwesome

FontAwesomeとは？

今日はホームページ作成でアイコンを扱う際に便利なWebフォントのご紹介です。
Webフォントと言えばGoogleFont等、従来の「MS Pゴシック」「ヒラギノ」等の定番に加えてホームページに使えるフォントの制限が減りました。
ホームページは文字を読んでもらうものが目的ですので、フォントの変更でサイトの特色が表しやすくなっています。

そこで今日は文字ではなく、文字の左側でよく見かけるアイコンも「FontAwesome」で出してしまいましょう。
フォントなのでサイズ・色の調整がCSSでできることと、画像としてスライスする手間が省けるのでとても便利ですよ！

ファイルの用意

1. まずはFontAwesomeを使うに当たって必要なファイルを用意します。http://fortawesome.github.io/Font-Awesome/上記のページの「Download」を押してファイルをダウンロード後、解凍してください。
   
2. 解凍したフォルダの中から「css」「font」フォルダの2つを自分のサイトのフォルダに入れてください。

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

   と適用したいHTMLに記述してください。
   ※hrefは自分のフォルダの中身に合わせて書き換えてください。
   これで下準備完了です。

4. 次にhttp://fontawesome.io/cheatsheet/のアイコン一覧から使いたいものを選びます。
   今回はこの矢印を表示してみます。
5. 使いたいアイコンが決まったらアイコン右の「fa」から始まるアイコン名をドラッグし、コピー（CTRL＋C）してください。こちらはspanタグのクラス名になります。
   
6. 次にHTMLのソースコードに移り、以下のようなコードを書いてください。spanが入っている以外は一般的な<p>タグですね

   <p><span class=""></span>これは見出しです</p>

   では、先ほどコピーしたクラス名を<span>の間に貼り付けてください。

   <p><span class="fa-arrow-circle-right"></span>これは見出しです</p>
   

   spanにクラス名を付ければHTMLでの作業は終了です。

7. CSSを設定しましょう。
   先ぼど<span>の中にアイコンをコピーしたので以下のようなソースコードを書きます。

   p span {
      font-family: 'fontawesome';
   }

8. どうでしょう。表示されましたか？これは見出しです

   先ほどの四角が選んだアイコンに変わりました。
   画像のように見えますがアイコンですので、あとはCSSでフォントサイズや色を指定すると簡単に思った通りのアイコンが作成できるはずです。

一覧にあるアイコンは全て上記の使い方で表示できるので、いろんな場面で活用してください。