Coloque o ícone dentro do elemento de input em um formulário

Como faço para colocar um ícone dentro do elemento de input de um formulário?

Captura de tela de um formulário da web com três entradas que contêm ícones neles

Versão ao vivo em: tema Tidal Force

O site que você vinculou usa uma combinação de truques de CSS para conseguir isso. Primeiro, ele usa uma imagem de fundo para o elemento . Então, para empurrar o cursor, ele usa o padding-left .

Em outras palavras, eles têm essas duas regras de CSS:

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

As soluções CSS postadas por outros são a melhor maneira de conseguir isso.

Se isso lhe causar algum problema (leia IE6), você também pode usar uma input sem borda dentro de uma div.

 

Não como “limpo”, mas deve funcionar em navegadores mais antigos.

Você pode tentar isto:

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

Acho isso a melhor e mais limpa solução para isso. Usando o recuo de texto no elemento de input

CSS:

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

HTML:

  

Uma solução sem imagens de fundo:

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

adicione as tags acima em seu arquivo CSS e use a class especificada.

Apenas use a propriedade background em seu CSS.

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

Usando com o ícone de fonte

  

OU

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

Por exemplo, você pode usar este: label com input oculta (ícone está presente).

Eu tive uma situação assim. Não funcionou por causa do background: #ebebeb; . Eu queria colocar fundo no campo de input e essa propriedade estava constantemente aparecendo no topo da imagem de fundo, e eu não conseguia ver a imagem! Então, mudei a propriedade background para estar acima da propriedade background-image e funcionou.

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

Solução para o meu caso foi:

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

Apenas para mencionar, as propriedades border , padding e text-align não são importantes para a solução. Eu apenas copiei meu código original.

Você pode tentar isto: Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec