6

I want to add an icon to a button in ruby on rails. Currently I've tried the following: 

<%= button_to raw("<i class=\"icon-arrow-up\"></i>"),
{:controller => 'events', :action => "upvoteEvent", :method => "put",
:id => @event.id, :uid => current_user.id},
{:class => "btn btn-success"}%>

which produces the following html: 

<form action="/events/upvoteEvent?id=17&amp;method=put&amp;uid=7" class="button_to" method="post"><div><input class="btn btn-success" type="submit" value="<i class="icon-arrow-up"></i>" /><input name="authenticity_token" type="hidden" value="FsVUPiYl0cK666pn8hqo6AU9/HK0CweZ/nsXqwOWZzU=" /></div></form>

I've followed the solution posted here: https://stackoverflow.com/a/10468935/1385324, but it won't work for me. I have also tested that the Bootstrap CSS is working, by simply inserting an icon anywhere else on the site.

Thanks for any help!

Community
  • 1
  • 1
Bjørn Fjukstad
  • 65
  • 1
  • 6
  • you cant set a icon for a `button_to` helper. It would require you to call `.html_safe` or `raw()` but thats not possible as far as I know since the string you have to call it on isnt accessible. – Ben May 10 '12 at 07:40

5 Answers5

12

You could also try this:

<%= link_to 'Upvote <i class="icon-arrow-up"></i>'.html_safe, 'events/upvoteEvent', class: => 'btn btn-success' %>

or for a true submit button, this:

<%= button_tag(:type => 'submit', :class => 'btn btn-success') do %>
Upvote <i class="icon-up-arrow icon-white"></i>
<% end %>
Loren
  • 3,476
  • 3
  • 23
  • 15
1

If you are just looking for a link that looks like a button, you could do something like this:

<%= link_to 'Upvote <i class="icon-arrow-up"></i>', 'events/upvote', class: 'btn btn-success' %>

If you want to use it for a form, you could do something like this with button_tag, submit_tag, or f.submit.

<%= submit_tag 'Upvote <i class="icon-arrow-up"></i>', html: { class: 'btn btn-success' } %>
Chris Schmitz
  • 8,097
  • 6
  • 31
  • 41
0

If you look right at the bottom of this page on the Twitter Bootstrap website, you will notice there are some buttons with icons on them. You can then view the source to see how they have done it - I would say that would be a great starting point.

Aayush Kumar
  • 1,618
  • 1
  • 11
  • 31
0

A better and cleaner way would be:

= link_to 'events/upvoteEvent', class: => 'btn btn-success' do
   Upvote
   <i class="icon-arrow-up"></i>'.html_safe
Rubioli
  • 670
  • 6
  • 21
-5

Thanks for your help guys, ended up with modifying my own html-output which made it work:

<form action="/events/upvoteEvent?id=<%= @event.id.to_s%>&amp;method=put&amp;uid=<%= current_user.id.to_s%>" class="button_to" method="post">
    <button type="submit" value="upvote" class="btn btn-success">
        <i class="icon-arrow-up"></i>
    </button>
</form>
Bjørn Fjukstad
  • 65
  • 1
  • 6