ブログの更新日時や、更新者の左横にヒョコッと置かれているアイコン。
今まで、イラレ（Illustrator）で作って画像化してなんて、やってましたけど「アイコンフォント」を使えば サクッと実装できて、サイズの変更や色の変更も簡単にできて、とっても 便利なので紹介させていただきます。

肝心の 実装方法は、下記サイトを参考にさせていただきました。
とってもわかりやすい…！

参考サイト

• Retinaでもボケない「シンボルアイコン」を使いこなそう！
  LIGさんのブログはどれも良記事だと思います
  

参考サイトに詳しい方法は、掲載しているので、僕はザクっと解説していこうと思います（笑

まず、アイコンフォントとは

今回説明する「アイコンフォント」は、従来、画像を使ってアイコンを設置していたものを、フォントファイルに、アイコンを登録することによって表記することを 言います。

アイコンフォントのメリット

• モダンブラウザ（IE6や7）でも使おうと思えば使える
• 拡大・縮小をしても見にくくならない
  （画像だったらガビガビになったりします）
• cssを使って、色の変更やサイズの大きさを簡単に変えられる

などが挙げられます。
逆にデメリットはというと、“ 単色のみ ” なのと、
実装にいくまでの “ 難しそうな先入観 ” でしょうか。

実装方法

今回は参考にしたサイトにも掲載されていました、
icomoon を使いました。

サイトのヘッダー部分をクリックするとアイコン一覧の画面に変わります。

1. 使いたいアイコンを選ぶ

サイトの形態によって使いたいものが変わると思うので、使いたいアイコンをクリックして選んでいきましょう。

選ばれたアイコンはオレンジの枠線で囲まれます。

使いたいアイコンが決まれば、一番下にある、“ Images ” か “ Font ” のいずれかを選びます。
画像やSVGデータとしてだけ欲しい場合は “ Images ”を、アイコンフォントのデータとして欲しい場合は “ Font ”を選びましょう。

2. ダウンロードする

今回 は、「アイコンフォント」として使いたいので “ Font ” を選びました。
選びますと、使用するアイコンの一覧が表示されます。
良ければ、“ Download ”ボタンを押してダウンロードしましょう。

3. 「アイコンフォント」を使ってみる

ダウンロードした「アイコンフォント」を使いたい場合は、フォルダの中にある、“ index.html ” を参考にしながら、実装していきましょう。

実装例 )

《 “ data-icon ” で表記する場合 》

鉛筆のアイコン

<p aria-hidden="true" data-icon="&#x61;"> 鉛筆のアイコン</p>

《 “ class ” で表記する場合 》

ハートのアイコン

<p aria-hidden="true" class="icon-heart"> ハートのアイコン</p>

※ ie6や7に対応したい場合

<!--[if lte IE 7]><script src="<?php echo get_template_directory_uri(); ?>/fonts/lte-ie7.js"></script><![endif]-->

＜head＞部分に上記コードを挿入しましょう。

他にも…

今回は触れていませんが、自分で作ったアイコンファイルなども登録することができるようです。

• 無料で出来る！オリジナルアイコンフォントを作ってみよう
  こちらもLIGさんの記事ですが、決してステマではありませんっっ

まとめ

スマホ案件や、CSSフレームワークを使うときにこういった知識は役立つと思います。
なにより自分が魅力的に思えたのは、色の変更や複数の大きさの違うアイコンがあっても、ファイルがかさばらずにすむことでしょうか。