2013年06月26日

Font Awesome 文字のアイコン

Font Awesomeとは


http://fortawesome.github.io/Font-Awesome/icons/
ここに表示されているアイコンを画像ではなく文字で表現が可能になるプラグイン?です。

環境


Rails 3.0.19

使用方法


http://fortawesome.github.io/Font-Awesome/
ここより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


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が必要

タグの設置


$ vi app/view/hoge/index.html.erb

<i class="icon-zoom-in"></i>


これだけでアイコンが表示されます。
他にどんな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;
}

こんなかんじでマウスオーバーで拡大切替
posted by RicK at 12:14| Comment(0) | TrackBack(0) | 日記
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/70045290

この記事へのトラックバック