web fonts「Font Awesome」でアイコンを表示する

Font Awesomeはweb fontsの機能を使う事によって
様々な形のアイコンを表示することができます。

・Font Awesomeの導入
下記サイトがFont Awesomeです。
http://fontawesome.io/
awesome1

head内にコードを指定します。

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

これで使う準備ができました。

・次にFont Awesomeの使い方

下記URLでアイコンの一覧が見れるので
まず、使いたいアイコンを探してみましょう。

トラックのアイコンが欲しいのでこちらを選んでみました。
awesome3
http://fontawesome.io/icon/truck/

「fa-truck」という部分がこのアイコンを指定する名前となります。

表示したい箇所にコードをコピペすることで使うことができます。

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

フォントなのでサイズや色の変更もすることができます。

.fa.fa-truck.fa-6 {
    color: #ff0202;
}

cssで色を赤に変えてみました。

awesome4

この様にフォントだけでアイコンを表示する事ができるので
ちょっとだけナビゲーション等にアイコンが欲しいな、という時など活躍できそうです。