アイコンを使用する¶

Redmine にはプロジェクトメニューや新規作成、編集といったリンクでアイコンが使われています。プラグインを作る場合でもこういったアイコンを使いたい場合がよくあります。それらのアイコンを使う方法を紹介します。

例えばの [編集] のリンクでは次のように記述されています。( app/views/issues/show.rhtml )

1link_to l(:button_edit), {:controller => 'queries', :action => 'edit', :id => @query}, :class => 'icon icon-edit'

これをみるとアイコンを使う場合、 Redmine では、使いやすいようにアイコン画像を直接指定するのではなく、 CSS のクラスでアイコンを指定し、そのクラスを指定しています。
また、'icon icon-edit' と 2 つのクラスが指定されていますが、クラスは複数指定しているとその定義全部が適用されます。これを使って icon クラスでアイコンを使う場合の基本的なスタイルを定義し、 icon-xxx で個別のアイコン画像を background-image を使って指定しています。
このクラス定義は Redmine のデフォルトの CSS である public/stylesheets/application.css で定義されています。

1.icon {
2background-position: 0% 50%;
3background-repeat: no-repeat;
4padding-left: 20px;
5padding-top: 2px;
6padding-bottom: 3px;
7}
8.icon-edit { background-image: url(../images/edit.png); }

1. public/images で使いたいアイコンを探す
2. public/stylesheets/application.css でそのアイコンがどのようなクラス名で定義されている調べる
3. 使用したいタグのクラスに 'icon 見つかったクラス名 ' とつける

ちなみに Redmine の本体ではアイコンだけでいい場合、 image_tag などを使っているところもあるのですが、プラグインだとなぜか失敗したので、クラスで指定した方がいいと思います。