cssのRails 3.1ボタンアイコン

Question

cssを使用してアイコンをレールボタンに追加するにはどうすればよいですか？

私の要求があり、両方>と<%のf.submit％の私は最終的にトリックを発見した@jdc、私がやった

こんにちはを支援するための>

おかげ％button_to <%用あなたのメソッドを使用しますが、それは私のway.Thanksたくさんman.Soティを見つけることhelpulだった私が進める方法ではありません。

1°）からhtml.erbコードを変更します。

<%= f.submit %> 

アプリ/資産/スタイルシートで

<%= f.submit , :id => 'button' do -%> 
<% end %> 

2°）へと、次のCSSコード置く：

#button { 
background-image: url(plus_8x8.png); 
background-repeat:no-repeat; 
display:block; 
float:left; 
margin:0 7px 0 0; 
background-color:#f5f5f5; 
border:1px solid #dedede; 
border-top:1px solid #eee; 
border-left:1px solid #eee; 

font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; 
font-size:12px; 
line-height:130%; 
text-decoration:none; 
font-weight:bold; 
color:#565656; 
cursor:pointer; 
padding:5px 10px 6px 7px;; /* I put this here to move the text away on older IE junk */ 

を}もちろん#buttonの

でCSSコードのトップは：<%= f.submit , :id => 'button' do -%> coのid nameです。 deのhtml.erbファイル

これは、あなたがレール3のアプリケーションのCSSボタンをスタイルするのに役立つことを願っています。あなたのCSSで、その後

<% f.submit :html => { :class => 'imgbutton' } %> 

：

Answer 1

は、私はあなたがこのような何かを試みることができる、あなたが求めているものを理解していれば

background: url(someicon.gif); 
border: none; /* If your icon IS the button */ 
color: transparent; /* If you don't want the button text to show up */ 
*padding-left: 9999px; /* I put this here to move the text away on older IE junk */ 

それを行うにはいくつかの本当に古代のブラウザでは動作しない場合がありますCSSで。