Gostaria de adicionar ícones aos seus formulários? Os ícones podem ser uma ótima maneira de reforçar visualmente a finalidade de um campo e podem ajudar seus formulários a parecerem mais personalizados.
Este tutorial abordará como adicionar ícones da Font Awesome aos seus formulários.
Neste artigo
Como adicionar Font Awesome ao seu site
A primeira etapa é adicionar a biblioteca de ícones do Font Awesome ao seu site. O Font Awesome é uma ótima opção para adicionar ícones aos seus formulários porque seus ícones funcionam como uma fonte e adotarão a mesma cor e o mesmo tamanho das outras fontes do seu site.
Há muitas maneiras de adicionar a biblioteca de ícones Font Awesome ao seu site, desde a adição de código ao cabeçalho do site até a instalação de um plug-in. Para obter detalhes sobre cada opção, consulte o guia do WPBeginner para adicionar fontes de ícones ao WordPress.
Para manter as coisas simples, usaremos o plug-in Better Font Awesome. Trata-se de um plug-in gratuito para WordPress que adiciona os recursos necessários para usar os ícones do Font Awesome em seu site.
Quando estiver pronto, vá em frente e instale o plug-in. Você poderá prosseguir para a próxima etapa do tutorial assim que ele for ativado.
Escolha de um ícone da Font Awesome
Depois de ter a capacidade de usar a Font Awesome em seu site, você pode começar a procurar os ícones que gostaria de usar em seus formulários.
Observação: O Font Awesome oferece ícones gratuitos e pagos. Você pode usar o menu esquerdo no site do Font Awesome para visualizar facilmente apenas os ícones gratuitos.
Na página do ícone que você gostaria de usar, procure o valor unicode exibido logo abaixo do nome do ícone.
Na imagem acima, o unicode é f1d8.
Anote o unicode de cada ícone que deseja usar em seus formulários, pois será necessário incluí-lo nos trechos de CSS personalizados mais adiante neste tutorial.
Como adicionar ícones a seus formulários
Há várias maneiras de incorporar ícones em seus formulários. Abordamos vários exemplos abaixo, mas há alguns aspectos que devem ser observados antes de você se aprofundar neles.
Em primeiro lugar, quase todos os exemplos abaixo exigem que você adicione CSS personalizado ao seu site WordPress. Para obter detalhes sobre como fazer isso, consulte o guia passo a passo do WPBeginner para adicionar CSS personalizado ao seu site.
Observação: especialmente se você planeja adicionar o CSS deste tutorial à folha de estilo do seu tema, recomendamos enfaticamente o uso de um tema filho. Para obter mais informações sobre como criar um tema filho, consulte o guia do WPBeginner para criar um tema filho.
Além disso, a família de fontes que você precisa usar em seus trechos de CSS depende do uso de um ícone gratuito ou pago da Font Awesome.
Observação: Neste tutorial, nossos exemplos utilizam o "Font Awesome 5 Free" que é para ícones gratuitos. Se você tiver uma licença para os ícones Pro do Font Awesome, certifique-se de fazer referência à família de fontes correta. Verifique a seção Documentação oficial sobre pseudo-elementos CSS para obter a família de fontes correta para sua versão. Basta substituir "Font Awesome 5 Free" nos snippets fornecidos com sua família de fontes específica.
Exibição de ícones na frente de títulos de formulários
Para adicionar um ícone na frente do título do formulário, é necessário criar um CSS personalizado que insira o ícone para você. Esse CSS será um pouco diferente, dependendo do fato de você querer que o ícone apareça na frente dos títulos de todos os WPForms em seu site ou apenas de um formulário específico.
Adição de um ícone a todos os títulos de formulários
O CSS para exibir um ícone na frente de todos os títulos de formulários é simples porque é mais geral. Aqui está o trecho de CSS de que você precisará:
.wpforms-form .wpforms-title:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and backslash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and title */
}
Observação: Ao adicionar CSS ao seu site, pode ser necessário incluir !important antes do ponto e vírgula para garantir que seus estilos personalizados sejam aplicados com êxito. Confira nosso guia para Solução de problemas de CSS para obter mais detalhes.
Há algumas linhas nesse snippet que você precisará personalizar. Primeiro, observe que o unicode do Font Awesome para o ícone que escolhemos está incluído após content:.
Você pode substituir esse valor pelo unicode de qualquer outro ícone na biblioteca do Font Awesome.
Esse CSS também inclui uma margem direita de 10 pixels. Sem isso, não haveria espaço entre o ícone e o título do formulário. Você pode personalizar esse número para o tamanho que desejar.
No front-end, esse exemplo tem a seguinte aparência:
Adição de um ícone ao título de um formulário específico
Em vez de adicionar o mesmo ícone aos títulos de todos os formulários do seu site, você pode usar CSS mais específico para direcionar um único formulário.
Para fazer isso, você precisará encontrar o número de ID exclusivo do formulário cujo título você deseja adicionar um ícone.
Você pode encontrar um ID de formulário em seu shortcode, que pode ser visualizado acessando WPForms " All Forms e procurando na coluna Shortcode.
Usaremos o número de ID 30 para tornar nosso CSS mais específico. Aqui está o CSS que adicionará apenas um ícone na frente do título do formulário identificado:
#wpforms-30 .wpforms-form .wpforms-title:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and title */
}
Esse CSS é quase exatamente igual ao snippet que adicionará ícones a todos os títulos de formulários em seu site. A única diferença é que adicionamos #wpforms-form-30portanto, agora esse estilo será aplicado somente a esse formulário.
Para o seu próprio formulário, basta alterar o número de ID do formulário e substituir o unicode do ícone que deseja apresentar, conforme descrito na seção acima.
Exibição de ícones na frente de etiquetas de campo
Você pode adicionar um ícone na frente de cada um dos rótulos de campo em seus formulários usando um snippet CSS personalizável. O código que você precisa adicionar mudará um pouco, dependendo se você deseja usar um ícone para todos os rótulos de campo em seu site ou se deseja exibir um ícone na frente de um rótulo de campo específico.
Adição de um ícone a todos os rótulos de campo
A exibição de um ícone na frente de todos os rótulos de campo em seu site requer um snippet CSS muito semelhante ao descrito acima para títulos de formulários:
.wpforms-form .wpforms-field-label:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and label */
}
Certifique-se de substituir o unicode no snippet acima pelo do ícone que você deseja usar. Você também pode ajustar o tamanho da margem de acordo com suas preferências.
No front-end, seus ícones de rótulo de campo devem ter a seguinte aparência:
Como adicionar um ícone ao rótulo de um campo específico
Talvez você não queira que o mesmo ícone apareça ao lado de todos os campos. Para direcionar apenas um único campo, o snippet CSS deve ser mais específico, incluindo o ID exclusivo do campo cujo rótulo você deseja adicionar um ícone.
Essa abordagem é muito semelhante à segmentação do título de um único formulário, conforme descrito acima.
Para encontrar o ID do campo que você precisa usar no snippet, abra o formulário no frontend em uma página publicada ou usando a visualização do formulário. Em seguida, clique com o botão direito do mouse no campo que deseja direcionar e selecione Inspecionar.
Sua tela deve se dividir para mostrar o código-fonte da página. Certifique-se de que todo o campo que você deseja direcionar esteja destacado (incluindo o rótulo e a caixa de entrada) e, em seguida, procure o ID.
Observação: O ID do campo que você pode encontrar usando o inspetor do navegador é diferente do ID do campo que você pode ver no construtor de formulários.
Ao personalizar o snippet CSS para adicionar ícones a rótulos de campo específicos, certifique-se de usar o ID de campo completo do inspetor, e não o ID de campo do construtor de formulários.
Para o campo na imagem acima, o ID é wpforms-9-field_0-container.
Aqui está o trecho de CSS para adicionar um ícone ao rótulo de um campo específico:
.wpforms-form #wpforms-9-field_0-container .wpforms-field-label:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and label */
}
Se você verificar a primeira linha desse snippet de CSS, perceberá que adicionamos um #seguido pelo ID que acabamos de encontrar. Agora, nosso ícone só será adicionado a esse único campo, sem alterar nenhum outro rótulo de campo (neste formulário ou em qualquer outro).
Exibição de ícones em campos de entrada
Em vez de adicionar um ícone ao rótulo de um campo, você pode exibi-lo no próprio campo. O trecho de código que você precisará usar para fazer isso é um pouco diferente dos outros deste tutorial, mas usa muitos dos mesmos elementos:
#wpforms-form-9 .wpforms-field,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block {
position: relative;
}
#wpforms-form-9 input[type="text"],
#wpforms-form-9 input[type="email"],
#wpforms-form-9 textarea {
padding-left: 35px !important;
}
#wpforms-form-9 .wpforms-field .wpforms-field-label {
position: relative;
}
#wpforms-form-9 .wpforms-field .wpforms-field-label:before,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block:before {
position: absolute;
left: 10px;
top: 32px;
z-index: 99999;
color: #757575;
font-size: 17px;
opacity: 0.3;
}
#wpforms-9-field_0-container .wpforms-field-label:before,
#wpforms-9-field_1-container .wpforms-field-label:before,
#wpforms-9-field_2-container .wpforms-field-label:before {
font-family: "Font Awesome 5 Free";
}
#wpforms-9-field_0-container .wpforms-field-label:before {
content: '\f007';
}
#wpforms-9-field_1-container .wpforms-field-label:before {
content: '\f0e0';
}
#wpforms-9-field_2-container .wpforms-field-label:before {
content: '\f086';
}
As partes desse snippet que você precisará personalizar são as seguintes:
- Altere o número em
#wpforms-form-9para o ID do formulário ao qual você deseja adicionar o(s) ícone(s). Você pode encontrar esse ID no shortcode do formulário, conforme descrito anteriormente neste tutorial. - Substituir
wpforms-9-field_0-containere os outros IDs de campo no snippet acima com os IDs de campo de seu próprio formulário. Você deve usar o ID de campo completo, conforme descrito na seção seção anterior deste artigo. - Substitua os unicodes no snippet acima (
f007,f0e0ef086) para os unicodes dos ícones do Font Awesome que você deseja usar.
Nosso snippet de exemplo adiciona ícones a três campos em nosso formulário. Você pode adicionar ícones a mais campos repetindo a linha que diz #wpforms-9-field_0-container .wpforms-field-label:before, e adicionando seus próprios IDs de formulário e campo.
Em seguida, repita a última linha do snippet, substituindo seu próprio ID de campo pelo do exemplo.
Observação: esse snippet é compatível apenas com os seguintes tipos de campo:
- Texto de linha única
- Texto do parágrafo
- Nome
- Site / URL
Você também pode remover essas linhas para adicionar ícones a menos campos em seu formulário.
Por fim, se quiser alterar a aparência dos ícones, você poderá ajustar o posicionamento, a cor, o tamanho e a opacidade deles alterando os valores nas linhas a seguir:
position: absolute; left: 10px; top: 32px; z-index: 99999; color: #757575; tamanho da fonte: 17px; opacidade: 0,3;
No front-end, nosso exemplo tem a seguinte aparência:
Exibição de ícones em campos HTML
Adicionar ícones a campos HTML é a opção mais simples e não requer CSS personalizado.
Tudo o que você precisa é adicionar um shortcode simples no campo HTML. Como exemplo, aqui está o shortcode necessário para o ícone do avião de papel que usamos em vários dos exemplos acima:
[icon name="paper-plane"]
Para ajustar isso para um ícone diferente, basta copiar o nome da página do ícone específico no Font Awesome. O nome do ícone estará em um texto grande próximo à parte superior da página.
Em seguida, substitua paper-plane no shortcode acima com o nome do ícone que você deseja usar.
No front-end, um ícone em um campo HTML pode ter a seguinte aparência:
Em um campo HTML, você também pode adicionar texto ou HTML adicional ao redor do shortcode do ícone, se desejar. Para obter mais detalhes, consulte nosso tutorial completo sobre o campo HTML.
Adição de ícones aos botões de envio
O último exemplo que compartilharemos neste tutorial é como adicionar um ícone ao botão Submit de seus formulários.
Aqui está o trecho de que você precisará:
.wpforms-form button[type=submit]:before {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}
Como nos outros exemplos deste artigo, substitua o unicode pelo ícone desejado e altere a margem, se desejar.
No front-end, o ícone do botão de envio será semelhante a este:
Colocação de ícones no lado direito
Se quiser colocar os ícones no lado direito de um item e não no esquerdo, você pode usar :after no lugar de :before. Por exemplo, para colocar o ícone do avião de papel no lado direito do botão Enviar, você pode usar o seguinte trecho de código:
.wpforms-form button[type=submit]:after {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}
O snippet acima colocará o ícone à direita de seu botão de envio:
É isso aí! Agora você pode adicionar ícones a vários elementos em seus formulários.
Gostaria de personalizar a aparência de seus formulários usando uma imagem de fundo? Confira nosso tutorial sobre como adicionar imagens de fundo a seus formulários com CSS.