如何將圖標放入rails提交按鈕

我正在使用Bootstrap並希望在提交按鈕中放置一個圖標以顯示錶單。
這裏是代碼：如何將圖標放入rails提交按鈕

<%= f.submit "Submit for Approval <i class='icon-share-alt icon-white'></i>", 
           class: "button_green" %>

生成的HTML：

<input type="submit" value="Submit for Approval &lt;i class='icon-share-alt icon-white'&gt;&lt;/i&gt;" name="commit" class="button_green">

我嘗試添加RAW和html_safe的文本，但沒有一個似乎工作。
我知道一種解決方案是將該類圖像與其中的圖標已經存在，但我想這樣做而不創建額外的圖像/ css。有什麼建議麼？

2012-10-31 Austin

這是通過CSS解決了客戶端的問題。請顯示您的客戶端代碼，而不是您的Rails代碼。 –

我特別問是否有辦法用rails/erb來做到這一點。我希望生成的html在按鈕文本中包含圖標，而不是使用css或其他圖像 – Austin

我不是Rails專家，但如果Bootstrap包含正確，HTML應該會生成一個圖標。看起來像一個Rails問題。 – Sara

您可以通過使用button_tag，而不是這樣做：

<%= button_tag(:class => "button_green") do %> 
    Submit for Approval <i class="icon-share-alt icon-white"></i> 
<% end %>

這將創建一個內部的圖標和一個字數元素<button type="submit"></button>。我已經測試過，它的工作原理。 button_tag的默認操作是提交，因此如果您需要其他操作（例如取消），則可以使用:type => "button"選項覆蓋默認的提交行爲。

編輯：自舉3，圖標類名稱已更改，所以你乾脆把

<span class="glyphicon-white glyphicon-share-alt white"></span>

通知，不再有白色圖標一類特殊的。只要做一個css類.white並把color: #fff;。簡單。您可以使用任何您喜歡的顏色或文字樣式，因爲圖標現在是一種字體。

2012-10-31 21:50:53 GorrillaMcD

我不喜歡這個解決方案，因爲它沒有使用f變量......雖然結果可能是相同的。 –

它確實工作，但... – blnc

.button_green { 
    background-image:url(...your image path...); 
    background-repeat:no-repeat; 
    padding-left:30px; 
}

您可能需要調整填充以匹配圖標的大小。

2012-10-31 21:40:10

回答