Tambahkan ikon untuk mengirim tombol di twitter bootstrap 2

Saya ingin menggunakan ikon bootstrap twitter di tombol kirim masukan formulir saya.

Contoh-contoh di http://twitter.github.com/bootstrap/base-css.html#icons umumnya menampilkan hyperlink gaya.

Yang paling dekat saya datang adalah mendapatkan ikon yang ditampilkan di sebelah tombol, tetapi tidak di dalam.

<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>

Anda dapat menggunakan tag tombol alih-alih input

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

Saya pikir Anda dapat menggunakan tag label untuk tujuan ini. Berikut adalah contoh navbar HTML bootstrap twitter:

<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>

Pada dasarnya Anda mendapatkan elemen label untuk input (ketik = kirim) dan kemudian Anda menyembunyikan masukan yang sebenarnya dikirimkan. Pengguna dapat mengklik elemen label dan masih bisa mengirimkan formulir.

Saya pikir Anda harus mencoba FontAwesome ini dirancang untuk digunakan dengan Bootstrap Twitter.

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

Anda dapat menambahkan <a/> dengan ikon di suatu tempat, dan mengikat tindakan JavaScrit padanya, yang mengirimkan formulir. Jika perlu, nama dan nilai nama + nilai tombol kirim asli bisa ada di sana dalam atribut tersembunyi. Mudah dengan jQuery, izinkan saya untuk menghindari versi JavaScript murni.

Misalkan ini adalah bentuk asli:

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

Ubah seperti ini:

<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>

... dan kemudian jQuery ajaib:

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

Atau jika Anda ingin memastikan bahwa pengguna selalu dapat mengirimkan formulir - itu yang akan saya lakukan di sepatu Anda -, Anda dapat meninggalkan tombol kirim normal dalam formulir, dan menyembunyikannya dengan jQuery. Menyembunyikan (). Ini memastikan bahwa login masih berfungsi tanpa JavaScript dan jQuery sesuai dengan tombol kirim normal (ada orang yang menggunakan tautan, w3m dan browser sejenis), tetapi menyediakan tombol mewah dengan ikon jika memungkinkan.

Ada cara baru untuk melakukan ini dengan bootstrap 3:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Itu ada di halaman bootstrap glyphicons di bawah "bagaimana cara menggunakan":

Saya ingin ikon Bootstrap Twitter ke bentuk Rails dasar dan menemukan posting ini. Setelah mencari-cari sedikit, saya menemukan cara mudah untuk melakukannya. Tidak yakin jika Anda menggunakan Rails, tapi ini kodenya. Kuncinya adalah melewati blok ke helper view_to view:

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

Jika Anda tidak menggunakan Rails, ini adalah HTML output untuk tautan dengan ikon (untuk edit, hapus, dan tombol kirim baru)

# 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>

Dan inilah tautan ke tangkapan layar dari hasil yang sudah selesai: http://grab.by/cVXm

Ada satu cara, bagaimana memasukkan glyphicon (bootstrap) input type="submit". Menggunakan beberapa latar belakang css3.

HTML:

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

dan 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 */
}

Jika banyak latar belakang tumpang tindih, di bagian atas akan menjadi latar belakang pertama pada background:notasi. Jadi di bagian atas adalah latar yang indentasi 16pxdari sisi kiri ( 16pxlebar glyphicon tunggal), di tingkat bawah adalah keseluruhan glyphicons-halflings.pngdan di tingkat bawah (mencakup seluruh elemen) adalah gradien latar belakang yang sama dengan di tingkat atas.

-48px 0pxadalah ikon cut for search ( icon-search) tetapi mudah untuk menampilkan ikon lainnya.

Jika seseorang membutuhkan :hoverefek, latar belakang harus diketik lagi pada formulir yang sama.

Saya berhasil, tetapi ada beberapa peringatan yang belum saya selesaikan.

Bagaimanapun, ini adalah bagaimana hal itu dilakukan:

Ambil tombol input rata-rata Anda:

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

Potong ikon yang Anda inginkan untuk tombol kirim Anda dari file sprite glyphicons, pastikan itu gambar 14x14 px. Ya, dalam kondisi ideal Anda dapat menggunakan kembali sprite, dan jika ada yang tahu saya akan senang mendengarnya. :-)

Setelah melakukannya, Anda dapat menulis css untuk tombol input Anda seperti ini:

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;
}

Bekerja di Firefox 14, Chrome 21

Tidak berfungsi di IE 9

tl; dr: Dengan sedikit css Anda dapat secara otomatis menempatkan ikon pada tombol kirim Anda, tetapi Anda harus meletakkan ikon di file yang terpisah dan itu tidak akan berfungsi di Internet Explorer.

Saya pikir ini solusi untuk masalah Anda

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

Gunakan input-append dengan kelas tambahan

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Saya kira ini cara yang lebih baik, berfungsi baik untuk saya.

<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>