24

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

我已经尝试了很多变体，但似乎无法让它正常工作。

4

8 回答 8

59

我不确定 OP 是如何让它工作的，但是 Railsbutton_to生成了一个<input type='submit' />元素，它不允许在 value 字段中使用 HTML。

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

在这种情况下，最好的选择是强制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 %>
于 2012-06-07T19:02:54.317 回答
34

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

<%= button_to button_path, method: :delete do %>
    <span class="glyphicon glyphicon-search"></span>
<% end %>
于 2013-12-26T15:43:21.100 回答
7

您的报价似乎有问题：

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

于 2012-05-06T07:31:14.467 回答
6

使用 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
于 2012-10-24T01:08:37.130 回答
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 %>

希望这可以帮助

于 2012-11-22T15:26:29.623 回答
4

我正在使用这个助手：

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>
于 2012-11-26T20:32:19.877 回答
1

使用 Rails 4 和 Bootstrap 3，这里是如何使用link_toor创建删除按钮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>'),
于 2014-02-12T21:50:52.590 回答
0

这对我有用，（并带有确认消息） 

<%= 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>
于 2016-09-29T20:02:23.810 回答