Bagaimana cara menambahkan glyphicon ke kotak input tipe teks? Misalnya saya ingin memiliki 'icon-user' dalam input nama pengguna, seperti ini:
Kita akan membahas Bootstrap sebentar lagi, tetapi berikut ini adalah konsep dasar CSS yang berperan untuk melakukan ini sendiri. Seperti yang ditunjukkan oleh [jenggot mangsa][jenggot menjawab], Anda dapat melakukan ini dengan CSS dengan benar-benar memposisikan ikon di dalam elemen input. Kemudian tambahkan padding ke kedua sisi sehingga teks tidak tumpang tindih dengan ikon. Jadi untuk HTML berikut:
<input type="text" class="form-control" />
Anda dapat menggunakan CSS berikut ini untuk menyelaraskan mesin terbang ke 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; }
Catatan: Ini mengasumsikan Anda menggunakan glyphicons, tetapi bekerja sama baiknya dengan font-awesome.
Untuk FA, cukup ganti.glyphicon
dengan.fa
Dengan Bootstrap:
Seperti yang ditunjukkan [buffer][jawaban buffer], ini dapat dilakukan secara native di dalam Bootstrap dengan menggunakan Validation States with Optional Icons. Ini dilakukan dengan memberikan elemen
.form-group
kelas.has-feedback
dan ikon kelas.form-control-feedback
. Contoh yang paling sederhana adalah seperti ini:
<input type="text" class="form-control" placeholder="Username" />**Pros**: * Termasuk dukungan untuk berbagai jenis formulir (Dasar, Horizontal, Inline) * Termasuk dukungan untuk ukuran kontrol yang berbeda (Default, Kecil, Besar) **Kontra**: * Tidak menyertakan dukungan untuk ikon yang rata kiri Untuk mengatasi kekurangannya, saya mengumpulkan [pull-request][pull-request] ini dengan perubahan untuk mendukung ikon rata kiri. Karena ini adalah perubahan yang relatif besar, maka ditunda sampai rilis mendatang, tetapi jika Anda membutuhkan fitur ini **hari ini**, berikut ini adalah panduan implementasi yang sederhana: Cukup sertakan [**perubahan formulir ini dalam css**][formChangs.css] (juga digarisbawahi melalui cuplikan tumpukan tersembunyi di bagian bawah)
***LESS**: alternatifnya, jika Anda [membangun melalui less][less compiler], berikut ini [perubahan formulir dalam less][formChanges.less] Kemudian, yang harus Anda lakukan adalah menyertakan kelas `.has-feedback-left` pada grup mana pun yang memiliki kelas `.has-feedback` untuk meratakan ikon ke kiri. Karena ada banyak konfigurasi html yang mungkin untuk tipe form yang berbeda, ukuran kontrol yang berbeda, set ikon yang berbeda, dan visibiltas label yang berbeda, saya membuat halaman tes yang menunjukkan set HTML yang benar untuk setiap permutasi bersama dengan demo langsung. ## [Here's a demo in Plunker][feedback plunker] [![tangkapan layar umpan balik][tangkapan layar umpan balik]][embed umpan balik] **P.S.** [frizi'saran frizi][frizi] untuk menambahkan `pointer-events: none;` telah [ditambahkan ke bootstrap][pointer PR] **Tidak menemukan apa yang Anda cari**? Coba pertanyaan serupa ini: * [Tambahkan ikon Twitter Bootstrap ke kotak Input][SO1] * [Letakkan ikon pencarian di dekat bootstrap kotak teks][SO2] ### Penambahan CSS untuk ikon umpan balik Rata 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 ada custom CSS yang diperlukan :
<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 :
Demo ini didasarkan pada contoh di Bootstrap docs. Gulir ke bawah untuk "Dengan Opsional Ikon" di sini http://getbootstrap.com/css/#forms-control-validation
Berikut'alternatif CSS saja. Saya mengatur ini untuk bidang pencarian untuk mendapatkan efek yang mirip dengan Firefox (&; seratus aplikasi lainnya.)
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;
}
Berikut adalah bagaimana saya melakukannya hanya menggunakan default CSS bootstrap 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 ini adalah tampilannya:
Ini 'cheat' akan bekerja dengan efek samping yang glyphicon kelas akan mengubah jenis huruf untuk input kontrol.
[Biola](
)<input class="form-control glyphicon" type="search" placeholder=""/>
Jika anda ingin menyingkirkan efek samping anda dapat menghapus "glyphicon" kelas dan tambahkan CSS berikut (mungkin Ada cara yang lebih baik untuk gaya pengganti pseudo element dan I've hanya diuji pada Chrome).
[Biola](http://jsfiddle.net/WK3Q6/57/)
.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 bahkan cleaner solusi:
[Biola](http://jsfiddle.net/WK3Q6/59/)
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=" search" />
<input class="form-control glyphicon" type="text" placeholder=" username" />
<input class="form-control glyphicon" type="password" placeholder=" password" />
Hal ini dapat dilakukan dengan menggunakan kelas-kelas dari situs resmi bootstrap 3.x versi, tanpa css kustom.
gunakan input-group-addon
sebelum tag input, dalam input-kelompok
kemudian menggunakan glyphicons, berikut ini 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>
Berikut adalah output
Untuk menyesuaikan lebih lanjut menambahkan beberapa baris custuom css kustom anda sendiri.file css (menyesuaikan padding 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-addon
transparan dan membuat kiri gradiant dari tag input nol input akan memiliki penampilan mulus. Berikut ini adalah disesuaikan output
Berikut ini adalah jsbin contoh
Ini akan memecahkan css kustom masalah overlaping dengan lables, keselarasan saat menggunakan input-lg dan fokus pada masalah tab.
Jika anda menggunakan Fontawesome anda dapat melakukan ini :
<input type="text" style="font-family:Arial, FontAwesome" placeholder="" />
Hasil
Daftar lengkap unicode dapat ditemukan di lengkap Font yang Mengagumkan 4.6.3 ikon referensi
Berikut ini adalah non-bootstrap solusi yang membuat anda markup sederhana dengan menanamkan citra representasi dari glyphicon langsung dalam CSS menggunakan base64 URL encoding.
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">
Berikut ini's cara lain untuk melakukannya dengan menempatkan glyphicon menggunakan :sebelum
pseudo element di CSS.
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>
Menggunakan CSS (Bootstrap 3.x dan Webkit-based browser 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 @Frizi mengatakan, kita harus menambahkan pointer-acara: none;
sehingga kursor doesn't mengganggu fokus input. Semua yang lain aturan CSS untuk centering dan menambahkan jarak yang tepat.
Hasilnya:
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">
Mengambil form-kontrol
, dan menambahkan adalah-sah
untuk kelasnya. Perhatikan bagaimana mengendalikan berubah menjadi hijau, tapi yang lebih penting, perhatikan ikon tanda centang di sebelah kanan kontrol? Ini adalah apa 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>
Saya juga punya keputusan untuk hal 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>
Sehingga untuk menambahkan pengguna ikon, hanya menambahkan 
ke tempat
atribut, atau di mana pun anda inginkan.
Anda mungkin ingin memeriksa 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=" placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value=" value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value=" submit-button" style="font-family: 'Glyphicons Halflings', Arial">
Don't lupa untuk mengatur input's font untuk Glyphicon satu, dengan menggunakan kode berikut:
font-family: 'Glyphicons Halflings', Arial
, di mana Arial adalah huruf dari teks biasa input.
Anda seharusnya dapat melakukan ini dengan kelas bootstrap yang sudah 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>
Edit Ikon direferensikan melalui kelas icon-user
. Jawaban ini ditulis pada saat Bootstrap versi 2. Anda dapat melihat referensinya di halaman berikut: http://getbootstrap.com/2.3.2/base-css.html#images
Jika Anda cukup beruntung untuk hanya membutuhkan browser modern: coba css transform translate. Ini tidak memerlukan pembungkus, dan dapat disesuaikan sehingga anda dapat mengijinkan lebih banyak jarak bagi masukan[tipe=nomor] untuk datang ke pemintal masukan, atau memindahkannya ke kiri handle select handle.
@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>