アイコンをレールに送信する方法

Question

私はブートストラップを使用しており、フォームの送信ボタンにアイコンを入れたいと思っています。

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

私はテキストに、生とhtml_safeの両方を追加しようとしたが、どちらも1が動作するように見えました。
私は一つの解決策がアイコンが既にそれのイメージであるクラスを持っていることを知っていますが、私は追加イメージ/ CSSを作成せずにこれをしたいと思います。助言がありますか？

Answer 1

代わりbutton_tagを使用してこれを行うことができます。

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

これは、内部のアイコンとwordageと<button type="submit"></button>要素を作成します。私はテストして、それは動作します。 button_tagのデフォルトアクションはサブミットするため、別のアクション（キャンセルなど）が必要な場合は、:type => "button"オプションを使用してデフォルトの送信動作をオーバーライドできます。

編集：あなたが

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

お知らせを置くように、ブートストラップ3の場合は、アイコンのクラス名は、変更されている、もはや白のアイコンのための特別なクラスはありません。 CSSクラスを.whiteにしてcolor: #fff;と入力してください。シンプル。アイコンはフォントになっているので、好きな色やテキストスタイルを使うことができます。

関連質問：Add Icon to Submit Button in Twitter Bootstrap 2、およびHow do I change Bootstrap 3's glyphicons to white?

Answer 2

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

アイコンのサイズに合わせてパディングを調整する必要がある場合があります。