在 Rails 中将 Twitter Bootstrap 按钮图标添加到 button_to答案

【问题标题】：Adding a Twitter Bootstrap button icon to button_to in Rails在 Rails 中将 Twitter Bootstrap 按钮图标添加到 button_to
【发布时间】：2012-05-15 03:14:47
【问题描述】：

我正在阅读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" %>

我尝试了很多变体，但似乎无法使其正常工作。

【问题讨论】：

你知道 Twitter Bootstrap CSS 是否有效吗？我的猜测是文件路径问题，也许字形图标不在正确的文件夹中。如果你只做纯 HTML，没有 Ruby，下面会显示搜索图标吗？：<i class="icon-search icon-white">Add To Cart</i>

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

您的报价似乎有问题：

<%= 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_safepart 仍然有效。

【讨论】：

啊！这就是问题所在。我认为这与此有关，但我只是做错了。非常感谢皮埃尔。
这个答案是错误的，不起作用。 @jordanpg 下面的答案是正确的。
不起作用。我正在使用 Rails 4.2.6 并测试了 raw() 和 .html_safe ，但它们都没有工作。

【解决方案2】：

我不确定 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 %>

【讨论】：

除非我们谈论的是用于删除的链接/按钮。我们需要一个按钮来提交以使 HTML 方法起作用。 stackoverflow.com/questions/4606860/…
button_to 方法优于 link_to。原因解释here。请参阅我的答案以了解如何将其与图标一起使用。

【解决方案3】：

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

【讨论】：

【解决方案4】：

我用过这个，它对我来说很好用：

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

希望对你有帮助

【讨论】：

有效的答案，但 cmets 中描述的文件问题可能更多是原因
注意：此答案仅适用于启用 JavaScript。如果浏览器禁用了 JavaScript，将通过 GET 方法调用链接。

【解决方案5】：

我正在使用这个助手：

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>

【讨论】：

【解决方案6】：

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

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

【讨论】：

这正是我想要的。非常感谢。

【解决方案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>'),

【讨论】：

【解决方案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>

【讨论】：