みなさんこんにちは、masa です。今日は CSS でアイコンを表現する Font Awesome (フォントオーサム) の使い方を紹介したいと思います。画像を使わないので、スマートフォン向けにも導入しやすいと思います。
ローカルで使う場合は上記公式サイトの Download から落として解凍してください。
サーバー上ですぐに使う場合は以下コマンドを実行して /css などお使いのディレクトリにファイルを入れてください。バージョンは新しくなっているかもしれないので、適宜バージョンの番号は変えてください。
# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip # unzip font-awesome-4.3.0.zip
fonts ディレクトリと css ファイルだけをドキュメントルートにコピーしてください。以下のような構成になっていれば問題ありません。
/var/www/html/fonts /var/www/html/css/font-awesome.css /var/www/html/css/font-awesome.min.css //minファイルが不要であれば消してください
次は html ファイルの head タグで以下のようにしてください。
<head> <link rel="stylesheet" type="text/css" href="css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"> //不要なら消し(ry </head>
これでアイコンフォントを使えるようになりました。早速使ってみましょう。基本的な使い方は タグの中の class に使いたいアイコンを書きます。
<i class="fa fa-twitter fa-lg"></i></a> // fa は fontawesome のクラスを表す必須記述 // fa-twitter はアイコン名 ここに使いたいアイコン名を入れて使う // fa-lg はアイコンのサイズ指定 サイズは以下の中から指定可能 なし ：100% fa-lg : 133% fa-2x : 200% fa-3x : 300% fa-4x : 400% fa-5x : 500%
上記サンプルだとこのようにツイッターのアイコンが出ました。
その他のアイコンについては公式サイトのアイコン一覧を見て、指定してくださいね。
いかがでしたか？今日は画像を使わずにアイコンを導入できる Font Awesome の使い方をご紹介しました。2015年6月現在で 519個 のアイコンが使えます。アイコンフォントを提供しているサービスは他にもあるのですが、今のところ一番数が多いのはこの Font Awesome だと思います。みなさんも簡単に使えるアイコンフォントでサイトを飾ってみてくださいね。
[…] アイコンの大きさ等についてはこちらの記事を参考にしました。 […]