Font Awesomeとは

通常Webブラウザは端末にインストールされているフォントを呼び出して文字を表示します。ですが、端末にインストールされていないフォントが指定されていた場合、意図されていた通りにページを表示することができません。そこで登場したのがWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにしたWebフォントと呼ばれる技術です。Webフォントで表示できるのは文字だけではなく、アイコンをフォントとして使用することも可能です。Webアイコンフォントはフォントとして使用できるので大きさや色の変更が簡単にできます。代表的なWebアイコンフォントにFont Awesomeがあり、今回試しに使ってみました。

使い方

Font Awesomeの使い方には、必要なファイルをダウンロードして使用する方法とCDN(Contents Delivery Network)を利用する方法があります。

今回はCDNを利用して使ってみます。headタグの中に以下の記述をすればOKです。

<link href="http:</span>//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css>

続けてbody要素の中身です。HTML５のマークを表示してみます。

スタイルシートでプロパティ設定を行えば、大きさ、色の変更ができます。

アイコンの種類はFont Awesomeから参照できます。

すでにたくさんのアイコンが用意されていますが、これからまだ増えていきそうです。

大きさ、色の変更ができました。

他の要素と組み合わせたり、アニメーションをつけたりすれば様々な場面で使用することができそうです。