Utilice el icono Font Awesome en el marcador de posición

¿Es posible utilizar Font Awesome Icon en un marcador de posición? Leí dónde no se permite HTML en un marcador de posición. ¿Existe alguna solución?

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

No puede agregar un ícono y texto porque no puede aplicar una fuente diferente a parte de un marcador de posición; sin embargo, si está satisfecho con solo un ícono, entonces puede funcionar. Los íconos de FontAwesome son solo caracteres con una fuente personalizada (puede buscar en la hoja de referencia de FontAwesome el carácter Unicode de escape en la contentregla. En la menor cantidad de código fuente que se encuentra en variables.less El desafío sería intercambiar las fuentes cuando la entrada es no vacíe. Combínalo con jQuery como este .

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

Con este CSS:

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

Y este jQuery (simple)

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

Sin embargo, la transición entre fuentes no será fluida.

Si está usando FontAwesome 4.7esto debería ser suficiente:

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

Se puede encontrar una lista de códigos hexadecimales en la hoja de referencia de Font Awesome . Sin embargo, en la última versión de FontAwesome 5.0 este método no funciona (incluso si usa el enfoque CSS combinado con el actualizado font-family).

Resolví con este método:

En el CSS utilicé este código para la clase fontAwesome :

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

En el HTML, agregué la clase fontawesome y el código del icono fontawesome dentro del marcador de posición:

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

Puedes ver en CodePen .

La respuesta de @ Elli puede funcionar en FontAwesome 5, pero requiere usar el nombre de fuente correcto y usar el CSS específico para la versión que desea. Por ejemplo, cuando usaba FA5 Free, no podía hacer que funcionara si incluía all.css, pero funcionó bien si incluía 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'" />

Para FA5 Pro, el nombre de la fuente es 'Font Awesome 5 Pro'

Donde sea compatible, puede usar el ::input-placeholderpseudoelector combinado con ::before.

Vea un ejemplo en:

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

Estaba trabajando en esto y encontré este artículo, del cual modifiqué estas cosas:

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

Estoy usando Ember (versión 1.7.1) y necesitaba vincular el valor de la entrada y tener un marcador de posición que fuera un icono de FontAwesome. La única forma de vincular el valor en Ember (que yo sepa) es usar el ayudante integrado. Pero eso hace que el marcador de posición se escape, "& # xF002" simplemente aparece así, texto.

Si está utilizando Ember o no, debe configurar el CSS del marcador de posición de la entrada para tener una familia de fuentes de FontAwesome. Esto es SCSS (usando Bourbon para el estilo del marcador de posición ):

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

Si solo está usando manubrios, como se mencionó anteriormente, puede configurar la entidad html como marcador de posición:

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

Si está utilizando Ember, enlace el marcador de posición a una propiedad del controlador que tenga el valor Unicode.

en la plantilla:

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

en el controlador:

listFilter: null,
listFilterPlaceholder: "\uf002"

¡Y el enlace de valor funciona bien!

Úselo placeholder=""en su entrada. Puede encontrar unicode en la página de FontAwesome http://fontawesome.io/icons/ . Pero debes asegurarte de agregar style="font-family: FontAwesome;"tu entrada.

Hago esto agregando fa-placeholderclase para ingresar texto:

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

entonces, en css solo agregue esto:

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

Funciona bien para mi.

Actualizar:

Para cambiar la fuente mientras el usuario escribe su entrada de texto, simplemente agregue su fuente después de la fuente impresionante

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

Cualquiera que se pregunte acerca de la implementación de Font Awesome 5 :

No especifique una familia de fuentes general "Font Awesome 5", debe terminar específicamente con la rama de iconos con la que está trabajando. Aquí estoy usando la rama "Marcas", por ejemplo.

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

Más detalles Use el icono Font Awesome (5) en el texto del marcador de posición de entrada

Ignorando jQuery, esto se puede hacer usando ::placeholderun elemento de entrada.

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

La parte de 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 MEJOR PARTE: puede tener una familia de fuentes diferente para el marcador de posición y el texto

Sé que esta pregunta es muy antigua. Pero no vi ninguna respuesta simple como solía usar.

Solo necesita agregar la fasclase a la entrada y poner un hexadecimal válido en este caso &#xf002para el glifo de Font-Awesome como aquí<input type="text" class="fas" placeholder="&#xf002" />

Puedes encontrar el Unicode de cada glifo en la web oficial aquí. .

Este es un ejemplo simple que no necesita 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>

Hay un ligero retraso y un tirón cuando la fuente cambia en la respuesta proporcionada por Jason. El uso del evento "change" en lugar de "keyup" resuelve este problema.

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

Agregué texto e ícono juntos en un marcador de posición.

placeholder="Edit   "

CSS:

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

Si puede / desea usar Bootstrap, la solución serían grupos de entrada:

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

Se ve así: entrada con texto-anteponer y símbolo de búsqueda

Resolví el problema de manera un poco diferente y funciona con cualquier ícono de FA a través del código html. En lugar de todas estas dificultades con el marcador de posición, mi solución es:

1. Colocar un icono de la forma habitual

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. Luego, ajuste el texto del marcador de posición (es personal para todos, en mi caso, un ícono estaba justo antes del texto)

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

3. Aquí está el problema de que un ícono está encima de nuestra entrada y bloquea el cursor para hacer clic, por lo que debemos agregar una línea más en nuestro CSS

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

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

4. Pero un icono no desaparece junto con el marcador de posición, por lo que debemos solucionarlo. Y también esta es la versión final de mi solución:

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

Es más difícil de lo que pensaba antes, pero espero haber ayudado a alguien con esto.

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

La solución de Teocci es tan simple como puede ser, por lo tanto, no es necesario agregar ningún CSS, solo agregue class = "fas" para Font Awesome 5, ya que agrega la declaración de fuente CSS adecuada al elemento.

Aquí hay un ejemplo de cuadro de búsqueda dentro de la barra de navegación de Bootstrap, con el ícono de búsqueda agregado tanto al grupo de entrada como al marcador de posición (para demostrarlo, por supuesto, nadie usaría ambos al mismo tiempo). Imagen: https://i.imgur.com/v4kQJ77.png "> Código:

<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 veces, sobre todo, la respuesta no funciona, cuando puede usar el siguiente truco

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