Question

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?

Answer 1

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?