Replace submit button with glyphicon in rails

Question

Quick question. I have:

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

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

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

symbol.

What will be the correct path in the rails to replace the submit button with a thumb icon, but do the same?

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 it still shows the button behind the glyphicon (even if I delete btn btn-primary). Does anyone know how to get rid of a button?

Thanks!

Answer 1

Sorry, I didn’t understand at first. To avoid the button, you actually have several ways:

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

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

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

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

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

Prior to rails 3, you can use the link_to_function or link_to_remote helpers to call the js function, but since rails 4 this is not possible. See also the Rails 3 submit form with a link , and here is Rails, how do you submit a form with a text link?

hope this helps

Answer 2

I found that this works for submitting my form using a button containing only a glyphicon:

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

The glyphicon class is a flag instead of thumbs up, and the bootstrap btn default style is primary instead, but it should do the same.

Answer 3

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

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