Bagaimana saya bisa menambahkan glyphicon ke kotak input jenis teks? Misalnya saya ingin memiliki 'ikon-pengguna' di input nama pengguna, sesuatu seperti ini:

Tanpa Bootstrap:

Kita akan sampai di Bootstrap sebentar lagi, tetapi inilah konsep mendasar CSS yang sedang dimainkan untuk melakukannya sendiri. Seperti yang ditunjukkan oleh jenggot , Anda dapat melakukan ini dengan CSS dengan benar-benar menempatkan ikon di dalam elemen input. Kemudian tambahkan padding di kedua sisi sehingga teks tidak tumpang tindih dengan ikon.

Jadi untuk HTML berikut:

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

Anda dapat menggunakan CSS berikut untuk menyelaraskan glyphs kiri dan kanan:

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

Demo di Plunker

Catatan : Ini menganggap Anda menggunakan glyphicons , tetapi berfungsi sama baiknya dengan font-mengagumkan .
Untuk FA, ganti saja .glyphicondengan.fa

Dengan Bootstrap:

Seperti yang ditunjukkan buffer , ini dapat dilakukan secara asli di dalam Bootstrap dengan menggunakan Status Validasi dengan Ikon Opsional . Ini dilakukan dengan memberikan .form-groupelemen kelas .has-feedbackdan ikon kelas .form-control-feedback.

Contoh paling sederhana adalah sekitar seperti ini:

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

Pro :

• Termasuk dukungan untuk berbagai jenis formulir (Basic, Horizontal, Inline)
• Termasuk dukungan untuk berbagai ukuran kontrol (Default, Kecil, Besar)

Cons :

• Tidak termasuk dukungan untuk ikon pelurusan kiri

Untuk mengatasi kontra, saya mengumpulkan permintaan tarik ini dengan perubahan untuk mendukung ikon rata kiri. Karena ini adalah perubahan yang relatif besar, ia telah ditunda hingga rilis di masa mendatang, tetapi jika Anda memerlukan fitur ini hari ini , berikut adalah panduan implementasi yang sederhana:

Cukup sertakan perubahan bentuk ini di css (juga diuraikan melalui snipet tumpukan tersembunyi di bagian bawah)
_{* KURANG : jika Anda membuat melalui kurang , inilah formulir perubahan kurang}

Kemudian, yang harus Anda lakukan adalah memasukkan kelas .has-feedback-leftpada grup apa pun yang memiliki kelas .has-feedbackuntuk menyelaraskan ikon.

Karena ada banyak kemungkinan konfigurasi html pada tipe formulir yang berbeda, ukuran kontrol yang berbeda, set ikon yang berbeda, dan visibilitas label yang berbeda, saya membuat halaman pengujian yang menunjukkan set HTML yang benar untuk setiap permutasi bersama dengan demo langsung.

Ini demo di Plunker

PS saran frizi ini menambahkan pointer-events: none;telah ditambahkan ke bootstrap

Tidak menemukan apa yang Anda cari ? Coba pertanyaan serupa ini:

• Tambahkan ikon Bootstrap Twitter ke kotak Input
• Letakkan ikon pencarian di dekat bootstrap kotak teks

Penambahan CSS untuk ikon umpan balik Aligned Kiri

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}

The resmi Metode. Tidak diperlukan CSS khusus:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

DEMO: http://jsfiddle.net/LS2Ek/1/

Demo ini didasarkan pada contoh di Bootstrap docs. Gulir ke bawah ke "Dengan Ikon Opsional" di sini http://getbootstrap.com/css/#forms-control-validation

Inilah alternatif khusus CSS. Saya mengatur ini untuk bidang pencarian untuk mendapatkan efek yang mirip dengan Firefox (& seratus aplikasi lainnya.)

Ini biola .

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

Inilah cara saya melakukannya hanya menggunakan bootstrap CSS default v3.3.1:

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

Dan begini tampilannya:

