Carattere Icona impressionante all'interno dell'elemento di input di testo

Sto cercando di inserire un'icona utente nel campo di immissione del nome utente.

Ho provato una delle soluzioni dalla domanda simile sapendo che la background-imageproprietà non funzionerà poiché Font Awesome è un font.

Quello che segue è il mio approccio e non riesco a visualizzare l'icona.

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

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

Ho la faccia del carattere dichiarata nel css fantastico del carattere predefinito, quindi non ero sicuro se l'aggiunta della famiglia di caratteri sopra fosse l'approccio giusto.

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

Hai ragione. : before e: after lo pseudo contenuto non è concepito per funzionare su contenuti imge inputelementi sostituiti . L'aggiunta di un elemento a capo e la dichiarazione di una famiglia di caratteri è una delle possibilità, così come l'utilizzo di un'immagine di sfondo. O forse un testo segnaposto html5 soddisfa le tue esigenze:

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

I browser che non supportano l'attributo segnaposto lo ignoreranno semplicemente.

AGGIORNARE

La prima contenuto selettore seleziona l'ingresso: input[type="text"]:before. È necessario selezionare l'involucro: .wrapper:before. Vedi http://jsfiddle.net/allcaps/gA4rx/ . Ho anche aggiunto il suggerimento segnaposto in cui il wrapper è ridondante.

.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>

Ricaderci

Font Awesome utilizza l'Area di utilizzo privato Unicode (PUA) per memorizzare le icone. Altri caratteri non sono presenti e tornano ai valori predefiniti del browser. Dovrebbe essere lo stesso di qualsiasi altro input. Se si definisce un carattere sugli elementi di input, fornire lo stesso carattere del fallback per le situazioni in cui si utilizza un'icona. Come questo:

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

Produzione:

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>

(O)

Produzione:

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>

Potresti usare un wrapper. All'interno del wrapper, aggiungi il fantastico elemento font i e l' inputelemento.

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

quindi imposta la posizione del wrapper su relative:

.wrapper { position: relative; }

e quindi imposta la iposizione dell'elemento su assoluta, e imposta la posizione corretta per essa:

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

(È un trucco, lo so, ma fa il lavoro.)

Questa risposta funzionerà per te se hai bisogno che siano soddisfatte le seguenti condizioni (nessuna delle risposte attuali ha soddisfatto queste condizioni):

1. L'icona è dentro della casella di testo
2. L'icona non dovrebbe scomparire quando il testo viene inserito nell'input e il testo inserito va a destra dell'icona
3. Fare clic sull'icona dovrebbe mettere a fuoco l'input sottostante

Credo che 3 sia il numero minimo di elementi HTML per soddisfare queste condizioni:

.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>

Non c'è bisogno di programmare molto ... basta seguire i seguenti passi:

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

puoi trovare i link per Unicode ( fontawesome ) qui ...

FontAwesome Unicode per icone

Dopo aver letto varie versioni di questa domanda e aver cercato in giro, ho trovato una soluzione abbastanza pulita e priva di js. È simile alla soluzione @allcaps ma evita che il problema del carattere di input venga modificato a partire dal carattere del documento principale.

Usa l' ::input-placeholderattributo per in modo specifico il testo segnaposto. Ciò consente di utilizzare il carattere icona come carattere segnaposto e il corpo (o altro carattere) come testo di input effettivo. Attualmente è necessario specificare selettori specifici del fornitore.

Funziona bene finché non hai bisogno di una combinazione di icona e testo nell'elemento di input. In tal caso, dovrai inserire il testo segnaposto come font predefinito del browser (serif sul mio) per le parole.

Ad esempio
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';
}

Violino con selettori con prefisso browser: http://jsfiddle.net/gA4rx/78/

Si noti che è necessario definire ciascun selettore specifico del browser come regola separata. Se li combini, il browser lo ignorerà.

Ho trovato il modo più semplice usando 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>

L'ho fatto così

  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>

Il risultato è simile al seguente:

Nota a margine

Si prega di notare che sto usando Ruby on Rails, quindi il mio codice risultante sembra un po 'gonfiato. Il codice di visualizzazione in slim è in realtà molto conciso:

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

Per me, un modo semplice per avere un'icona "all'interno" di un input di testo senza dover provare a usare pseudo-elementi con unicode impressionante di font ecc., È avere l'input di testo e l'icona all'interno di un elemento wrapper che posizioneremo relativo, e quindi posizionare sia l'immissione della ricerca sia l'icona del carattere eccezionale in assoluto.

Come facciamo con le immagini di sfondo e il testo, faremmo qui. Penso che questo sia utile anche per i principianti, poiché il posizionamento CSS è qualcosa che un principiante dovrebbe imparare all'inizio del loro viaggio di programmazione, quindi il codice è facile da capire e riutilizzare.

    <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;
    }

Basandosi sul suggerimento di allcaps. Ecco il metodo di sfondo fantastico per i font con la minima quantità di 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";
}

Rendi l'icona selezionabile per mettere a fuoco all'interno dell'elemento di input di testo.

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>

Aggiungi qualsiasi icona che ti piace all'interno del <i>tag, dalla libreria Font Awesome e goditi i risultati.

<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>

puramente 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;
}

La mia soluzione era quella di avere un relativo contenitore attorno al inputper contenere l'icona. Quel contenitore esterno ha una ::aftercon l'icona desiderata, posizionata absoluteall'interno del contenitore.

HTML:

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

Codice 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;
    }
}

La mia soluzione per aggiungere un'icona di carattere fantastico all'interno dell'elemento di input. Ecco un semplice codice per aggiungere l'icona all'interno dell'elemento di input. Copia il codice qui sotto e inserisci dove vuoi aggiungere. o se vuoi cambiare l'icona, inserisci semplicemente il tuo codice icona nel <i> tag.

<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>

A volte l'icona non verrà visualizzata a causa della versione Font Awesome. Per la versione 5, il CSS dovrebbe essere

.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;
}

Modo semplice, ma è necessario il 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">

Ho provato le cose di seguito e funziona davvero bene 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>

Per funzionare con unicode o fontawesome, dovresti aggiungere un spancon classcome di seguito:

In HTML:

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

Nel 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>