How to use Twitter Bootstrap's glyphicons with Rails's button_to

Question

I have a couple buttons that submit AJAX requests.

<%= button_to 'GO!', {controller:'videos', action:'rate', id: video.hashed_id, format: 'json'}, {:remote=>true, :class=>"btn btn-default btn-sm"} %>

If I replace GO! with <span class="glyphicaon glyphicon-thumbs-up"></span> it ends up causing this value="<span class="glyphicaon glyphicon-thumbs-up"></span>"

Any ideas how I can get a glyphicon into a button that submits a form?

Update

I tried this:

<%= button_to content_tag(:i, '', class: 'icon-thumbs-up'), {controller:'videos', action:'rate', id: video.hashed_id, format: 'json'}, {:remote=>true, :class=>"btn btn-default btn-sm"} %>

which created this:

<form action="/videos/rate/asdfsxsdf/no.json" class="button_to" data-remote="true" method="post">
<div><input class="btn btn-default btn-sm" type="submit" value="<i class="icon-thumbs-up"></i>" />
<input name="authenticity_token" type="hidden" value="es4wPqFr9xPBUFsbHQR/gAzofDC+ZwYsiiJ7RAQZUHk=" />
</div></form>

Answer 1

This isn't super sexy, but it works!!

<%= form_tag({controller:'videos', action:'rate', id: video.hashed_id, yesno:'no', format: 'json'}, {remote:true} ) do %>
<%= button_tag '', :class=>"rate-btn yes-btn btn btn-default btn-lg glyphicon glyphicon-thumbs-down" %>
<% end %>

Basically (as mentioned in the comments above), the issue is that the syntax used by glyphicon can't be used on self-closing elements like <input /> so you need a button. Unfortunately Rails's button_to also generates an <input /> (inside of a form). You could write the form by hand with a but you'll run into problems with Rails's built-in forgery prevention system (you need an authenticity token). So instead, I combine the form_tag and the button_tag with corresponding classes and we're good to go.

Answer 2

With Rails 3/4 and bootstrap this works:

              <%= button_to "/hubspot/new_campaign?id=tab1-2", :class=>"btn btn-default btn-icon glyphicons
              message_plus", :remote => true do %>
                  <i></i>Create New Campaign
              <% end %>

Answer 3

Try this:

<%= button_to content_tag(:i, '', class: 'icon-thumbs-up'), {controller:'videos', action:'rate', id: video.hashed_id, format: 'json'}, {:remote=>true, :class=>"btn btn-default btn-sm"} %>

Answer 4

I think .html_safe can solve your problem. I would try replacing 'GO!' with:

'<span class="glyphicon glyphicon-thumbs-up"></span>'.html_safe

OR if you still wanted text

'<span class="glyphicon glyphicon-thumbs-up"></span> GO!'.html_safe

Using Bootstrap 3

According to the Bootstrap 3 documentation for glyphicons, a large button with a Star glyphicon on the left and the text Star to the right o can be achieved using the following HTML:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

With button_tag in Rails, this is how you would create that same button:

<%= button_tag '<span class="glyphicon glyphicon-star"></span> Star'.html_safe , :class=>"btn btn-default btn-lg" %>

Similarly, if you wanted the icon after the text, it would be like this:

<%= button_tag 'Star <span class="glyphicon glyphicon-star"></span>'.html_safe , :class=>"btn btn-default btn-lg" %>

NB: Don't forget the space between the closing span tag and the text of the button.

Using Bootstrap 2

According to the Bootstrap 2 documentation for glyphicons, a large Star button with the text Star to the right can be achieved using the following HTML:

<a class="btn btn-large" href="#"><i class="icon-star"></i> Star</a>

With button_tag in Rails, you can create the same button using:

<%= button_tag '<i class="icon-star"></i> Star'.html_safe , :class=>"btn btn-large" %>

Answer 5

I wanted something a little more comprehensive ... a button with verbiage and the glyph on it. I mixed and matched from the above answers, but this is a little different. Wrapping the pieces in a span tag did the trick:

In HAML

 = button_to(rails_path(:id => id), :remote => true, class: 'btn btn-
     success) do
   %span
     %span.glyphicon.glyphicon-star
     Star!

After some interpolation, that generates (in rails 5)

<form class="button_to" method="post" action="/rails/path?id=1734369" data-remote="true">
    <button class="btn btn-success" type="submit">
      <span>
        <span class="glyphicon glyphicon-star"></span>
              Star!                
      </span>
    </button>
    <input type="hidden" name="authenticity_token" value="blah" />
</form>