'Cheat' ini akan bekerja dengan efek samping bahwa kelas glyphicon akan mengubah font untuk kontrol input.

Biola

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

Jika Anda ingin menghilangkan efek samping, Anda dapat menghapus kelas "glyphicon" dan menambahkan CSS berikut (Mungkin ada cara yang lebih baik untuk menata elemen pseudo placeholder dan saya hanya menguji di Chrome).

Biola

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

Mungkin solusi yang lebih bersih:

Biola

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

Itu dapat dilakukan dengan menggunakan kelas dari versi bootstrap 3.x resmi, tanpa css khusus.

Gunakan input-group-addonsebelum tag input, di dalam input-groupkemudian gunakan salah satu dari glyphicons, di sini adalah kode

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

Ini outputnya

Untuk mengkustomisasi lebih lanjut, tambahkan beberapa baris custom css ke file custom.css Anda sendiri (sesuaikan bantalan jika diperlukan)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

Dengan membuat latar belakang input-group-addontransparan dan membuat gradien kiri dari tag input ke nol input akan memiliki tampilan yang mulus. Ini adalah output yang disesuaikan

Ini adalah contoh jsbin

Ini akan menyelesaikan masalah custom css yang tumpang tindih dengan label, perataan saat menggunakan input-lgdan fokus pada masalah tab.

Berikut ini adalah solusi non-bootstrap yang membuat markup Anda sederhana dengan menanamkan representasi gambar glyphicon langsung di CSS menggunakan pengkodean URI base64.

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}

<input class="search">

Jika Anda menggunakan Fontawesome, Anda dapat melakukan ini:

<input type="text" style="font-family:Arial, FontAwesome"  placeholder="&#xf007;" />

Hasil

Daftar lengkap unicode dapat ditemukan di referensi ikon The Awesome Font 4.6.3 lengkap

Berikut cara lain untuk melakukannya dengan menempatkan glyphicon menggunakan :beforeelemen pseudo di CSS.

Demo bekerja di jsFiddle

Untuk HTML ini:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

Gunakan CSS ini ( Bootstrap 3.x dan browser berbasis Webkit yang kompatibel )

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

Seperti yang dikatakan @Frizi, kita harus menambahkan pointer-events: none; agar kursor tidak mengganggu fokus input. Semua aturan CSS lainnya adalah untuk memusatkan dan menambahkan spasi yang tepat.

Hasil:

Anda dapat menggunakan Unicode HTML-nya

Jadi untuk menambahkan ikon pengguna, cukup tambahkan keplaceholder atribut, atau di mana pun Anda inginkan.

Anda mungkin ingin memeriksa lembar contekan ini .

Contoh:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

Jangan lupa untuk mengatur font input ke font Glyphicon, menggunakan kode berikut:, di font-family: 'Glyphicons Halflings', Arialmana Arial adalah font teks biasa dalam input.

Saya juga punya satu keputusan untuk kasus ini dengan Bootstrap 3.3.5:

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

Pada input saya punya sesuatu seperti ini:

Diuji dengan Bootstrap 4.

Ambil a form-control, dan tambahkan is-validke kelasnya. Perhatikan bagaimana kontrol berubah hijau, tetapi yang lebih penting, perhatikan ikon tanda centang di sebelah kanan kontrol? Ini yang kita inginkan!

Contoh:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>

Jika Anda cukup beruntung hanya membutuhkan browser modern: coba css transform translate. Ini tidak memerlukan pembungkus, dan dapat dikustomisasi sehingga Anda dapat mengizinkan lebih banyak spasi untuk input [type = number] untuk mengakomodasi input spinner, atau memindahkannya ke kiri pegangan.

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110

Anda harus dapat melakukan ini dengan kelas bootstrap yang ada dan sedikit gaya kustom.

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

Sunting Ikon direferensikan melalui icon-userkelas. Jawaban ini ditulis pada saat Bootstrap versi 2. Anda dapat melihat referensi di halaman berikut: http://getbootstrap.com/2.3.2/base-css.html#images