MikeHolford MikeHolford - 2 months ago 13x
Ruby Question

Replace submit button with glyphicon in rails

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>


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?


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!


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