Icono de fuente impresionante dentro del elemento de entrada de texto


136

Estoy tratando de insertar un icono de usuario dentro del campo de entrada de nombre de usuario.

He intentado una de las soluciones de la pregunta similar sabiendo que la background-imagepropiedad no funcionará desde Font Awesome es una fuente.

El siguiente es mi enfoque y no puedo ver el ícono.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

Tengo la cara de fuente declarada en la fuente predeterminada impresionante CSS, así que no estaba seguro de si agregar la familia de fuentes anterior era el enfoque correcto.

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }

¿Que quieres saber? ¿Cuál es la pregunta / error?
allcaps

@allcaps Vaya ... Admito que no hay forma de identificar el error que estoy encontrando con solo mirar mi publicación original. Lo edité un poco.
Seong Lee

Ver mi respuesta actualizada.
allcaps

Respuestas:


108

Tienes razón. : before y: after pseudo content no está destinado a trabajar en elementos imgy inputelementos reemplazados . Agregar un elemento de ajuste y declarar una familia de fuentes es una de las posibilidades, al igual que usar una imagen de fondo. O tal vez un texto de marcador de posición html5 se adapte a sus necesidades:

<input name="username" placeholder="&#61447;">

Los navegadores que no admiten el atributo de marcador de posición simplemente lo ignorarán.

ACTUALIZAR

El selector de contenido antes selecciona la entrada: input[type="text"]:before. Debe seleccionar el envoltorio: .wrapper:before. Ver http://jsfiddle.net/allcaps/gA4rx/ . También agregué la sugerencia de marcador de posición donde el contenedor es redundante.

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

Retroceder

Font Awesome utiliza el Área de uso privado (PUA) de Unicode para almacenar íconos. Otros caracteres no están presentes y recurren al valor predeterminado del navegador. Eso debería ser lo mismo que cualquier otra entrada. Si define una fuente en los elementos de entrada, proporcione la misma fuente como alternativa para situaciones en las que usamos un icono. Me gusta esto:

input { font-family: 'FontAwesome', YourFont; }

44
Usar su método de marcador de posición funciona. El problema es que el texto normal (sin íconos) no coincide con la fuente del resto de la página y se muestra como serif predeterminado del navegador. ¿Alguna forma de evitar esto?
harryg

66
Font Awesome utiliza el Área de uso privado (PUA) de Unicode para almacenar íconos. Otros caracteres no están presentes y recurren al valor predeterminado del navegador. Eso debería ser lo mismo que cualquier otra entrada. Si se define un tipo de letra en los elementos de entrada en alguna parte, entonces la oferta de la misma fuente que reserva para situaciones en las que nosotros utilizamos un icono: input { font-family: 'FontAwesome' YourFont; }. ¿Esto ayuda? Siempre puedes hacer una nueva pregunta.
allcaps

1
@allcaps la recomendación de usar una familia de fuentes de reserva para el marcador de posición funciona WONDERS !! No pensé en cambiar la fuente a través de una reserva. ¿Puedes actualizar tu respuesta para incluir una fuente alternativa para futuros usuarios? ¡Gracias!
ProfileTwist

1
¿Dónde puedo encontrar la lista de códigos? Me refiero a fa-usuario a & # 61447;
Elyor

1
@Elyor: no necesita usar la entidad html. Si su proyecto es UTF-8, puede simplemente copiar y pegar el glifo de Font Awesome. Probablemente aparecerá como un bloque en su editor de código, pero eso está bien. También puede usar uno de los muchos convertidores en línea de unicode a html-entidades.
allcaps

123

Salida:

ingrese la descripción de la imagen aquí

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(O)

Salida:

ingrese la descripción de la imagen aquí

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>

2
Ese fue un excelente consejo para usar font-awesome con un cuadro de texto.
Sunil

¿Es posible hacer que se pueda hacer clic en ese icono?
FrenkyB

55
@FrenkyB, sí. <span class = "fa fa-info-circle errspan" onclick = 'YOUR_FUNCTION ()'> </span>
Palanikumar

2
La configuración z-index: 1hará que la entrada subyacente capte el foco cuando haga clic en el icono, algo que puede desear, por ejemplo, al agregar un selector de fechas.
romaricdrigon

