Question

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.

Answer 1

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.