在Rails中向button_to添加Twitter引导按钮图标

我正在使用Agile Web Development with Rails书，但我一直使用Twitter Bootstrap代替书中的自定义样式。我无法通过GLyphonics向button_to方法添加图标。我的代码如下所示：在Rails中向button_to添加Twitter引导按钮图标

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

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

来源

2012-05-06 maddiedog

你知道Twitter Bootstrap CSS是否有效吗？我的猜测是这是一个文件路径问题，也许图形文件不在正确的文件夹中。如果你只是做纯HTML，不用Ruby，下面会显示搜索图标吗？：'' –

它看起来就像你与你的报价问题：

<%= 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-06 07:31:14 Pierre

AHH！这是问题所在。我认为这是与此有关的事情，但我只是做错了。感谢一堆Pierre。 – maddiedog

+39

这些解决方案都不起作用。 – Undistraction

这些不适合我在Rails上3.2.8 – joelparkerhenderson

我不确定OP如何得到这个工作，但Rails button_to生成<input type='submit' />元素，它不允许在值字段中使用HTML。

参见：input type="submit" Vs button tag are they interchangeable?

在这种情况下，最好的选择是强制link_to放（或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-07 19:02:54 jordanpg

这是^^^是正确的答案。没有一个OP被接受。 – flyingarmadillo

除我们正在谈论删除的链接/按钮时。我们需要一个按钮来提交HTML方法才能工作。 http://stackoverflow.com/questions/4606860/rails-3-link-to-to-destroy-not-working –

这应该是被接受的答案。 – GMA

使用原始（）或#html_safe仍然没有为我工作。

我正在使用助手方法来创建button_to标记内容。最终使用在我的helper方法如下（路径预先定义）：

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

来源

2012-10-24 01:08:37 Elle

我用这一个，它为我工作得很好：

<%= 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-22 15:26:29

工作答案，但评论中描述的文件问题可能更多原因 – toxicate20

注意：此答案仅适用于启用JavaScript。如果浏览器禁用JavaScript，则链接将通过GET方法调用。 – morgler

我使用这个辅助函数：

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-26 20:32:19

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

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

来源

2013-12-26 15:43:21 DanT

将块传递给'button_to'只适用于rails> = 4.x – morgents

这正是我所期待的。非常感谢。 – blivet

使用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}?" }

您还可以

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

来源

2014-02-12 21:50:52 Dennis

更换content_tag部分这项工作对我来说，（与确认消息）

<%= 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-29 20:02:23

在Rails中向button_to添加Twitter引导按钮图标

回答

相关问题