Question

我想在轨道上的红宝石中为按钮添加一个图标。目前我已尝试过以下内容：

<%= 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://stackoverflow.com/a/10468935/1385324，但它对我不起作用。我还测试了Bootstrap CSS是否正常工作，只需在网站上的任何其他位置插入一个图标即可。

感谢您的帮助！

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

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

Answer 3

如果你看向page on the Twitter Bootstrap website的底部，你会发现有些按钮上有图标。然后你可以查看来源，看看他们是如何做到的 - 我会说这将是一个很好的起点。

Answer 4

更好更清洁的方式是：

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

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>

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

5 个答案: