CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstrapglyphicons
emersonthis
emersonthis

Reputation: 33378

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

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>

Upvotes: 2

Views: 3803

Answers (5)

jjk
jjk

Reputation: 536

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>

Upvotes: 0

Prakash Teli
Prakash Teli

Reputation: 51

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 %>

Upvotes: 4

user691369
user691369

Reputation:

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" %>

Upvotes: 0

emersonthis
emersonthis

Reputation: 33378

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.

Upvotes: 1

Bob
Bob

Reputation: 2121

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"} %>

Upvotes: 0

Related Questions