アイコンフォント

Webフォントは、Webサーバー上に置かれたフォントファイルをダウンロードして表示するCSS3の機能です。

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

• フォントなのでテキストとのベースラインが合わせやすい。
• 大きさや色はCSSでコントロールできる
• ベクターデータなので拡大しても劣化がない

アイコンフォントを利用できるサイト

Font Awesome

Font Awesome, the iconic font and CSS toolkit

IcoMoon App

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

Genericons

Genericons - a free, GPL, flexible icon font for blogs!

Foundation Icon Fonts 3

Foundation Icon Fonts 3 | Playground from ZURB

Font Awesomeを使ってみる

Font AwesomeのCDNページ

Font Awesome · BootstrapCDN by MaxCDN

以下をHTMLに張り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

CDNを使用する時はバージョンに注意しましょう。新しいアイコンを使用した時に、ここが古いバージョンのままだと表示できません。

アイコンの選択

メニュー「Icons」の「Directional Icons」の中から”arrow-up”を選択してみます。

HTMLへ貼り付け

この記述を利用したいところに張り付けます。

<i class="fa fa-arrow-up" aria-hidden="true"></i> 

フォントサイズと色を変える

<p style="font-size:24px; color:#FFF;"><i class="fa fa-arrow-up" aria-hidden="true"></i></p>

回転させる

90度回転　<i class="fa fa-arrow-up fa-rotate-90" aria-hidden="true"></i>

180度回転　<i class="fa fa-arrow-up fa-rotate-180" aria-hidden="true"></i>

270度回転　<i class="fa fa-arrow-up fa-rotate-270" aria-hidden="true"></i>

 その他、アニメーションやアイコンの重ね合わせなどができます。

Font Awesome Examples