Respuestas:
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 content
regla. 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=""/>
</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.
font-family: Font Awesome\ 5 Free;
no funciona. Tuve que usar solofont-family: FontAwesome;
font-family: 'Font Awesome 5 Pro', 'Montserrat';
al campo de búsqueda y funcionó a la perfección.
Si está usando FontAwesome 4.7
esto 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=" 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
).

valor? Quiero decir, ¿cómo vas de icon-search
a 
?
id="iconified"
simplemente agregar class="fa"
y la fuente impresionante se encargará del CSS por ti.
<input type="text" placeholder=" Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">
. De lo contrario, se mostró un símbolo que contenía "fl".
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=" insert email address ..." value="">
Puedes ver en CodePen .
input[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
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=" 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-placeholder
pseudoelector 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:
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="" 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-placeholder
clase para ingresar texto:
<input type="text" name="search" class="form-control" placeholder="" />
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="">
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 ::placeholder
un elemento de entrada.
<form role="form">
<div class="form-group">
<input type="text" class="form-control name" placeholder=""/>
</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 fas
clase a la entrada y poner un hexadecimal válido en este caso 
para el glifo de Font-Awesome como aquí<input type="text" class="fas" placeholder="" />
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="" />
</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');
}
});
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:
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;
}
HTML
<!-- For example add some spaces in placeholder, to make focused cursor stay before an icon -->
...placeholder=" Some text"...
CSS
.block__icon {
position: absolute;
margin: some-corrections;
/* The new line */
pointer-events: none;
}
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="" 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>