Bagaimana untuk Menambah Ikon Hebat Font pada Elemen Input Teks?

Menambahkan Ikon Hebat Fon pada Elemen Input Teks

Memasukkan ikon ke dalam medan input boleh meningkatkan pengalaman pengguna dengan memberikan isyarat visual. Begini cara untuk mencapainya menggunakan ikon Font Hebat:

Kaedah 1: Kedudukan Mutlak

Untuk pendekatan ini, kami meletakkan ikon sebagai elemen yang diposisikan secara mutlak dalam medan input .

HTML:

<input type="text">

CSS:

#username {
  position: relative;
}

#username:before {
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 5px;
  content: "\f007";
}

Pastikan muka fon FontAwesome diisytiharkan dalam CSS anda.

Kaedah 2: Pembungkus Blok Sebaris

Dalam kaedah ini, kami membalut medan input dengan div dan menggunakan elemen pseudo ::selepas untuk menambah ikon.

HTML:

<div>

CSS:

.input-wrapper {
  display: inline-block;
  position: relative;
}

.input-wrapper::after {
  font-family: 'FontAwesome';
  content: '\f274';
  position: absolute;
  right: 6px;
}

Kedua-dua kaedah memerlukan CSS FontAwesome untuk dimasukkan ke dalam projek anda. Pilih pendekatan yang paling sesuai dengan keperluan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana untuk Menambah Ikon Hebat Font pada Elemen Input Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!