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!

4

5 に答える 5

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 %>
于 2012-07-30T15:49:05.153 に答える
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' } %>
于 2012-05-09T18:49:06.690 に答える
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.

于 2012-05-09T18:38:34.133 に答える
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
于 2016-02-09T18:52:59.393 に答える
-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>
于 2012-05-10T06:39:17.453 に答える