web-dev-qa-db-ja.com

Rails送信ボタンにアイコンを配置する方法

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を作成せずにこれを実行したいと考えています。助言がありますか？

cssruby-on-rails-3formstwitter-bootstrap
26
Austin

代わりに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 、および 変更方法Bootstrap 3のグリフィコン白に？

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

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

1
Diodeus - James MacFarlane