Font Awesomeで簡単にアイコンをデザインに組み込もう【フラットデザインに最適】

Font Awesome

フラットデザイン作成時に役立つ「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>

の部分がそのままアイコン表示になります。

これを使用すれば個別に画像を作成することもなく、様々な用途で簡単にアイコンを利用できますのでオススメです。


コメントを残す

メールアドレスが公開されることはありません。