how to put icon in rails submit button

css, forms, ruby-on-rails-3, twitter-bootstrap

Solution

You can do this by using the button_tag instead:

<%= button_tag( :class => "button_green") do %>
  Submit for Approval <i class="icon-share-alt icon-white"></i>
<% end %>

This will create a `<button type="submit"></button>` element with the icon and wordage inside. I've tested and it works. The default action for `button_tag` is to submit, so if you need a different action (like cancel for example), you can use the `:type => "button"` option to override the default submit behavior.

Edit: For Bootstrap 3, the icon class names have changed, so you would put

<span class="glyphicon-white glyphicon-share-alt white"></span>

Notice, there is no longer a special class for white icons. Just make a css class `.white` and put `color: #fff;`. Simple. You can use any color or text style you like, since the icons are now a font.

Related Question: Add Icon to Submit Button in Twitter Bootstrap 2, and How do I change Bootstrap 3's glyphicons to white?

Problem

I am using Bootstrap and want to put an icon in the submit button for a form. here is the code: ``` <%= f.submit "Submit for Approval <i class='icon-share-alt icon-white'></i>", class: "button_green" %> ``` Generated HTML: ``` <input type="submit" value="Submit for Approval &lt;i class='icon-share-alt icon-white'&gt;&lt;/i&gt;" name="commit" class="button_green"> ``` I tried adding both raw and html_safe to the text but neither one seemed to work. I know one solution would be to have the class be an image with the icon in it already but I would like to do this without creating additional images/css. any suggestions?

Original source

Related problems