フラットデザイン作成時に役立つ「Font Awesome」！
Font Awesomeとは、よく使うアイコンをwebフォントとして使用できるようにしたものです。
cssで制御できるために大きさや色を簡単に変更できますし、個別にアイコン画像を用意する必要がないため非常に便利です。
Font Awesomeの使い方
Font Awesome を利用方法は、ファイルをダウンロードして利用する方法と、 CDN を利用する方法の2つです。
Font AwesomeをCDN で利用する方法
htmlのheadの中に下記のソースを入れるだけで利用できるようになります。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
Font Awesomeをダウンロードして利用する方法
Font Awesomeのページよりファイルをダウンロードして利用します。
一般的なwebフォントの使い方と同じです。
Font Awesomeでアイコンを表示する方法
Font Awesomeはcssで制御します。
まず使用したいアイコンを「アイコンページ」より探します。
アイコン詳細ページに記載してあるタグをコピペするだけで使用できます。
<i class="fa fa-thumbs-up"></i> fa-thumbs-up
のコードだと
fa-thumbs-up
と表示されます。
<i class="fa fa-thumbs-up"></i>
の部分がそのままアイコン表示になります。
これを使用すれば個別に画像を作成することもなく、様々な用途で簡単にアイコンを利用できますのでオススメです。
