Icône Font Awesome à l'intérieur de l'élément d'entrée de texte

J'essaie d'insérer une icône d'utilisateur dans le champ de saisie du nom d'utilisateur.

J'ai essayé l'une des solutions de la question similaire en sachant que la background-imagepropriété ne fonctionnera pas puisque Font Awesome est une police.

Voici mon approche et je ne parviens 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é la police de caractères dans la police par défaut.

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

Vous avez raison. : avant et: après le pseudo contenu n'est pas destiné à fonctionner sur le contenu remplacé comme les éléments imget input. L'ajout d'un élément d'habillage et la déclaration d'une famille de polices est l'une des possibilités, tout comme l'utilisation d'une image d'arrière-plan. Ou peut-être qu'un texte d'espace réservé html5 répond à vos besoins:

<input name="username" placeholder="&#61447;">

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

METTRE À JOUR

Le contenu avant sélecteur sélectionne l'entrée: input[type="text"]:before. Vous devez sélectionner l'emballage: .wrapper:before. Voir http://jsfiddle.net/allcaps/gA4rx/ . J'ai également ajouté la suggestion d'espace réservé où le wrapper est redondant.

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

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

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

<p class="wrapper"><input placeholder="&#61447; Username"></p>

Se retirer

Font Awesome utilise la zone d'utilisation privée Unicode (PUA) pour stocker les icônes. Les autres caractères ne sont pas présents et reviennent à la valeur par défaut du navigateur. Cela devrait être le même que pour toute autre entrée. Si vous définissez une police sur les éléments d'entrée, fournissez la même police de secours pour les situations où nous utilisons une icône. Comme ça:

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

Production:

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Ou)

Production:

HTML:

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

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

Vous pouvez utiliser un wrapper. Dans le wrapper, ajoutez l'élément font awesome i et l' inputélément.

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

puis définissez la position du wrapper sur relative:

.wrapper { position: relative; }

puis définissez la iposition de l' élément sur absolue, et définissez-lui l'emplacement correct:

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

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

Cette réponse fonctionnera pour vous si vous avez besoin des conditions suivantes remplies (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 le texte est entré dans l'entrée, et le texte entré va à droite de l'icône
3. Cliquez sur l'icône pour mettre en évidence l'entrée sous-jacente

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); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

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

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

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

FontAwesome Unicode pour les icônes

Après avoir lu différentes versions de cette question et effectué des recherches, j'ai trouvé une solution assez claire et sans js. C'est similaire à la solution @allcaps mais évite le problème de la modification de la police d'entrée par rapport à la police principale du document.

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

Cela fonctionne bien tant que vous n'avez pas besoin d'une combinaison d'icône et de texte dans votre élément d'entrée. Si vous le faites, vous devrez accepter que le texte de l'espace réservé soit la police par défaut du navigateur (empattement simple sur le mien) pour les mots.

Par exemple
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

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

Violon avec les sélecteurs préfixés du 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.

J'ai trouvé le moyen le plus simple d'utiliser bootstrap 4.

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>

J'ai réussi ça comme ça

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

<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

Le résultat ressemble à ceci:

Note d'accompagnement

Veuillez noter que j'utilise Ruby on Rails, donc mon code résultant semble un peu explosé. Le code de vue dans 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

Pour moi, un moyen simple d'avoir une icône "dans" une entrée de texte sans avoir à essayer d'utiliser des pseudo-éléments avec une police géniale unicode, etc., est d'avoir l'entrée de texte et l'icône dans un élément wrapper que nous positionnerons par rapport, puis positionnez à la fois l'entrée de recherche et l'icône de police géniale absolue.

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 également bon 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, de sorte que le code est facile à comprendre et à réutiliser.

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

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

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

S'appuyant sur la suggestion allcaps. Voici la méthode d'arrière-plan géniale avec le moins de HTML:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}

Faites une icône cliquable pour se concentrer à l'intérieur de l'élément d'entrée de texte.

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

Ajoutez simplement l'icône de votre choix à l'intérieur de la <i>balise, à partir de la bibliothèque Font Awesome et profitez des résultats.

<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

purement CSS

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

Ma solution était d'avoir un conteneur relatif autour du inputpour contenir l'icône. Ce conteneur externe a un ::afteravec l'icône souhaitée, positionné absoluteà l'intérieur du conteneur.

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

Code SASS:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

Ma solution pour ajouter une icône de police géniale à l'intérieur de l'élément d'entrée. Voici un code simple pour ajouter une icône à l'intérieur de l'élément d'entrée. Copiez simplement le code ci-dessous et placez-le là où vous souhaitez l'ajouter. ou si vous voulez changer l'icône, mettez simplement votre code d'icône dans la <i> balise.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>

Parfois, l'icône n'apparaîtra pas en raison de la version Font Awesome. Pour la version 5, le css doit être

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

Moyen simple, mais vous avez besoin de bootstrap

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">

J'ai essayé les trucs ci-dessous et cela fonctionne vraiment bien HTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}

<div >

    <input class="hai" placeholder="Search term">

</div>

Pour travailler avec unicode ou fontawesome, vous devez ajouter un spanavec classcomme ci-dessous:

En HTML:

<span class="button1 search"></span>
<input name="username">

En CSS:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;           
}

<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>