Comment ajouter des icônes Font Awesome aux éléments d'entrée ?

Ajout d'icônes Font Awesome aux éléments de saisie

L'incorporation d'icônes dans les champs de saisie améliore l'expérience utilisateur et transmet les informations efficacement. Bien que les images d'arrière-plan puissent sembler une approche intuitive, cette technique est inefficace pour les icônes Font Awesome car elles reposent sur le rendu des polices.

Pour surmonter cette limitation, envisagez les solutions HTML et CSS suivantes :

Méthode 1 :

<input name="txtName">

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

Cette approche positionne l'icône à l'aide d'un élément avec la classe fa-info-circle. Le CSS applique des marges et un placement appropriés.

Méthode 2 :

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

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

Dans cette méthode, l'icône est ajoutée à l'aide d'un pseudo-élément ( : :after) attaché au conteneur d’entrée (

). La propriété content spécifie le caractère de l'icône et le positionnement est obtenu avec un positionnement absolu.

Ces techniques fournissent des moyens efficaces d'incorporer des icônes Font Awesome dans les éléments d'entrée, améliorant à la fois l'attrait esthétique et la convivialité de vos formulaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html for while using class Property this background input

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn