Adding Bootstrap icon to button in Ruby on Rails

Question

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!

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
– Ben, Commented May 10, 2012 at 7:40

Loren · Accepted Answer · 2012-07-30 15:49:05Z

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 %>

answered Jul 30, 2012 at 15:49

Loren

3,4663 gold badges25 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Schmitz · Accepted Answer · 2012-05-09 18:49:06Z

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' } %>

answered May 9, 2012 at 18:49

Chris Schmitz

8,2876 gold badges36 silver badges41 bronze badges

Comments

Aayush Kumar · Accepted Answer · 2012-05-09 18:38:34Z

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.

answered May 9, 2012 at 18:38

Aayush Kumar

1,6181 gold badge11 silver badges31 bronze badges

Comments

Rubioli · Accepted Answer · 2016-02-09 18:52:59Z

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

answered Feb 9, 2016 at 18:52

Rubioli

6806 silver badges24 bronze badges

Comments

Bjørn Fjukstad · Accepted Answer · 2012-05-10 06:39:17Z

-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>

answered May 10, 2012 at 6:39

Bjørn Fjukstad

651 silver badge6 bronze badges

Collectives™ on Stack Overflow

Adding Bootstrap icon to button in Ruby on Rails

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related