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

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

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

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

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

・次にFont Awesomeの使い方

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

http://fontawesome.io/icons/

トラックのアイコンが欲しいのでこちらを選んでみました。

http://fontawesome.io/icon/truck/

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

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

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

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

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