Awesomeの使い方-Webサイトでアイコンを表示したいとき、通常は画像を用意して表示させることが多いと思います。Awesomeというフォントセットを利用した方法を紹介します。WebフォントアイコンについてWebフォントアイコンとは、CSS3の機能にあるWebフォントを利用して画像ではなくテキストとして表示させるアイコンのことです。Webフォントアイコンはテキストなので、拡大・縮小もきれいに表示され、スタイルシートで色も簡単に制御できるなどのメリットがあります。サイズや色の変更といったときも、いちいち画像編集ソフト等を使って作り変える手間も省けます。Awesomeを利用する方法は、フォントファイルをダウンロードして自身のサーバーに設置して使うか、またはCDNサーバーを使用して表示させる方法があります。Awesomeのサイトからファイル一式をダウンロードします。ファイルを解凍したら、いろいろなファイルが現れますが、特に理由がなければそのままのファイル構成でサーバーにアップしましょう。したら、「font-awesome.min.css」をhead内で読み込ませます。これでWebフォントアイコンを使うことができます。AwesomeはCDNサーバー上にあるフォントを読み込ませて使うこともできます。head内にlink要素を追加するだけで使用することができるので、とても簡単に利用できます。href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">実際にフォントを表示させるためには、それぞれのアイコンに用意されたclassを割り当てることで表示できます。自分のサーバーに設置する場合でもCDNサーバーを利用する場合でも同じです。ホームアイコンを表示させたい場合は以下のような記述をします。Awesomeのアイコンは、重ねて表示することも可能です。アイコンを重ねたい場合は「class=”fa-stack”」というクラスを付与した要素の中に重ねたいアイコンを記述します。重なり順は指定した順番で表示されていくので、後に指定したアイコンが上になって表示されます。「fa-stack-1x」というクラスをつけると通常サイズとなり、「fa-stack-2x」というクラスをつけると一回り大きいサイズで表示されます。Awesomeのアイコンを背景画像として表示させたい場合は、Unicodeを使って表示させます。"¥f15c";}まず、フォントファミリーで「FontAwesome」と指定し、contentプロパティに表示させたいアイコンのUnicodeを指定します。このとき、先頭に¥マークを付け忘れないようにしてください。要素の前につけたい場合は「:before」、要素の後ろにつけたい場合は「:after」といった疑似要素を使います。Unicodeは各アイコンの詳細ページに載っています。このような感じでWebフォントアイコンを表示させることができます。他にもたくさんフォントが用意されているのでアイコン一覧から使えそうなアイコンを探してみてください。