Adding a Bootstrap Icon to a Button in Ruby on Rails

Question

I want to add a ruby ​​badge on the rails. I have currently 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 creates 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 have implemented the solution posted here: https://stackoverflow.com/a/167438/2/3 , but this will not work for me. I also tested that Bootstrap CSS works by simply inserting an icon in a different place on the site.

Thanks for any help!

Answer 1

Thanks for the help guys finished 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> 

Answer 2

You can also try the following:

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

or for a real submit button:

 <%= button_tag(:type => 'submit', :class => 'btn btn-success') do %> Upvote <i class="icon-up-arrow icon-white"></i> <% end %> 

Answer 3

If you are just looking for a link that looks like a button, you can 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 can 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' } %> 

Answer 4

If you look at the bottom of this one on the Twitter Bootstrap website , you will notice that there are buttons with icons on them. You can then browse the source to find out how they did it - I would say that this would be a great starting point.

Answer 5

The best and clear way would be:

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