Adding a Submit Button Image to a Rails Form

Adding a submit button image to a Rails form

You can do it like so:

ERB:

<%= f.submit "" %>

CSS:

input[type="submit"]
{
  background:url(mybutton.png);
}

Rails: Embed an image in submit button?

You should use image_submit tag instead of f.submit

Adding an icon to simple_form submit button in Rails

Perhaps like this:

<div class="small-3 columns">
  <%= button_tag type: 'submit', class: "button postfix" do %>
      <i class="fa fa-paper-plane-o" aria-hidden="true"></i>
  <% end %>
</div>

how to put icon in rails submit button

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?

Substitute a Rails form submit button by a Bootstrap icon

As mentioned by bronislav you won't be able to submit your form without having a button. If you only want to display an image then i think in your case it'll be better to use an image of + icon and then you can use rails image_submit_tag. You can have

= f.image_submit_tag("icon.png")
# => <input alt="Login" src="/images/icon.png" type="image" />

For more information refer here

OR

You can do something like from here:

=button_tag(type: 'submit', class: "btn btn-primary") do
  %i.icon-plus-sign.icon.icon-large

rails: how to have an image for the submit tag?

Check out image_submit_tag, it is what you are looking for. It is used like image_submit_tag("login.png")

Rails: Embed an image in submit button?

You should use image_submit tag instead of f.submit

Rails verify if an image is clicked before sending the form

button_to generates an entire form tag. Try using button tags with value attributes contained within a form tag helper:

<%= form_for @article, articles_path do |f| %>
  <%= f.text_field :title %> <!-- or hidden field? -->

  <button type="submit" name="article[score]" value="1">
    <%= image_tag 'foobar.gif' %>
  </button>
<% end %>

instead of the button_to helper.

Is there a way with rails form helper to produce a button tag for submit

You could use content_tag to achieve this. It's the more railsy way of doing what you want. But it's longer than the raw HTML.

<% content_tag :button :type => :submit, :class => :positive do %>
   <%= image_tag "icons/tick.png"%>
   Save
<% end %>

Which produces

<button type="submit" class="positive">
    <img src="/images/icons/tick.png" alt="Tick"/> 
    Save
</button>

However using this as a starting point you should have no problem rolling your own robust helper, or abstracting it to a partial.

---

Related Topics