Bagaimanakah saya boleh menyepadukan Ikon Hebat Font dalam medan input teks?

Integrasi Ikon Hebat Fon Dalam Medan Input Teks

Untuk membenamkan ikon Font Hebat dalam medan input nama pengguna, anda boleh mempertimbangkan CSS berikut /HTML pendekatan:

Pendekatan Pertama:

HTML:

<input name="txtName">

CSS:

.errspan {
    float: right;
    margin-right: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    color: red;
}

Pendekatan ini menggunakan elemen pseudo :selepas untuk meletakkan ikon dalam medan input.

Pendekatan Kedua:

HTML:

<div class="input-wrapper">
     <input type="text" />
</div>

CSS:

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

Pendekatan ini menggunakan div bekas untuk meletakkan ikon berbanding medan input.

Pertimbangan Tambahan:

Pastikan anda telah mengisytiharkan CSS Fon Awesome dengan betul, mengikut coretan kod yang disediakan:

@font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyepadukan Ikon Hebat Font dalam medan input teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!