在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引導按鈕圖標

回答

相關問題