Twitterブートストラップ2の送信ボタンにアイコンを追加


227

フォーム入力送信ボタンでTwitterブートストラップアイコンを使用したい。

http://twitter.github.com/bootstrap/base-css.html#iconsの例は、主にスタイル付きハイパーリンクを示しています。

一番近いのは、ボタンの横にアイコンが表示されているのですが、中にはありません。

<div class="input-prepend">
   <span class="add-on"><i class="icon-user icon-white"></i></span>
   <input type="submit" class="btn-primary" value="Login" >
</div>

2
しばらく試してみたが成功しなかった。基本的に、ボタンの値内にhtml要素を追加することはできません。
ジョングッドマン

@JohnGoodmanそれはコメントではなく、答えであるべきです。受け入れられた回答は回避策であり、質問への直接の回答ではありません。
cartbeforehorse 2014

回答:


394

入力の代わりにボタンタグを使用できます

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

12
これは機能しますが、ボタンタグの意味とそのクロスブラウザー効果の詳細については、w3schools.com / tags / tag_button.aspを参照してください。これは、特にフォームでは注意して使用してください。
Matenia Rossides

10
これをChrome、Firefox、Safari(win7)およびIE8の<form>タグ内で送信ボタンとして正常にテストしました
Mr Bell

4
このアプローチで私が抱えていた唯一の問題は、フォームに他のボタンがある場合、他のボタンの1つが優先されるため、キーボードのEnterキーを押してもフォームが送信されないことです。既知の回避策はありますか?
Jeshurun

2
これはまさに私がやっていたことでした。しかし、<i>タグに追加した後、アイコンが表示されませんでした。キャッシュをクリアする必要があることに気づくまで、それは非常に厄介でした。同じ問題が発生した場合は、Ctrl+F5キャッシュをクリアして更新すると、見事なアイコンが表示されます。
Aditya MP

2
追加する必要がありましたonClick="submit();"
TimP 2013年

67

この目的のためにラベルタグを使用できると思います。以下は、TwitterブートストラップHTMLナビゲーションバーのサンプルです。

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

基本的には、入力(type = submit)のラベル要素を取得し、実際の入力送信を非表示にします。ユーザーはlabel要素をクリックしても、フォームの送信を続行できます。


9
これは私にとって両方の長所です。必要なスタイルが得られ、リンクやJavaScriptを使用していません。
AaronLS 2012年

1
これはスタイルを適用して見栄えをよくしますが、ユーザーが入力フィールドでEnterキーを押したときにフォームが送信されないようにします。(FF17でのみテスト)
Richard

1
明らかに私にとって最良の解決策です。乾杯!
Armel Larcier 2013

14

Twitter Bootstrapで使用するように設計されたこのFontAwesomeを試してみてください。

<button class="btn btn-primary icon-save">Button With Icon</button>

11

アイコンを使用して<a/>をどこかに追加し、それにフォームを送信するJavaScritアクションをバインドできます。必要に応じて、元の送信ボタンの名前と値の名前と値を非表示の属性に含めることができます。jQueryを使用するのは簡単です。純粋なJavaScriptバージョンを使用しないようにしてください。

これが元のフォームだとしましょう:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

次のように変更します。

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

...そして魔法のjQuery:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

または、ユーザーが常にフォームを送信できるようにしたい場合(それは私があなたの立場で行うことです)、通常の送信ボタンをフォームに残して、jQuery .hide()で非表示にすることができます。通常の送信ボタン(リンク、w3m、および同様のブラウザーを使用している人がいる)に従って、JavaScriptとjQueryがなくてもログインが機能することを保証しますが、可能であればアイコン付きの豪華なボタンを提供します。


何かご不明な点がございましたら、この質問にお答えください。stackoverflow.com/questions/11295378/...
Krishnaprasadヴァルマ


7

Twitter Bootstrapアイコンを基本的なRailsフォームにしたかったので、この投稿を見つけました。少し調べたところ、簡単な方法がわかりました。Railsを使用しているかどうかはわかりませんが、コードは次のとおりです。重要なのは、link_toビューヘルパーにブロックを渡すことでした。

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

