Ruby-on-rails 将 Twitter Bootstrap 按钮图标添加到 Rails 中的 button_to

Adding a Twitter Bootstrap button icon to button_to in Rails

提问by maddiedog

I am working through the Agile Web Development with Railsbook but I have been using Twitter Bootstrap instead of the custom styling from the book. I am having trouble adding an icon through GLyphonics to the button_tomethod. My code looks like this:

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

I have tried quite a few variations but can't seem to get it to work correctly.

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

采纳答案by Pierre

It looks like you have an issue with your quotes:

您的报价似乎有问题：

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

Enclose the label of the button in double quotes, escape the double quotes in your itag, and finally, wrap everything into a raw()call to ensure the HTML is properly displayed.

将按钮的标签用双引号括起来，将标签中的双引号转义i，最后，将所有内容包装到raw()调用中以确保 HTML 正确显示。

Alternatively you can use html_safe:

或者，您可以使用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" %>

---

---

good point from @jordanpg: you can't have HTML in the value of a button, so his solution is more appropriate and should get the approved status. the html_safepart remains valid though.

@jordanpg 的好点子：你不能在按钮的值中包含 HTML，所以他的解决方案更合适，应该获得批准的状态。该html_safe部分仍然有效。

回答by jordanpg

I'm not sure how the OP got this to work, but Rails button_togenerates an <input type='submit' />element, which does not allow for HTML in the value field.

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

See also: input type="submit" Vs button tag are they interchangeable?

另请参阅：input type="submit" Vs button tag 它们可以互换吗？

The best alternative in this situation is to force link_toto PUT (or POST):

在这种情况下最好的选择是强制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 %>

回答by DanT

You can add the icon as a child element:

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

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

回答by Elle

Using raw() or #html_safe still did not work for me.

使用 raw() 或 #html_safe 仍然对我不起作用。

I am using a helper method to create a button_to flag content. Ended up using the following in my helper method (path is defined beforehand):

我正在使用辅助方法来创建 button_to 标志内容。最终在我的辅助方法中使用了以下内容（路径是预先定义的）：

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

回答by Pascal Luxain

I used this one and it works fine for me :

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

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

Hope this helps

希望这可以帮助

回答by Juan Seijas

I am using this helper:

我正在使用这个助手：

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

Example:

例子：

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

and

和

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

回答by Dennis

Using Rails 4 and Bootstrap 3, here's how to create a delete button using link_toor button_to.

使用 Rails 4 和 Bootstrap 3，这里是如何使用link_to或创建删除按钮button_to。

Note that I'm using Hamlinstead of Erb.

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

In your view:

在您看来：

- @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}?" }

You can also replace the content_tagpart with

你也可以content_tag用

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

回答by Matias Sanchez

This work for me, (and with confirm message)

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

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

this generate

这产生

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