Is there a way to incorporate an icon into a Rails button using CSS?
I am looking for assistance with both <% button_to %> and <% f.submit %>
Thank you for your help
Hello @jdc, I have figured out a solution on my own. While I didn't use your method exactly, it did lead me in the right direction. Here is how I proceeded:
1°) Modify the html.erb code from:
<%= f.submit %>
to
<%= f.submit , :id => 'button' do -%>
<% end %>
2°) Go to app/assets/stylesheets and add 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; /* Added this to move the text away on older IE versions */
}
Make sure that #button
matches the ID specified in the
<%= f.submit , :id => 'button' do -%>
code in the html.erb file.
Hopefully, this will assist others in styling CSS buttons in Rails 3 applications.