Font Awesome 文字のアイコン

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

rick No29です。
今回は、Font Awesomeという画像ではなく文字でアイコンが表示できるものをご紹介

環境

Rails 3

使用方法

ここよりDownload
とりあえずHomeディレクトリに解凍し、cssとfontだけを抜き出します。
$ cd Rails.root/public/stylesheets
$ mkdir font_awesome
$ cp -r ~/font-awesome/css Rails.root/public/stylesheets/font_awesome
$ cp -r ~/font-awesome/font Rails.root/public/stylesheets/font_awesome

viewにてcssを読み込み
$ vi app/view/hoge/index.html.erb
<%= stylesheet_link_tag ‘./font_awesome/css/font-awesome.css’ %>
<%= stylesheet_link_tag ‘./font_awesome/css/font-awesome-ie7.css’ %>
IE7でも正常に表示させたい場合は2段目のfont-awesome-ie7.cssが必要

viewにてタグの設置
$ vi app/view/hoge/index.html.erb

これだけでアイコンが表示されます。
他にどんなclassでどんなアイコンが表示されるかは、サイトを御覧ください。

サイズ変更

cssでfont-size:25px;とすると、アイコンのサイズが変更されます。（アイコンは画像でなく文字）

色変更

文字なのでcssのcolorで色も自由自在

マウスオーバー

a.zoom {
color: #222222;
text-decoration: none;
}
a.zoom :hover {
font-size: 25px;
color: #222222;
text-decoration: none;
}