2012-05-06 58 views
23

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

我嘗試了很多變化,但似乎無法使其正常工作。

+1

你知道Twitter Bootstrap CSS是否有效嗎?我的猜測是這是一個文件路徑問題,也許圖形文件不在正確的文件夾中。如果你只是做純HTML,不用Ruby,下面會顯示搜索圖標嗎?:'加入購物車' –

回答

8

它看起來就像你與你的報價問題:

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

+0

AHH!這是問題所在。我認爲這是與此有關的事情,但我只是做錯了。感謝一堆Pierre。 – maddiedog

+39

這些解決方案都不起作用。 – Undistraction

+9

這些不適合我在Rails上3.2.8 – joelparkerhenderson

52

我不確定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 %> 
+3

這是^^^是正確的答案。沒有一個OP被接受。 – flyingarmadillo

+3

除我們正在談論刪除的鏈接/按鈕時。我們需要一個按鈕來提交HTML方法才能工作。 http://stackoverflow.com/questions/4606860/rails-3-link-to-to-destroy-not-working –

+0

這應該是被接受的答案。 – GMA

6

使用原始()或#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 
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 %> 

希望這有助於

+0

工作答案,但評論中描述的文件問題可能更多原因 – toxicate20

+0

注意:此答案僅適用於啓用JavaScript。如果瀏覽器禁用JavaScript,則鏈接將通過GET方法調用。 – morgler

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

您可以添加圖標作爲子元素:

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

將塊傳遞給'button_to'只適用於rails> = 4.x – morgents

+0

這正是我所期待的。非常感謝。 – blivet

1

使用Rails 4和Bootstrap 3,這裏是如何創建一個使用link_tobutton_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>'), 
0

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