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

Après avoir lu différentes versions de cette question et avoir cherché un peu partout, j'ai trouvé une solution assez propre, sans js. C'est similaire à la solution de @allcaps mais évite le problème du changement de la police d'écriture de l'entrée par rapport à la police d'écriture du document principal.

Utilisez l'attribut ::input-placeholder pour styliser spécifiquement le texte de l'espace réservé. Cela vous permet d'utiliser votre police d'icônes comme police de l'espace réservé et votre corps (ou une autre police) comme texte d'entrée réel. Actuellement, vous devez spécifier des sélecteurs spécifiques au vendeur.

Cela fonctionne bien tant que vous n'avez pas besoin d'une combinaison d'icônes et de texte dans votre élément d'entrée. Si c'est le cas, vous devrez vous contenter du texte de l'espace réservé par défaut du navigateur (c'est-à-dire en sérif sur le mien) pour les mots.

Par exemple
HTML

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

Travailler avec des sélecteurs spécifiques au navigateur: http://jsfiddle.net/gA4rx/78/

Notez que vous devez définir chaque sélecteur spécifique au navigateur comme une règle distincte. Si vous les combinez, le navigateur l'ignorera.

Answer 2

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

Answer 3

J'ai trouvé le moyen le plus simple en utilisant bootstrap 4.

Answer 4

J'ai réalisé cela de cette manière

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }

Le résultat ressemble à ceci:

Note latérale

Veuillez noter que j'utilise Ruby on Rails, donc mon code final semble un peu gonflé. Le code de la vue en slim est en fait très concis:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false

Answer 5

Pour moi, une façon facile d'avoir une icône "à l'intérieur" d'un champ de texte sans avoir à essayer d'utiliser des pseudo-éléments avec des unicodes de polices géniales, etc., est d'avoir le champ de texte et l'icône à l'intérieur d'un élément conteneur que nous positionnerons en relatif, puis de positionner à la fois le champ de recherche et l'icône de police géniale en absolu.

De la même manière que nous le faisons avec les images d'arrière-plan et le texte, nous le ferions ici. Je pense que c'est bon aussi pour les débutants, car le positionnement CSS est quelque chose qu'un débutant devrait apprendre au début de son parcours de codage, donc le code est facile à comprendre et à réutiliser.

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }