Usa l'icona Carattere impressionante nel segnaposto

È possibile utilizzare Font Awesome Icon in un segnaposto? Ho letto dove l'HTML non è consentito in un segnaposto. C'è una soluzione alternativa?

placeholder="<i class='icon-search'></i>"

Non puoi aggiungere un'icona e un testo perché non puoi applicare un carattere diverso a una parte di un segnaposto, tuttavia, se sei soddisfatto solo di un'icona, allora può funzionare. Le icone FontAwesome sono solo caratteri con un font personalizzato (puoi guardare il Cheatsheet FontAwesome per il carattere Unicode di escape nella contentregola. Nel codice sorgente meno si trova in variabili.less La sfida sarebbe scambiare i caratteri quando l'input è non vuoto. Combinalo con jQuery in questo modo .

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/>
  </div>
</form>

Con questo CSS:

input.empty {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

E questo (semplice) jQuery

$('#iconified').on('keyup', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Tuttavia, la transizione tra i caratteri non sarà fluida.

Se stai usando FontAwesome 4.7questo dovrebbe essere sufficiente:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<input type="text" placeholder="&#xF002; Search" style="font-family:Arial, FontAwesome" />

Un elenco di codici esadecimali può essere trovato nel cheatsheet Font Awesome . Tuttavia, nell'ultimo FontAwesome 5.0 questo metodo non funziona (anche se si utilizza l'approccio CSS combinato con l'aggiornamento font-family).

Ho risolto con questo metodo:

Nel CSS ho usato questo codice per la classe fontAwesome :

.fontAwesome {
  font-family: 'Helvetica', FontAwesome, sans-serif;
}

Nell'HTML ho aggiunto la classe fontawesome e il codice dell'icona fontawesome all'interno del segnaposto:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0;  insert email address ..." value="">

Puoi vedere in CodePen .

La risposta di @ Elli può funzionare in FontAwesome 5, ma richiede l'utilizzo del nome del carattere corretto e l'utilizzo del CSS specifico per la versione desiderata. Ad esempio, quando si utilizza FA5 Free, non sono riuscito a farlo funzionare se includessi all.css, ma funzionava bene se includessi solid.css:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css">

<input type="text" placeholder="&#xF002; Search" style="font-family: Arial, 'Font Awesome 5 Free'" />

Per FA5 Pro il nome del carattere è "Font Awesome 5 Pro"

Dove supportato, puoi usare lo ::input-placeholderpseudoselettore combinato con ::before.

Guarda un esempio su:

http://codepen.io/JonFabritius/pen/nHeJg

Stavo solo lavorando su questo e mi sono imbattuto in questo articolo, da cui ho modificato questa roba:

http://davidwalsh.name/html5-placeholder-css

Sto usando Ember (versione 1.7.1) e avevo bisogno di associare il valore dell'input e avere un segnaposto che fosse un'icona FontAwesome. L'unico modo per associare il valore in Ember (che io sappia) è utilizzare l'helper integrato. Ma questo causa l'escape del segnaposto, "& # xF002" viene visualizzato proprio così, testo.

Se stai usando Ember o no, devi impostare il CSS del segnaposto dell'input per avere una famiglia di caratteri di FontAwesome. Questo è SCSS (usando Bourbon per lo stile del segnaposto ):

    input {
      width:96%;
      margin:5px 2%;
      padding:0 8px;
      border:1px solid #444;
      border-radius: 14px;
      background: #fff;
      @include placeholder {
        font-family: 'FontAwesome', $gotham;
      }
    }

Se stai usando solo il manubrio, come è stato detto prima puoi semplicemente impostare l'entità html come segnaposto:

<input id="listFilter" placeholder="&#xF002;" type="text">

Se stai usando Ember, associa il segnaposto a una proprietà del controller che ha il valore Unicode.

nel modello:

{{text-field
  id="listFilter"
  placeholder=listFilterPlaceholder
  value=listFilter}}

sul controller:

listFilter: null,
listFilterPlaceholder: "\uf002"

E il valore vincolante funziona bene!

Usa placeholder=""nel tuo input. Puoi trovare unicode nella pagina FontAwesome http://fontawesome.io/icons/ . Ma devi assicurarti di aggiungere il style="font-family: FontAwesome;"tuo input.

Lo faccio aggiungendo una fa-placeholderclasse al testo di input:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

quindi, in CSS aggiungi semplicemente questo:

.fa-placholder { font-family: "FontAwesome"; }

Funziona bene per me.

Aggiornare:

Per cambiare il carattere mentre l'utente digita il testo immesso, aggiungi il tuo carattere dopo il carattere fantastico

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Chiunque si interroghi su un Font Awesome 5 un'implementazione di :

Non specificare una famiglia di caratteri "Font Awesome 5" generale, devi terminare in modo specifico con il ramo di icone con cui stai lavorando. Qui sto usando il ramo "Marche" per esempio.

<input style="font-family:'Font Awesome 5 Brands' !important" 
       type="text" placeholder="&#xf167">

Maggiori dettagli Usa l'icona Font Awesome (5) nel testo segnaposto di input

Ignorando jQuery questo può essere fatto usando ::placeholderun elemento di input.

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control name" placeholder="&#xF002;"/>
  </div>
</form>

La parte CSS

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] }

input.name{ font-family:[font family you want to specify] }

LA PARTE MIGLIORE: Puoi avere diverse famiglie di caratteri per segnaposto e testo

So che questa domanda è molto vecchia. Ma non ho visto nessuna risposta semplice come usavo una volta.

Devi solo aggiungere la fasclasse all'input e inserire un esadecimale valido in questo caso &#xf002per il glifo di Font-Awesome come qui<input type="text" class="fas" placeholder="&#xf002" />

Puoi trovare l'unicode di ogni glifo nel web ufficiale qui .

Questo è un semplice esempio, non è necessario css o javascript.

input {
  padding: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<form role="form">
  <div class="form-group">
    <input type="text" class="fas" placeholder="&#xf002" />
  </div>
</form>

C'è qualche leggero ritardo e jank quando il carattere cambia nella risposta fornita da Jason. L'utilizzo dell'evento "change" invece di "keyup" risolve questo problema.

$('#iconified').on('change', function() {
    var input = $(this);
    if(input.val().length === 0) {
        input.addClass('empty');
    } else {
        input.removeClass('empty');
    }
});

Ho aggiunto sia il testo che l'icona insieme in un segnaposto.

placeholder="Edit   "

CSS:

font-family: FontAwesome,'Merriweather Sans', sans-serif;

Se puoi / vuoi usare Bootstrap la soluzione sarebbe input-groups:

<div class="input-group">
 <div class="input-group-prepend">
  <span class="input-group-text"><i class="fa fa-search"></i></span>
  </div>
 <input type="text" class="form-control" placeholder="-">
</div>

Assomiglia a questo: input con testo anteposto e simbolo di ricerca

Ho risolto il problema in modo leggermente diverso e funziona con qualsiasi icona FA tramite codice html. Invece di tutte queste difficoltà con il segnaposto, la mia soluzione è:

1. Per posizionare un'icona nel solito modo

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="Some text">

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;
}
.block__input {
  padding: some-corrections;
}

2. Quindi regola il testo del segnaposto (è personale per tutti, nel mio caso un'icona era appena prima del testo)

HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder="    Some text"...

3. Ecco il problema che un'icona è sopra il nostro input e blocca il cursore per fare clic, quindi dovremmo aggiungere un'altra riga nel nostro CSS

CSS
.block__icon {
  position: absolute;
  margin: some-corrections;

  /* The new line */
  pointer-events: none;
}

4. Ma un'icona non scompare insieme al segnaposto, quindi è necessario correggerla. E anche questa è la versione finale della mia soluzione:

HTML
<i class="fas fa-icon block__icon"></i>
<input type="text" name="name" class="block__input" placeholder="    Some text">

CSS
.block__icon {
  position: absolute;
  z-index: 2; /* New line */
  margin: some-corrections;
}
.block__input {
  position: relative; /* New line */
  z-index: 2; /* New line */
  padding: some-corrections;
}
/* New */
.block__input:placeholder-shown {
    z-index: 1;
}

È più difficile di quanto pensassi prima, ma spero di aver aiutato qualcuno in questo.

Codepen: https://codepen.io/dzakh/pen/YzKqJvy

La soluzione Teocci è tanto semplice quanto può essere, quindi, non è necessario aggiungere alcun CSS, basta aggiungere class = "fas" per Font Awesome 5, poiché aggiunge la corretta dichiarazione del font CSS all'elemento.

Ecco un esempio per la casella di ricerca all'interno della barra di navigazione Bootstrap, con l'icona di ricerca aggiunta sia al gruppo di input che al segnaposto (per motivi di dimostrazione, ovviamente, nessuno li userebbe entrambi allo stesso tempo). Immagine: https://i.imgur.com/v4kQJ77.png "> Codice:

<form class="form-inline my-2 my-lg-0">
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
        </div>
        <input type="text" class="form-control fas text-right" placeholder="&#xf002;" aria-label="Search string">
        <div class="input-group-append">
            <button class="btn btn-success input-group-text bg-success text-white border-0">Search</button>
        </div>
    </div>
</form>

A volte soprattutto rispondi non sveglia, quando puoi usare il trucco sotto

.form-group {
  position: relative;
}

input {
  padding-left: 1rem;
}

i {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<form role="form">
  <div class="form-group">
    <input type="text" class="form-control empty" id="iconified" placeholder="search">
    <i class="fas fa-search"></i>
  </div>
</form>