how to put icon in rails submit button

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?

This is a client-side problem solved via CSS. Please show your client-side code, not your Rails code. — Diodeus - James MacFarlane, Oct 31 '12 at 21:24
i am specifically asking if there is a way to do this with rails/erb. i want the generated html to include the icon in the button text, not using css or additional images — Austin, Oct 31 '12 at 21:32
I'm no Rails expert, but that HTML should generate an icon if Bootstrap is included properly. Looks like a Rails issue. — Sara, Oct 31 '12 at 21:32
See [this related answer](http://stackoverflow.com/a/12078262/1684247). — Sara, Oct 31 '12 at 21:41

score 59 · Accepted Answer · edited May 23 '17 at 11:47

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?

I don't like this solution because it doesn't make use of the f variable... though the result is probably the same. — Cyril Duchon-Doris, Nov 11 '14 at 23:58

score 2 · Answer 2 · answered May 05 '22 at 15:54

2

The correct answer (making use of Rails' f variable) is:

<%= f.button nil, class: "button_green" do %>
    Submit for Approval <i class="icon-share-alt icon-white"></i>
<% end %>

answered May 05 '22 at 15:54

TomDogg

3,803
5
33
60

Both this and the accepted answer are correct. It's a matter whether you instantiate your form with or without a block: `<%= form_with model: @post do |form| %>` vs `<%= form_with(model: @post, url: super_posts_path) %>` – Frank Koehl Sep 16 '22 at 15:05

score -1 · Answer 3 · answered Oct 31 '12 at 21:40

-1

.button_green {
   background-image:url(...your image path...);
   background-repeat:no-repeat;
   padding-left:30px;
}

You may need to adjust the padding to match the size of the icon.

answered Oct 31 '12 at 21:40

Diodeus - James MacFarlane

112,730
33
157
176

how to put icon in rails submit button

3 Answers3