将一个Twitter Bootstrap按钮图标添加到Rails中的button_to

Question

我正在使用Rails书进行敏捷Web开发,但我一直在使用Twitter Bootstrap而不是书中的自定义样式.我无法通过GLyphonics向button_to方法添加图标.我的代码看起来像这样:

<%= button_to <i class="icon-search icon-white">Add To Cart</i>, 
              line_items_path(product_id: product), 
              class: "btn btn-success" %>

我尝试了很多变化,但似乎无法让它正常工作.

Answer 1

我不确定OP是如何工作的,但是Rails会button_to生成一个<input type='submit' />元素,它不允许在值字段中使用HTML.

另请参阅:input type ="submit"Vs按钮标签是否可以互换？

在这种情况下最好的选择是强制link_toPUT(或POST):

<%= link_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
          line_items_path(product_id: product), 
          class: "btn btn-success",
          method: :put %>

Answer 2

您可以将图标添加为子元素:

<%= button_to button_path, method: :delete do %>
    <span class="glyphicon glyphicon-search"></span>
<% end %>

Answer 3

看起来你的报价有问题:

<%= button_to raw("<i class=\"icon-search icon-white\">Add To Cart</i>"), 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

用双引号括住按钮的标签,转义标签中的双引号,i最后将所有内容包装到一个raw()调用中,以确保正确显示HTML.

或者你可以使用html_safe:

<%= button_to "<i class=\"icon-search icon-white\">Add To Cart</i>".html_safe, 
          line_items_path(product_id: product), 
          class: "btn btn-success" %>

来自@jordanpg的好点:您不能在按钮的值中包含HTML,因此他的解决方案更合适并且应该获得批准状态.该html_safe部分仍然有效.

Answer 4

使用raw()或#html_safe仍然不适合我.

我正在使用辅助方法来创建button_to标记内容.在我的帮助方法中使用以下内容结束(路径是事先定义的):

form_tag path, :method => :post do
  button_tag do
    content_tag :i, 'Flag as inappropriate', :class => 'icon-flag flag_content'
  end
end

Answer 5

我用过这个,它对我来说很好用:

<%= link_to(line_items_path(product_id: product),
    method: :put,
    class: 'btn btn-success') do %>
    <%= content_tag('i', nil, class: 'icon-search icon-white') %> Add To Cart
<% end %>

希望这可以帮助