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.