Funciona bien para mí, pero no utilicé position: relative(los márgenes negativos no lo necesitan) ni z-index(tan pronto como el elemento se procesa después de la entrada)
Pierre de LESPINAY

24

Podrías usar un envoltorio. Dentro del contenedor, agregue el elemento de fuente impresionante i y el inputelemento.

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

luego establezca la posición del contenedor en relativa:

.wrapper { position: relative; }

y luego establece la iposición del elemento en absoluto, y establece el lugar correcto para él:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(Es un truco, lo sé, pero hace el trabajo).


2
¿Por qué necesitamos un envoltorio allí?
Ashfaque Rifaye

Según tengo entendido, los elementos absolutos se colocan en relación con el ancestro 'posicionado' más cercano. Posición: relativo significa que el contenedor está 'posicionado' (también podría haber sido absoluto, fijo o pegajoso). Si no hace esto, el ícono estará absolutamente posicionado en relación con algún otro elemento más alto en el dom (o si no se encuentran elementos posicionados, en relación con la ventana gráfica).
Jaqen H'ghar

20

Esta respuesta funcionará para usted si necesita que se cumplan las siguientes condiciones (ninguna de las respuestas actuales cumplió con estas condiciones):

  1. El icono está dentro del cuadro de texto.
  2. El ícono no debe desaparecer cuando se ingresa texto en la entrada, y el texto ingresado va a la derecha del ícono
  3. Al hacer clic en el ícono debería enfocarse la entrada subyacente

Creo que 3 es el número mínimo de elementos HTML para satisfacer estas condiciones:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


44
La mejor respuesta para tener el ícono dentro del campo de entrada, donde el ícono permanece visible mientras el usuario escribe.
Objetivo

arriba: calc (50% - 0.5em) asume que su etiqueta tiene 1em de altura
drichar

1
@drichar - Acabo de probar, esto todavía funciona con cualquier altura de etiqueta. Siempre que no alinee verticalmente el texto de la etiqueta dentro de la etiqueta (que no es el predeterminado) Dado que se alinea en la parte superior de forma predeterminada, una etiqueta más alta seguirá funcionando correctamente. También probé con diferentes tamaños de fuente en la etiqueta y la entrada. Parece funcionar en todos los escenarios.
Skeets

@ SkeetsO'Reilly estoy corregido. Los estoy confundiendo con rem. 0.5em es la mitad del tamaño de fuente. Gran solución, lo estoy usando en un proyecto (solo uso SVG personalizado, no FA, que no tiene tamaño de fuente, lo que condujo a mi problema de posicionamiento y comentario mal informado)
drichar

14

No es necesario codificar mucho ... solo siga los siguientes pasos:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

puedes encontrar los enlaces a Unicode ( fontawesome ) aquí ...

FontAwesome Unicode para iconos


¿Qué sucede si ya estoy usando otra familia de fuentes para el marcador de posición? entonces no funcionará. ¿Hay alguna forma de hacer que el texto "Buscar" en "& # xf002 Buscar" use una fuente personalizada y Unicode todavía use la fuente fontawesome?
Sushmit Sagar

6

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>


Hola, adjunte una pequeña explicación a su solución.
Aditya Thakur

1
Esta respuesta funcionará para usted si necesita que se cumplan las siguientes condiciones (ninguna de las respuestas actuales cumplió con estas condiciones): El ícono está dentro del cuadro de texto El ícono no debe desaparecer cuando se ingresa texto en la entrada, y el texto ingresado va a a la derecha del icono Al hacer clic en el icono debería enfocarse la entrada subyacente. Creo que 3 es el número mínimo de elementos HTML para satisfacer las condiciones
Ola Olushesi

5

Después de leer varias versiones de esta pregunta y buscar, he encontrado una solución bastante limpia y sin js. Es similar a la solución @allcaps, pero evita el problema de que la fuente de entrada se cambie de la fuente del documento principal.

Usa el ::input-placeholderatributo para específicamente el texto del marcador de posición. Esto le permite usar su fuente de icono como fuente de marcador de posición y su cuerpo (u otra fuente) como texto de entrada real. Actualmente necesita especificar selectores específicos del proveedor.

