Rails 3.1 button Icon with css - ruby-on-rails

Question

How can I add an icon to a rails button with css?
My request is both for <% button_to %> and <% f.submit %>
Thanks for helping
Hello #jdc I've finally found the trick, I did not use your method, but it was helpul to find my way.Thanks a lot man.So thi is How i proceed :
1°) Change the html.erb code from :
<%= f.submit %>
to
<%= f.submit , :id => 'button' do -%>
<% end %>
2°) In the app/assets/stylesheets and put the following css code:
#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 */
}
Of course #button at the top of the css code is the :id name in <%= f.submit , :id => 'button' do -%> code in the html.erb file
I hope this will help you guys to style css button on rails 3 applications.

Answer 1

If I understand what you're asking, you could try something like this:
<% f.submit :html => { :class => 'imgbutton' } %>
then in your css:
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 */
Might not work for some really ancient browsers to do it with CSS though.