27

Bootstrapを使用していて、フォームの送信ボタンにアイコンを配置したいと思います。
コードは次のとおりです。

<%= 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の両方をテキストに追加しようとしましたが、どちらも機能していないようです。
1つの解決策は、クラスにアイコンが既に含まれている画像にすることですが、追加の画像/cssを作成せずにこれを実行したいと思います。助言がありますか？

4

2 に答える 2

58

代わりに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"オプションを使用してデフォルトの送信動作をオーバーライドできます。

編集：Bootstrap 3の場合、アイコンクラス名が変更されたため、

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

白いアイコンの特別なクラスはもうありません。cssクラス.whiteを作成して入れてcolor: #fff;ください。単純。アイコンがフォントになっているので、好きな色やテキストスタイルを使用できます。

関連する質問：Twitter Bootstrap 2の送信ボタンにアイコンを追加します。Bootstrap3のグリフィコンを白に変更するにはどうすればよいですか？

于 2012-10-31T21:50:53.553 に答える
0 
.button_green {
   background-image:url(...your image path...);
   background-repeat:no-repeat;
   padding-left:30px;
}

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

于 2012-10-31T21:40:10.353 に答える