Esto funciona bien siempre que no necesite una combinación de icono y texto en su elemento de entrada. Si lo hace, tendrá que soportar que el texto del marcador de posición sea la fuente predeterminada del navegador (serif simple en el mío) para las palabras.

Ej.
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

Violín con selectores prefijados del navegador: http://jsfiddle.net/gA4rx/78/

Tenga en cuenta que debe definir cada selector específico del navegador como una regla separada. Si los combina, el navegador lo ignorará.


Si bien es una solución elegante, no logra el comportamiento esperado.
Olivier Refalo

De hecho, parece que los navegadores Webkit son los únicos que aceptan font-familyeste selector en este momento. Solo podemos esperar una aceptación más generalizada en el futuro.
harryg

5

Encontré la forma más fácil de usar bootstrap 4.

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>

2

Logré esto así

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }
<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-twitter"></i>
  <div class="form-group url optional profile_twitter_url">
    <input class="string url optional form-control" placeholder="http://twitter.com/your-account" type="url" name="profile[twitter_url]" id="profile_twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

El resultado se ve así:

resultado

Nota al margen

Tenga en cuenta que estoy usando Ruby on Rails, por lo que mi código resultante parece un poco explotado. El código de vista en Slim es realmente muy conciso:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-twitter
= f.input :twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false

2

Para mí, una manera fácil de tener un ícono "dentro" de una entrada de texto sin tener que tratar de usar pseudo-elementos con fuente impresionante Unicode, etc., es tener la entrada de texto y el ícono dentro de un elemento contenedor que colocaremos en relación, y luego posicionar tanto la entrada de búsqueda como el ícono absoluto de la fuente absoluta.

De la misma manera que lo hacemos con imágenes de fondo y texto, lo haríamos aquí. Creo que esto también es bueno para los principiantes, ya que el posicionamiento CSS es algo que un principiante debería aprender al comienzo de su viaje de codificación, por lo que el código es fácil de entender y reutilizar.

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }

1

Basándose en la sugerencia de allcaps. Aquí está el método de fondo de fuente impresionante con la menor cantidad de HTML:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}

1

Haga que se pueda hacer clic en el icono para enfocarse dentro del elemento de entrada de texto.

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

Simplemente agregue el ícono que desee dentro de la <i>etiqueta, desde la biblioteca Font Awesome y disfrute de los resultados.


0
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>

2
¡Será más útil para el OP si también publica alguna explicación sobre lo que está haciendo este bloque de código!
Kim

0

puramente CSS

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

1
¿Puedes explicar tu respuesta, por favor?
E. Zeytinci

0

Mi solución fue tener un contenedor relativo alrededor inputpara sostener el ícono. Ese contenedor externo tiene un ::aftericono con el deseado, ubicado absolutedentro del contenedor.

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

Código SASS:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

0

Mi solución para agregar un icono de fuente impresionante dentro del elemento de entrada. Aquí hay un código simple para agregar un icono dentro del elemento de entrada. Simplemente copie el código a continuación y colóquelo donde desee agregarlo. o si desea cambiar el ícono, simplemente ponga su código de ícono en la <i> etiqueta.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>


2
La respuesta es útil, pero la oración que es spam no está permitida. Si quieres tener algo así, puedes poner un enlace en tu perfil.
Makyen

Si bien este fragmento de código puede resolver la pregunta, incluir una explicación realmente ayuda a mejorar la calidad de su publicación. Recuerde que está respondiendo la pregunta para los lectores en el futuro, y que esas personas podrían no conocer los motivos de su sugerencia de código.
Clijsters

0

En algún momento, el icono no aparecerá debido a la versión Font Awesome. Para la versión 5, el CSS debería ser

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

0

Manera fácil, pero necesitas bootstrap

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

ingrese la descripción de la imagen aquí


-1
::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">

-3

Probé las cosas a continuación y realmente funciona bien HTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}
<div >

    <input class="hai" placeholder="Search term">

</div>


1
la pregunta es acerca del uso de los iconos de fuente impresionante
gaitat

-5

Para trabajar esto con Unicode o Fontawesome, debe agregar un spancon classcomo a continuación:

En HTML:

<span class="button1 search"></span>
<input name="username">

En CSS:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;           
}

1
esto no pondrá el ícono dentro de la entrada de texto
Gianfranco P.

-9
<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>
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.