Icône Font Awesome à l'intérieur d'un élément de saisie de texte

Question

Je essaie d'insérer une icône utilisateur à l'intérieur du champ de saisie du nom d'utilisateur.

J'ai essayé l'une des solutions de la question similaire sachant que la propriété background-image ne fonctionnera pas car Font Awesome est une police de caractères.

Voici mon approche et je n'arrive pas à afficher l'icône.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

J'ai déclaré le font-face dans le fichier CSS par défaut de Font Awesome donc je n'étais pas sûr si ajouter font-family ci-dessus était la bonne approche.

 @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');
 }

Answer 1

Sortie :

HTML :

CSS :

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

(Ou)

Sortie :

HTML :

CSS :

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

Answer 2

Vous avez raison. Le contenu pseudo :before et :after n'est pas destiné à fonctionner sur un contenu remplacé comme les éléments img et input. Ajouter un élément enveloppant et déclarer une font-family est l'une des possibilités, tout comme utiliser une image de fond. Ou peut-être qu'un texte d'espace réservé html5 convient à vos besoins :

Les navigateurs qui ne prennent pas en charge l'attribut de texte d'espace réservé l'ignoreront simplement.

MISE À JOUR

Le sélecteur de contenu avant sélectionne l'entrée : input[type="text"]:before. Vous devriez sélectionner l'enveloppe : .wrapper:before. Voir http://jsfiddle.net/allcaps/gA4rx/.

.wrapper input[type="text"] {
        position: relative; 
    }

    input { font-family: 'FontAwesome'; } /* Cela concerne le texte d'espace réservé */

    .wrapper:before {
        font-family: 'FontAwesome';
        color:red;
        position: relative;
        left: -5px;
        content: "\f007";
    }

Alternative

Font Awesome utilise la zone d'utilisation privée Unicode (PUA) pour stocker les icônes. D'autres caractères ne sont pas présents et basculent sur la valeur par défaut du navigateur. Cela devrait être le même que pour tout autre champ de saisie. Si vous définissez une police sur les éléments de saisie, fournissez la même police en cas de situation où vous utilisez une icône. Comme ceci :

input { font-family: 'FontAwesome', VotrePolice; }

Answer 3

Cette réponse fonctionnera pour vous si vous avez besoin que les conditions suivantes soient satisfaites (aucune des réponses actuelles ne remplit ces conditions) :

1. L'icône est à l'intérieur de la zone de texte
2. L'icône ne doit pas disparaître lorsque du texte est saisi dans l'entrée, et le texte saisi va à droite de l'icône
3. En cliquant sur l'icône, l'entrée sous-jacente doit être mise au premier plan

Je crois que 3 est le nombre minimal d'éléments HTML pour satisfaire ces conditions :

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Garder l'icône au centre de l'entrée, quel que soit la hauteur de l'entrée */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

Answer 4

Vous pourriez utiliser un conteneur. À l'intérieur du conteneur, ajoutez l'élément d'icône de police impressionnante i et l'élément input.

ensuite, définissez la position du conteneur sur relative:

.wrapper { position: relative; }

et ensuite définissez la position de l'élément i sur absolue, et définissez le bon emplacement pour celui-ci:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(C'est un hack, je le sais, mais ça fonctionne.)

Answer 5

Pas besoin de coder beaucoup... il suffit de suivre les étapes suivantes:

vous pouvez trouver les liens vers Unicode (fontawesome) ici...

FontAwesome Unicode pour les icônes