Maison > interface Web > tutoriel CSS > Comment puis-je intégrer des icônes Font Awesome dans un champ de saisie de texte ?

Comment puis-je intégrer des icônes Font Awesome dans un champ de saisie de texte ?

DDD
Libérer: 2024-11-17 13:02:02
original
749 Les gens l'ont consulté

How can I integrate Font Awesome Icons within a text input field?

Intégration de l'icône Font Awesome dans le champ de saisie de texte

Pour intégrer une icône Font Awesome dans un champ de saisie de nom d'utilisateur, vous pouvez envisager le CSS suivant /Approches HTML :

Premier Approche :

HTML :

<input name="txtName">
Copier après la connexion

CSS :

.errspan {
    float: right;
    margin-right: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 2;
    color: red;
}
Copier après la connexion

Cette approche utilise les : après le pseudo-élément pour positionner l'icône dans le champ de saisie.

Deuxième Approche :

HTML :

<div class="input-wrapper">
     <input type="text" />
</div>
Copier après la connexion

CSS :

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

Cette approche utilise un conteneur div pour positionner l'icône par rapport au champ de saisie.

Supplémentaire Considérations :

Assurez-vous d'avoir correctement déclaré le CSS Font Awesome, conformément à l'extrait de code fourni :

@font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&amp;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');
 }
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal