Poner el icono dentro del elemento de entrada en un formulario

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

Versión en vivo en: tema Tidal Force

El sitio que vinculó utiliza una combinación de trucos CSS para lograr esto. Primero, usa una imagen de fondo para el <input>elemento. Luego, para empujar el cursor, utiliza padding-left.

En otras palabras, tienen estas dos reglas CSS:

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

Las soluciones 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.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

No como "limpio", pero debería funcionar en navegadores antiguos.

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

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

Puedes probar esto:

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

Me parece la mejor y más limpia solución. Usar sangría de texto en el inputelemento

CSS:

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

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

Una manera simple y fácil de colocar un icono dentro de una entrada es usar la propiedad de posición CSS como se muestra en el código a continuación. Nota: he simplificado el código por motivos de claridad.

1. Cree el contenedor que rodea la entrada y el ícono.
2. Establecer la posición del contenedor como relativa
3. Establezca el icono como posición absoluta. Esto posicionará el icono en relación con el contenedor circundante.
4. Use arriba, izquierda, abajo, derecha para colocar el icono en el contenedor.
5. Establezca el relleno dentro de la entrada para que el texto no se superponga con el icono.

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}

<div id="input-container">
  <img/>
  <input/>
</div>

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

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

Esto funciona para mi:

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

<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

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

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>

Simplemente use la propiedad de fondo en su CSS.

<input id="foo" type="text" />

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

Tuve una situación como esta. No funcionó por eso background: #ebebeb;. Quería poner el fondo en el campo de entrada y esa propiedad se mostraba constantemente en la parte superior de la imagen de fondo, ¡y no podía ver la imagen! Entonces, moví la backgroundpropiedad para que esté por encima de la background-imagepropiedad 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 por mencionar, border, paddingy text-alignpropiedades no son importantes para la solución. Acabo de replicar mi código original.

Utilizando con font-icon

<input name="foo" type="text" placeholder="&#61447;">

O

<input id="foo" type="text" />

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

use esta clase css para su entrada al inicio, luego personalícela en consecuencia:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

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

Esto funciona para mí para formas más o menos estándar:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>