12.12.2024

Usando Ícones do Font Awesome em Placeholders: Soluções

Resposta Rápida

Crie uma experiência de usuário única ao adicionar ícones do Font Awesome nos campos de entrada de texto. Para alcançar esse efeito, posicione o ícone acima do elemento de entrada aplicando os estilos apropriados usando CSS.

Aqui está um código de exemplo para você:

<div class="fa-input">
  <i class="fa fa-user"></i>
  <input type="text" placeholder="Nome de Usuário">
</div>

.fa-input {
  position: relative;
}
.fa-input .fa {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.fa-input input {
  padding-left: 2em;
}

Essa abordagem em CSS permite que você posicione o ícone do Font Awesome dentro do campo de entrada, criando um efeito de placeholder com ícone.

Usando FontAwesome com CSS

Se você estiver trabalhando com FontAwesome 4.7, certifique-se de verificar o mapeamento de caracteres para o Unicode necessário. Vamos ver como isso pode ser implementado:

<input type="text" placeholder="&#xf007; Nome de Usuário" style="font-family: Arial, FontAwesome;">

Agora temos o Unicode , correspondente ao ícone de usuário. Configurar isso no campo font-family garante que o ícone seja exibido corretamente.

Ajustes Estéticos: CSS e FA (Font Awesome) 5

Se você fez a transição para FontAwesome 5 e está pronto para usar pseudo-elementos CSS, aqui está como fazê-lo:

input[type="text"]::placeholder {
  font-family: 'FontAwesome 5 Free', 'Arial';
}
input[type="text"]:placeholder-shown {
  font-family: Arial;
}

Esse código permite que o ícone permaneça visível em um campo vazio, e à medida que você começa a digitar, a fonte mudará automaticamente para texto.

Verificação de Compatibilidade Prévia e Uso de SVG

Antes de começar, é importante garantir a compatibilidade entre navegadores. Verifique como sua fonte é exibida em diferentes navegadores e em vários estados de entrada. Ferramentas como CodePen ou JSFiddle podem ajudar com isso.

Para usuários do FA5 que estão enfrentando dificuldades com pseudo-seletores, usar ícones SVG pode ser uma alternativa adequada.

Visualização

Imagine o campo de entrada como uma paleta de cores (🎨) e o placeholder como uma tela:

Paleta (🎨): Cores = [Texto, Ícones] Tela (🖼️): Placeholder

Aplicando ícones Font Awesome no placeholder:

```html
<input placeholder="&#xf007; Nome de Usuário">

E aqui está o resultado:

🎨 -> 🖼️: [🎨]

**A cor do ícone** (🎨) agora é refletida na tela — isso enfatiza **seu placeholder artístico**!

## Aprofundando em Detalhes

### Personalização Adicional de CSS com Menos Código

Personalizações mais refinadas podem ser encontradas no código-fonte do **Font Awesome**. Usuários do **FA5 Free** encontrarão os recursos necessários em `solid.css`.

### Adicionando Interatividade com jQuery

Para criar um placeholder **reativo**, use **jQuery** em combinação com **font-family**:

```javascript
$('input[type="text"]').on('input', function() {
    if (this.value) {
        $(this).addClass('typed');
    } else {
        $(this).removeClass('typed');
    }
});

input[type="text"].typed {
    font-family: Arial;
}

Recursos Úteis

1. Documentação do Font Awesome — Instruções detalhadas sobre como usar o Font Awesome no HTML.
2. <input>: Elemento de Entrada em Formulário - HTML: Linguagem de Marcação HiperTexto | MDN — Guia oficial sobre o atributo placeholder do HTML.
3. ::placeholder | CSS-Tricks — Explicação detalhada sobre pseudo-elementos e placeholders.
4. Busca de Ícones | Font Awesome — Ferramenta online para encontrar ícones do Font Awesome.
5. HTML Unicode UTF-8 — Opções alternativas para símbolos unicode.
6. Propriedade de Conteúdo CSS — Exemplos de uso da propriedade de conteúdo com pseudo-elementos.

Video

Navigation