24

I am working through the Agile Web Development with Rails book but I have been using Twitter Bootstrap instead of the custom styling from the book. I am having trouble adding an icon through GLyphonics to the button_to method. My code looks like this:

<%= button_to <i class="icon-search icon-white">Add To Cart</i>, 
              line_items_path(product_id: product), 
              class: "btn btn-success" %>

I have tried quite a few variations but can't seem to get it to work correctly.

jordanpg
  • 6,386
  • 4
  • 46
  • 70
maddiedog
  • 355
  • 1
  • 3
  • 7
  • 1
    do you know if any of the Twitter Bootstrap CSS is working? My guess is it's a file path issue, perhaps the glyphicon isn't in the right folder. If you just do pure HTML, no Ruby, does the following show the search icon?: `Add To Cart` – tim peterson May 06 '12 at 04:35

8 Answers8

59

I'm not sure how the OP got this to work, but Rails button_to generates an <input type='submit' /> element, which does not allow for HTML in the value field.

See also: input type="submit" Vs button tag are they interchangeable?

The best alternative in this situation is to force link_to to PUT (or POST):

<%= link_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
          line_items_path(product_id: product), 
          class: "btn btn-success",
          method: :put %>
Community
  • 1
  • 1
jordanpg
  • 6,386
  • 4
  • 46
  • 70
  • 3
    Except when we're talking about a link/button for deleting. We need a button to SUBMIT for the HTML method to work. http://stackoverflow.com/questions/4606860/rails-3-link-to-to-destroy-not-working – David Krider Mar 08 '13 at 01:03
  • 1
    The button_to method is preferable to link_to. The reasons are explained [here](http://blog.markusproject.org/?p=3890). See my answer for how to use it with an icon. – DanT Dec 26 '13 at 15:51
  • For what it's worth, the link shared by @DanT no longer returns a result, so here's the last snapshot from the webarchive: https://web.archive.org/web/20160313112835/http://blog.markusproject.org/?p=3890 – alecvn Aug 12 '22 at 09:54
38

You can add the icon as a child element:

<%= button_to button_path, method: :delete do %>
    <span class="glyphicon glyphicon-search"></span>
<% end %>
DanT
  • 3,960
  • 5
  • 28
  • 33
7

It looks like you have an issue with your quotes:

<%= button_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

Enclose the label of the button in double quotes, escape the double quotes in your i tag, and finally, wrap everything into a raw() call to ensure the HTML is properly displayed.

Alternatively you can use html_safe:

<%= button_to "<i class=\"icon-search icon-white\">Add To Cart</i>".html_safe, 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

good point from @jordanpg: you can't have HTML in the value of a button, so his solution is more appropriate and should get the approved status. the html_safepart remains valid though.

Pierre
  • 8,368
  • 4
  • 34
  • 50
  • AHH! That was the problem. I thought it was something related to that but I was just doing it wrong. Thanks a bunch Pierre. – maddiedog May 06 '12 at 16:13
  • 4
    This answer is wrong and doesn't work. @jordanpg's answer below is the correct one. – GMA Nov 06 '13 at 09:08
  • 1
    Does NOT work. I'm using Rails 4.2.6 and tested both raw() and .html_safe and none of them worked. – Ed de Almeida May 20 '16 at 12:13
6

Using raw() or #html_safe still did not work for me.

I am using a helper method to create a button_to flag content. Ended up using the following in my helper method (path is defined beforehand):

form_tag path, :method => :post do
  button_tag do
    content_tag :i, 'Flag as inappropriate', :class => 'icon-flag flag_content'
  end
end
Elle
  • 236
  • 3
  • 5
5

I used this one and it works fine for me :

<%= link_to(line_items_path(product_id: product),
    method: :put,
    class: 'btn btn-success') do %>
    <%= content_tag('i', nil, class: 'icon-search icon-white') %> Add To Cart
<% end %>

Hope this helps

Pascal Luxain
  • 271
  • 1
  • 4
  • 11
  • working answer, but the file issue described in the comments is probably more the cause – toxicate20 Nov 22 '12 at 15:46
  • Note: this answer only works with JavaScript enabled. If the browser has JavaScript disabled, the link will be called via the GET method. – morgler Dec 16 '12 at 04:26
4

I am using this helper:

module ApplicationHelper
  def glyph(*names)
   content_tag :i, nil, class: names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
  end
end

Example:

glyph(:share_alt)
=> <i class="icon-share-alt"></i>

and

glyph(:lock, :white)
=> <i class="icon-lock icon-white"></i>
Juan Seijas
  • 41
  • 3
1

Using Rails 4 and Bootstrap 3, here's how to create a delete button using link_to or button_to.

Note that I'm using Haml instead of Erb.

In your view:

- @users.each do |user|
  = link_to content_tag(:i, ' Delete', class: "glyphicon glyphicon-trash"),
    users_path(user),
    class: "btn btn-danger",
    method: :delete,
    data: { confirm: "Delete user #{user.username}?" }

You can also replace the content_tag part with

raw('<i class="glyphicon glyphicon-trash"> Delete</i>'),
Dennis
  • 56,821
  • 26
  • 143
  • 139
0

This work for me, (and with confirm message) 

<%= button_to "/home/delete?cardId="+card.id.to_s, data: { confirm:'Are you sure you want to delete?' }  do %>
    <i class="fa fa-times"></i>
<% end%>

this generate 

<form class="button_to" method="post" action="/home/delete?cardId=15">
 <button data-confirm="Are you sure you want to delete?" type="submit">
    <i class="fa fa-times"></i>
 </button>
</form>
Matias Sanchez
  • 11
  • 2