placeholder - pro - Utilice el icono de fuente impresionante en marcador de posición
font awesome pro (11)
Agregué texto e ícono juntos en un marcador de posición.
placeholder="Edit "
CSS:
font-family: FontAwesome,''Merriweather Sans'', sans-serif;
¿Es posible utilizar el icono Font Awesome en un marcador de posición? Leí donde HTML no está permitido en un marcador de posición. ¿Hay alguna solución?
placeholder="<i class=''icon-search''></i>"
Cualquiera que se pregunte sobre una 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 Utilice el icono Font Awesome (5) en el texto del marcador de entrada
Donde sea compatible, puede usar el pseudoselector ::input-placeholder 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é esto:
Estoy usando Ember (versión 1.7.1) y necesitaba unir el valor de la entrada y tener un marcador de posición que fuera un ícono de FontAwesome. La única manera de enlazar el valor en Ember (que yo sepa) es usar el helper incorporado. Pero eso hace que el marcador de posición se escape, "& # xF002" simplemente aparece así, texto.
Si usa Ember o no, necesita establecer 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 de 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á utilizando manubrios, como se ha mencionado anteriormente, puede configurar la entidad html como marcador de posición:
<input id="listFilter" placeholder="" type="text">
Si usa Ember, vincule 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!
Hay un ligero retraso y jank a medida que cambia la fuente en la respuesta proporcionada por Jason. Usar el 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'');
}
});
Ignorando el jQuery, esto se puede hacer usando ::placeholder de 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 diferentes familias de fuentes para el marcador de posición y el texto
Lo hago agregando fa-placeholder clase fa-placeholder para ingresar texto:
<input type="text" name="search" class="form-control" placeholder="" />
entonces, en CSS solo agrega esto:
.fa-placholder { font-family: "FontAwesome"; }
Funciona bien para mí
Actualizar:
Para cambiar la fuente mientras el usuario escribe en su entrada de texto, simplemente agregue su fuente después de la fuente impresionante
.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }
Lo resolví con este método:
En CSS usé este código para la clase fontAwesome :
.fontAwesome {
font-family: ''Helvetica'', FontAwesome, sans-serif;
}
En el HTML he agregado la clase fontawesome y el código de icono fontawesome dentro del marcador de posición:
<input type="text" class="fontAwesome" name="emailAddress" placeholder=" insert email address ..." value="">
Puedes ver en CodePen .
No puede agregar un icono y texto porque no puede aplicar una fuente diferente a una parte de un marcador de posición, sin embargo, si está satisfecho con solo un ícono, puede funcionar. Los iconos de FontAwesome son solo caracteres con una fuente personalizada (puede ver FontAwesome.css para el carácter Unicode escapado en la regla de content . En el código fuente menos se encuentra en variables.less El desafío sería cambiar las fuentes cuando el la entrada no está vacía. Combínalo con jQuery así.
<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 esto (simple) jQuery
$(''#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á utilizando 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 trucos Font Awesome . Sin embargo, en el último FontAwesome 5.0, este método no funciona (incluso si usa el enfoque CSS combinado con la font-family actualizada).
Use placeholder="" en tu entrada. Puedes encontrar Unicode en la página FontAwesome http://fontawesome.io/icons/ . Pero debe asegurarse de agregar style="font-family: FontAwesome;" en tu entrada.