Tambahkan ikon untuk mengirim tombol di twitter bootstrap 2


227

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>

2
Saya mencoba melakukan ini untuk sementara waktu tanpa hasil. Pada dasarnya, Anda tidak dapat menambahkan elemen html di dalam nilai tombol.
John Goodman

@JohnGoodman Itu seharusnya jawaban, bukan komentar. Jawaban yang diterima adalah solusi, dan bukan jawaban langsung untuk pertanyaan itu.
cartbeforehorse

Jawaban:


394

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>

12
Ini berfungsi, namun silakan lihat w3schools.com/tags/tag_button.asp untuk informasi lebih lanjut tentang apa yang dimaksud dengan tag tombol dan efek lintas browsernya. Gunakan ini dengan hati-hati, terutama dengan formulir.
Matenia Rossides

10
Saya telah menguji ini di Chrome, Firefox, Safari (pada win7) dan IE8 di dalam tag <form> sebagai tombol kirim berhasil
Mr Bell

4
Satu-satunya masalah yang saya miliki dengan pendekatan ini adalah jika ada tombol lain di formulir, maka formulir Anda tidak akan mengirim ketika menekan tombol enter pada keyboard, karena salah satu tombol lainnya akan diutamakan. Adakah solusi yang diketahui?
Jeshurun

2
Ini persis apa yang saya lakukan. Namun, ikon tidak muncul setelah saya menambahkan <i>tag. Itu sangat menjengkelkan, sampai saya menemukan saya perlu menghapus cache. Jika Anda mengalami masalah yang sama, kawan, tekan Ctrl+F5untuk menghapus cache dan menyegarkan, dan melihat ikon mulia!
Aditya MP

2
Saya perlu menambahkanonClick="submit();"
TimP

67

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.


9
Bagi saya ini adalah yang terbaik dari kedua dunia. Anda mendapatkan gaya yang Anda inginkan, dan tidak menggunakan tautan atau javascript.
AaronLS

1
Meskipun ini tidak menerapkan gaya dan tampak hebat, itu menghentikan formulir dari yang dikirim ketika pengguna menekan masuk dalam bidang input. (Diuji hanya pada FF17)
Richard

1
Jelas solusi terbaik bagi saya. Bersulang!
Armel Larcier

14

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

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

11

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.


Saya meminta Anda untuk menjawab pertanyaan saya ini jika Anda memiliki ide tentang itu. stackoverflow.com/questions/11295378/…
Krishnaprasad Varma

8

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


7

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


2
Jadi apa yang terjadi ketika mesin pencari menjelajah situs Anda, melihat tautan yang disebut 'Hapus', memutuskan, "Oh, saya pikir saya akan mengikuti tautan itu" dan mulai mengacaukan basis data Anda? Saya selalu diberi tahu bahwa perubahan harus selalu dilakukan dengan operasi non-GET karena alasan itu.
Asfand Qazi

Dia mungkin menggunakan otorisasi untuk menghapus tautan, seperti yang dilakukan kebanyakan orang.
Noz

2
Di luar topik karena OP tidak bertanya tentang rails tetapi ... Rails memang menggunakan metode delete ketika mengintegrasikan hyperlink semacam ini melalui javascript yang tidak mencolok. Jika seseorang meminta tautan itu secara langsung, defaultnya adalah menyajikan catatan itu, bukan menghapusnya. Lihat jawaban ini untuk detail lebih lanjut: stackoverflow.com/a/2809412/252290
levous

Ini khusus tentang tombol kirim, bukan tag jangkar.
pixelearth

6

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.


Meskipun ini mungkin berhasil, tentu saja tidak seanggun menggunakan <tombol ketik = "kirim"> dan akan lebih sulit untuk dipertahankan.
Richard

4

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.


1

Saya pikir ini solusi untuk masalah Anda

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


1
Pertanyaannya adalah tentang mengirimkan
Grigory Kislin

Ini adalah bootstrap 3 - pertanyaannya mengenai format bootstrap 2, yang menggunakan format lain untuk menampilkan ikon.
Calaelen


-1

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>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.