概要
アイコンフォントを利用すると、画像などを用意せずに色々なアイコンを表示することができる。
ここでは「[Font Awesome] (http://fortawesome.github.io/Font-Awesome/)」というアイコンをフォントを利用する手順を説明します。
アイコンフォント用CSSを読み込む
アイコンフォントを利用するHTMLに下記の通りCSSを読み込むコードを追加する。
アイコンフォント用CSSを読み込む
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">
これだけでアイコンフォントが利用することができるようになります。
アイコンフォントを表示する
アイコンを表示したい箇所に以下のコードを追加します。
今回は例として、フォルダ（開）のアイコンを表示します。
フォルダ（開）アイコンを表示する
<i class="fa fa-folder-open"></i>
指定するクラス名一覧はここのページから確認できます。