Bagaimana untuk Menambah Ikon pada Input Carian dalam Bootstrap?

Input Carian dengan Ikon Menggunakan Bootstrap

Dalam Bootstrap 4, anda tidak lagi boleh menggunakan Glyphicons untuk ikon. Sebaliknya, anda boleh sama ada menetapkan ikon sebagai latar belakang atau menggunakan ikon Font Hebat dengan kedudukan tersuai.

Imej Latar Belakang:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

Kaedah ini, walau bagaimanapun, mungkin tidak sentiasa berfungsi dengan pasti.

Ikon Hebat Fon dengan Kedudukan Tersuai:

.input-group {
  position: relative;
}

.fa-search {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

Bootstrap 5:

Dalam Bootstrap 5, anda boleh menggunakan komponen kumpulan input untuk menambahkan ikon pada input carian dengan mudah.

<div>

Pendekatan Alternatif:

• Input-Kumpulan dengan Util Sempadan: Gunakan kelas sempadan untuk mencipta sempadan di sekeliling input dan ikon.

<div>

• Input-Kumpulan dengan Teks:

<div>

Atas ialah kandungan terperinci Bagaimana untuk Menambah Ikon pada Input Carian dalam Bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!