22.01.2025

Como Inserir um Ícone Dentro de um Elemento Input em HTML e CSS

Resposta Rápida

Quer inserir um ícone em um elemento input? Use CSS. Escolha um conjunto de ícones, como o Font Awesome, coloque-o em um contêiner com position: relative, e defina o próprio ícone como position: absolute. Depois, ajuste a posição do ícone usando as propriedades top e left para um posicionamento perfeito dentro do elemento:

<div style="position: relative;">
  <i class="fa fa-search" style="position: absolute; top: 50%; left: 8px; transform: translateY(-50%);"></i>
  <input type="text" style="padding-left: 30px;">
</div>

Agora seu ícone se encaixa perfeitamente dentro do campo de input, e o texto não se sobrepõe à imagem.

Estilizando Ícones com Imagens de Fundo em CSS

Você pode usar CSS e a propriedade background-image para estilizar o input. Esse método é adequado se você quiser integrar o ícone diretamente no design do campo de texto:

.input-com-icone {
  background: url('icon-search.png') no-repeat 10px center;
  padding-left: 35px;
}

Para aplicar esse estilo ao seu formulário, use:

<input type="text" class="input-com-icone">

O tamanho do ícone pode ser ajustado usando background-size, e background-repeat: no-repeat evitará que a imagem de fundo se repita.

Manipuladores de Clique: Ícones em Ação

Ícones podem executar ações específicas quando clicados. Envolva o ícone e o elemento input em um label ou div e adicione um manipulador de eventos usando JavaScript:

<div style="position: relative;">
  <input type="text" id="search">
  <label for="search" style="position: absolute; right: 10px; cursor: pointer;">❌</label>
</div>

document.querySelector('label').addEventListener('click', function() {
  document.getElementById('search').value = '';
});

Considerações de Compatibilidade Entre Navegadores

Ao desenvolver, certifique-se de que sua solução seja exibida corretamente em todas as versões atuais e desatualizadas dos navegadores, envolvendo o ícone e o input em uma div com uma borda.

Visualização

Trate cada input como um ninho, e o ícone como seu precioso ovo. Para conseguir um posicionamento harmonioso do ícone, use:

<input type="text" placeholder="🔍 Buscar">

Ou assim:

<div style="position: relative;">
  <input type="text" style="padding-left: 20px;">
  <i style="position: absolute; left: 0; top: 0;">🔍</i>
</div>

Com esse arranjo, o ícone será posicionado conforme o esperado.

Exemplos de Uso Avançado

Ícone Interativo: Do Simples ao Dinâmico

Você pode tornar o campo de input interativo adicionando um ícone de limpeza que aparece quando o campo está preenchido:

<div style="position: relative;">
  <input type="text" style="padding-right: 20px;" oninput="toggleClearIcon(this)">
  <i style="position: absolute; right: 0; top: 0; cursor: pointer;">❌</i>
</div>

function toggleClearIcon(inputElement) {
  const clearIcon = inputElement.nextSibling;
  if (inputElement.value.length > 0) {
    clearIcon.style.display = 'block';
  } else {
    clearIcon.style.display = 'none';
  }
}

Design com Emoções: Ícones para Feedback na Validação

Ícones podem refletir os resultados da validação de dados, como mostrar um sinal de check para entradas bem-sucedidas e um ponto de exclamação em caso de erro.

Dica Profissional: Torne Acessível

Certifique-se de que sua interface seja acessível a todos. Se o ícone carregar informações importantes, adicione texto alternativo ou use aria-label para o campo de input.

Recursos Úteis

1. HTMLInputElement - Web APIs | MDN — Um recurso abrangente para trabalhar com elementos input em HTML.
2. Input group · Bootstrap — Maneiras de integrar ícones em campos de formulário usando Bootstrap.
3. Encontre Ícones com a Aparência e Sensação Perfeitas | Font Awesome — Uma ampla gama de exemplos de ícones para uso em formulários.
4. Novas Perguntas sobre 'input+icons' - Stack Overflow — Discussões da comunidade sobre maneiras de inserir ícones em campos de input em HTML.
5. UX E HTML5: Vamos Ajudar os Usuários a Preencher Seu Formulário Móvel (Parte 2) — Smashing Magazine — Melhores práticas para projetar formulários.

Video

Navigation