在Ruby on Rails中将Bootstrap图标添加到按钮

Question

我想在Ruby on Rails按钮上添加一个图标。目前我已经尝试了以下方法：

<%= 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"}%>

生成以下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>

我已经按照这里发布的解决方案https://dev59.com/OWkv5IYBdhLWcg3wnCLH#10468935进行尝试，但对我无效。我也测试过Bootstrap CSS是否有效，只需在网站上任何其他地方插入一个图标即可。

谢谢您的帮助！

- Bjørn Fjukstad

---

你不能为 button_to 助手设置图标。这需要你调用 .html_safe 或 raw()，但据我所知，由于你必须调用它的字符串不可访问，因此这是不可能的。 - Ben

Answer 1

你也可以尝试这个：

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

或者对于一个真正的提交按钮，可以使用这个：

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

- Loren

Answer 2

如果您只是想要一个看起来像按钮的链接，您可以尝试这样做：

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

如果您想将其用于表单，可以使用 button_tag、submit_tag 或 f.submit 等方法来实现。

<%= submit_tag 'Upvote <i class="icon-arrow-up"></i>', html: { class: 'btn btn-success' } %>

- Chris Schmitz

Answer 3

更好、更清晰的方式是：

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

- Rubioli

Answer 4

如果你仔细看Twitter Bootstrap网站上的页面底部, 你会发现有一些带图标的按钮。你可以查看源代码来了解他们是如何实现的 - 我认为这是一个很好的起点。

- Aayush Kumar

Answer 5

感谢大家的帮助，最终我修改了自己的HTML输出，使它正常工作：

<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