Question

我正在阅读Agile Web Development with Rails书，但我一直在使用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 button tag are they interchangeable?

在这种情况下，最好的替代方法是强制link_to进行PUT（或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 %>

希望这有帮助

Answer 6

我正在使用这个助手：

module ApplicationHelper
  def glyph(*names)
   content_tag :i, nil, class: names.map{|name| "icon-#{name.to_s.gsub('_','-')}" }
  end
end

示例：

glyph(:share_alt)
=> <i class="icon-share-alt"></i>

和

glyph(:lock, :white)
=> <i class="icon-lock icon-white"></i>

Answer 7

使用Rails 4和Bootstrap 3，以下是使用link_to或button_to创建删除按钮的方法。

请注意，我使用的是Haml而不是Erb。

在您看来：

- @users.each do |user|
  = link_to content_tag(:i, ' Delete', class: "glyphicon glyphicon-trash"),
    users_path(user),
    class: "btn btn-danger",
    method: :delete,
    data: { confirm: "Delete user #{user.username}?" }

您也可以用

替换content_tag部分

raw('<i class="glyphicon glyphicon-trash"> Delete</i>'),

Answer 8

这项工作适合我，（并附有确认信息）

<%= button_to "/home/delete?cardId="+card.id.to_s, data: { confirm:'Are you sure you want to delete?' }  do %>
    <i class="fa fa-times"></i>
<% end%>

此生成

<form class="button_to" method="post" action="/home/delete?cardId=15">
 <button data-confirm="Are you sure you want to delete?" type="submit">
    <i class="fa fa-times"></i>
 </button>
</form>

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

8 个答案: