Replace submit button with glyphicon in rails

Question

Quick question. I have:

<%= f.submit "Like", class: "btn btn-large btn-primary" %>

and instead of the text reading "like" I would like to replace the whole button with the:

<span class="glyphicon glyphicon-thumb-up"></span>

symbol.

What would be the correct way in rails to replace the submit button with the thumbs up icon but have it do the same thing?

UPDATE

I found this:

<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
  <span class="glyphicon glyphicon-thumbs-up"></span> 
<% end %>

But the only problem is that this still shows the button behind the glyphicon (even if I remove btn btn-primary). Does anyone know how to get rid of the button?

Thank you!

Worked

Take a look at this: #11604804 – Photon

I spent a while looking for the answer to this question myself. Ended up just having to hard code it without form helpers. Hopefully you'll have better luck. – Barbi

The button appearance is coming from your CSS classes "btn btn-primary". You don't need those to make it beahave like a button though... – Bestial

Answer 1

Sorry i didn't understand well at first. In order to avoid the button, you actually have a couple of ways:

• applying some css to your button so that it becomes transparent, leaving just the icon visible:

  background: transparent; border: none; padding: 0;

• substitute rails submit with jquery (or similar) submit. Something like:

  <span class="glyphicon"></span>

  $('span.glyphicon').click(function(){ $('#my_form').submit()});

Until rails 3 one could use the link_to_function or link_to_remote helpers to call a js function, but since rails 4 this is not possible anymore. Take a look also Rails 3 submit form with link, and here Rails, how do you submit a form with a text link?

hope this helps

Photon

Great thanks for this! I have actually decided to go about it another way but this is great if I want to go back. ill accept the answer for others :) – Worked

Answer 2

I found this to work for submitting my form with a button containing only a glyphicon:

<%= button_tag "", type: 'submit', class: "btn btn-default glyphicon glyphicon-ok pull-right" %>

glyphicon class is a checkbox instead of thumbs up, and bootstrap btn styling is default instead of primary, but it should do the same thing.

Disavow

Answer 3

You can add following class to the button to hide button background,

    .like-page{
      background: none;
      border: none;
    }

Geryon