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


111

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

Respuestas:


61

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.


4
FontAwesome mostrará caracteres regulares para todos los símbolos no Unicode. Para mí, insertar una entidad Unicode no funciona, pero pegar el símbolo funciona: placeholder = " Hello"
DanielKhan

Con FontAwesome 5 use la familia de fuentes: Font Awesome \ 5 Free; en lugar.
Andrew Schultz

1
@AndrewSchultz, font-family: Font Awesome\ 5 Free;no funciona. Tuve que usar solofont-family: FontAwesome;
kanlukasz

En realidad, puede aplicar diferentes fuentes a la entrada. Hice esto en una instalación con FA5 Pro y lo apliqué font-family: 'Font Awesome 5 Pro', 'Montserrat';al campo de búsqueda y funcionó a la perfección.
Jeff W

229

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


8
de donde sacaste &#xF002;valor? Quiero decir, ¿cómo vas de icon-searcha &#xF002?
Ігар Цімошка

2
Ni siquiera necesitas id="iconified"simplemente agregar class="fa"y la fuente impresionante se encargará del CSS por ti.
Pedro Hoehl Carvalho

8
Tenía que cambiar el orden de la fuente para que funcione: <input type="text" placeholder="&#xf002; Search Blog" style="font-family: FontAwesome, Arial; font-style: normal">. De lo contrario, se mostró un símbolo que contenía "fl".
Guillaume Renoult

4
@ ІгарЦімошка Los códigos hexadecimales se muestran todos en la hoja de trucos fortawesome.github.io/Font-Awesome/cheatsheet
Liam George Betsworth


20

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 .


Esto también funciona para FA5 Pro usandoinput[type="text"]::placeholder { text-align: right; font-family: Roboto, 'Font Awesome\ 5 Pro', sans-serif; font-weight: 600; }
ChrisB

10

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'



8

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!

ejemplo de marcador de posición

marcador de posición gif


Esto está usando Ember 1.7.1
RustyToms

Buen post para aquellos que están usando otras tecnologías web.
L84

1
¡Muchas gracias! rascándome la cabeza un poco. gracias por detallar la solución!
Moe Tsao


4

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



3

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


3

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>


Esta es la respuesta para Font Awesome 5. ¡Gracias!
laviex

1

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

1

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

placeholder="Edit &nbsp; &#xf040;"

CSS:

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


1

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


0

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>

0

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>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.