Coloque el icono dentro del elemento de entrada en un formulario

¿Cómo pongo un ícono dentro del elemento de entrada de un formulario?

Captura de pantalla de un formulario web con tres entradas que tienen iconos en ellas

Versión en vivo en: el tema Fuerza de marea

El sitio que vinculó usa una combinación de trucos de CSS para llevarlo a cabo. Primero, usa una imagen de fondo para el elemento . Luego, para empujar el cursor hacia arriba, usa padding-left .

En otras palabras, tienen estas dos reglas de CSS:

 background: url(images/comment-author.gif) no-repeat scroll 7px 7px; padding-left:30px; 

Las soluciones de CSS publicadas por otros son la mejor manera de lograr esto.

Si eso le causa algún problema (lea IE6), también puede usar una entrada sin bordes dentro de un div.

 

No como “limpio”, pero debería funcionar en navegadores más antiguos.

Puedes intentar esto:

 input[type='text'] { background-image: url(images/comment-author.gif); background-position: 7px 7px; background-repeat: no-repeat; } 

Encuentro que esta es la mejor y más limpia solución para ello. Usar texto-sangría en el elemento de input

CSS:

 #icon{ background-image:url(../images/icons/dollar.png); background-repeat: no-repeat; background-position: 2px 3px; } 

HTML:

  

Una solución sin imágenes de fondo:

 #input_container { position:relative; padding:0 0 0 20px; margin:0 20px; background:#ddd; direction: rtl; width: 200px; } #input { height:20px; margin:0; padding-right: 30px; width: 100%; } #input_img { position:absolute; bottom:2px; right:5px; width:24px; height:24px; } 
 
 .icon{ background: url(1.jpg) no-repeat; padding-left:25px; } 

agregue las tags anteriores en su archivo CSS y use la clase especificada.

Solo usa la propiedad de fondo en tu CSS.

  #foo { background: url(/img/foo.png); } 

Usar con el icono de fuente

  

O

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

Por ejemplo, puede usar esto: etiqueta con entrada oculta (el icono está presente).

Tenía una situación como esta. No funcionó debido a background: #ebebeb; . Quería poner el fondo en el campo de entrada y esa propiedad aparecía constantemente en la parte superior de la imagen de fondo, ¡y no podía ver la imagen! Entonces, moví la propiedad de background para que estuviera por encima de la propiedad de la background-image y funcionó.

 input[type='text'] { border: 0; background-image: url('../img/search.png'); background-position: 9px 20px; background-repeat: no-repeat; text-align: center; padding: 14px; background: #ebebeb; } 

La solución para mi caso fue:

 input[type='text'] { border: 0; background: #ebebeb; background-image: url('../img/search.png'); background-position: 9px 20px; background-repeat: no-repeat; text-align: center; padding: 14px; } 

Solo mencionar que las propiedades de border , padding y text-align no son importantes para la solución. Acabo de replicar mi código original.

Puedes probar esto: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

 

Esto funciona para mí:

 input.valid { border-color: #28a745; padding-right: 30px; background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png'); background-repeat: no-repeat; background-size: 20px 20px; background-position: right center; }