Railsを使用していない場合、アイコン付きのリンクの出力HTMLは次のとおりです(編集、削除、および新しい送信ボタン用)

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

そして、ここに完成した結果のスクリーンショットへのリンクがありますhttp : //grab.by/cVXm


2
では、検索エンジンがサイトをクロールし、「削除」というリンクを見つけ、「ああ、私はそのリンクをたどると思います」と判断してデータベースをいじり始めたらどうなるでしょうか。そのため、変更は常に非GET操作で実行する必要があると常に言われていました。
Asfand Qazi

彼はおそらくリンクを削除するために認可を使用している、ほとんどの人がそうしている。
Noz

2
OPはレールについて尋ねていなかったので話題外ですが... Railsは確かに控えめなJavaScriptを介してこの種のハイパーリンクを統合するときに削除メソッドを使用します。誰かがそのリンクを直接要求した場合、デフォルトでは、そのレコードは削除されずに表示されます。詳細については、この回答を参照してください:stackoverflow.com/a/2809412/252290
levous

これは特にアンカータグではなく送信ボタンに関するものです。
pixelearth 2013年

6

(ブートストラップの)グリフィコンをに取り込む方法は1つありinput type="submit"ます。css3複数の背景を使用します。

HTML:

<form class="form-search"><input type="submit" value="Search">
</form>

およびCSS:

.form-search input[type="submit"] {
    padding-left:16px; /* space for only one glyphicon */
    background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        -moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
    /* another hacks here  */
    background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
        url(../images/glyphicons-halflings.png) no-repeat -48px 0,
        linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}

複数の背景が重なっている場合、一番上がbackground:表記の最初の背景になります。上部はインデントされた背景です16px左側かられた(16px単一のグリフィコンの幅です)、下部のレベルは全体ですglyphicons-halflings.pngで、下部レベル(要素全体をカバー)は上部レベルと同じ背景グラデーションです。

-48px 0px 検索用カットアイコン(icon-search)ですが、他のアイコンを表示するのは簡単です。

誰かが:hover効果を必要とするならば、背景は同じ形で再びタイプされなければなりません。


これはうまくいくかもしれませんが、確かに<button type = "submit">を使用するほどエレガントではなく、保守が難しくなります。
Richard

4

これは機能しましたが、まだ解決していないいくつかの警告があります。

とにかく、これはどのように行われるかです:

平均的な入力ボタンを見てください:

<input type="submit" class="btn btn-success" value="Save">

glyphiconsスプライトファイルから送信ボタンに必要なアイコンを切り取り、14x14 pxの画像であることを確認します。はい、理想的な状況ではスプライトを再利用できます。誰かがそれを見つけたら、それがどのように行われるかを聞いて喜んでいます。:-)

これを行ったら、次のように入力ボタンのcssを記述できます。

input[type='submit'] {
    background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
    background-repeat: no-repeat;
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

input[type='submit']:hover {
    background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
    background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
    background-image: url('../images/submit-icon.png'),    -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
    background-image: url('../images/submit-icon.png'),     -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
    background-image: url('../images/submit-icon.png'),      -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
    background-image: url('../images/submit-icon.png'),         linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
    background-position: 5px 50%, 0cm 0cm;
    padding-left: 25px;
}

Firefox 14、Chrome 21で動作します

IE 9では機能しません

tl; dr:少しcssを使用すると、送信ボタンに自動的にアイコンを配置できますが、アイコンを別のファイルに配置する必要があり、Internet Explorerでは機能しません。


1

私はそれがあなたの問題の解決策だと思います

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Search
    </button>
  </p>
 
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> Print 
    </a>
  </p> 
</div>

</body>
</html>



これはブートストラップ3です。アイコンの表示に別のフォーマットを使用するブートストラップ2フォーマットに関する質問でした。
-Calaelen


-1

私はこのより良い方法を推測し、私のためにうまくいきます。

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.