Adding an icon to simple_form submit button in Rails

Question

I would like to replace the text for the simple_form submit button using rails with an icon.

This is what I have so far:

<div class="small-3 columns">
  <%= f.submit class: 'button postfix' do %><i class="fa fa-paper-plane"></i><% end %>
</div>

this usually works with link_to helpers but it does not seem to be working for the form helpers used by the rails gem simple_form.

Answer 1

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>

Answer 2

<%= f.button '', {class: 'button postfix'} do %><i class="fa fa-paper-plane"></i><% end %>

Answer 3

You can pass a block with custom html by using :button type for button input type. Simple form is a wrapper for rails helpers, it uses rails's FormBuilder API and the FormBuilder uses rails's button_tag API . The following example uses Slim as template language:

= f.button :button do
  i.fa.fa-check

Answer 4

It can be done by removing the submit button content and adding an icon to it.

HTML

  <button type="submit"><i class="icon"></i></button>

CSS

button{ border:0; background:none;}
.icon{//style to add icon}