Como adicionar ícone incrível de fonte ao botão de envio do formulário de contato 7

Um botão simples “Submit” no seu formulário de contato parece genérico. Adicionando um ícone incrível de fonte dentro do botão de envio do Formulário de Contato 7 dá-lhe uma dica visual que chama a atenção e torna a ação mais clara Pense num ícone de plano de papel ao lado de “Send Message” ou num ícone de envelope ao lado de “Submit.”

A captura? formulário de contato 7 não tem uma opção embutida para adicionar ícones aos botões Você precisa inserir o código hexadecimal Unicode do ícone diretamente na tag de formulário CF7 e emparelhá-lo com um pequeno trecho CSS para carregar a fonte correta.

Este tutorial orienta você por todo o processo passo a passo Você aprenderá como adicionar um ícone incrível da fonte para o botão de envio CF7, adicione ícones dentro dos espaços reservados dos campos de formulário e manipule a configuração da família de fontes Font Awesome para usuários do Elementor e configurações não-Elementor Atualizado para Font Awesome 5, 6 e as versões mais recentes do Elementor de 2026.

O que você precisará

Antes de começar, certifique-se de ter isso em vigor:

• WordPress com Formulário de contato 7 instalado e ativado
• Fonte incrível carregado em seu site (via Elementor, um plugin ou CDN manual)
• Acesso ao seu tema Css personalizado painel (Aparência > Personalizar > CSS adicional)
• O código hexadecimal Unicode para o ícone desejado (mostraremos onde encontrar isso)

Tempo necessário: 5-10 minutos

Nível de habilidade: Iniciante (não é necessária experiência em codificação, basta copiar e colar)

Etapa 1: habilite fontes incríveis em seu site

Seu site precisa de Font Awesome carregado antes que qualquer ícone seja renderizado Como você faz isso depende da sua configuração:

Se você estiver usando o Elementor (método mais fácil)

Elementor vem com Font Awesome integrado Você só precisa ter certeza de que a compatibilidade com versões anteriores do Font Awesome 4 está habilitada se você estiver usando códigos de ícone mais antigos.

1. Ir para Elementor > Configurações > Avançado guia no seu painel WordPress
2. Encontrar “Load Font Awesome 4 Suporte” e configure para “Yes”
3. Clique Salvar alterações

Atualização de 2026: Elementor agora carrega Font Awesome 6 por padrão em versões recentes O “Load Font Awesome 4 Support” toggle garante compatibilidade com versões anteriores com códigos de ícones mais antigos Se você estiver usando códigos de ícone FA6 (como os do Font Pesquisa de ícones incrível 6), você não precisa alterar nada, já que o Elementor lida com isso automaticamente.

Se você também estiver usando Complementos Mestres para Elementor, você tem acesso a 8 bibliotecas de ícones premium além da fonte Incrível, oferecendo milhares de ícones adicionais dentro do editor Elementor.

Se você não estiver usando o Elementor

Instale o oficial Fonte Plugin incrível do WordPress.org. Após ativação:

1. Ir para Configurações > Fonte incrível
2. Escolha sua versão (Font Awesome 5 Free ou 6 Free)
3. Selecione o método de entrega (CDN para v5 ou Kit para v6)
4. Salve e você está pronto para usar ícones em todo o seu site

Importante: Font Awesome 6 não está disponível através do CDN legado Se você quiser ícones FA6, precisará configurar um Kit gratuito em fontawesome. com ou use a integração Kit do plugin WordPress.

Passo 2: Encontre o Código Hex Unicode do Ícone

Cada ícone Font Awesome tem um código hexadecimal Unicode exclusivo Este é o código que você colará no botão de envio do Formulário de Contato 7.

Veja como encontrá-lo:

1. Ir para o Fonte Página de pesquisa de ícones incríveis
2. Procure o ícone desejado (por exemplo, “paper plane”, “envelope”, “arrow right”)
3. Clique no ícone para abrir sua página de detalhes
4. Procura o Unicode valor. é um código hexadecimal de 4-5 caracteres como f1d8 (plano de papel) ou f0e0 (envelope)

Aqui estão alguns ícones populares para enviar botões e seus códigos Unicode:

Passo 3: Adicione o ícone incrível da fonte ao botão Enviar do formulário de contato 7

Agora para o evento principal Você vai inserir o código hexadecimal Unicode do ícone diretamente na tag do formulário CF7 Aqui está o processo exato:

Abra seu formulário de contato

Ir para Contato > Formulários de Contato no seu painel WordPress Clique no formulário que deseja editar (ou criar um novo).

Encontre a tag Enviar botão

No editor de formulários, procure a tag do botão enviar Normalmente fica assim:

[submit "Submit"]

Insira o código hexadecimal Unicode

Substitua a tag de envio pelo código de ícone colocado ao lado do texto do botão Use o formato de entidade HTML &#x + código hexadecimal + ;

Por exemplo, para adicionar um ícone de plano de papel após o texto “Send Message”:

[submit "Send Message "]

Ou para colocar o ícone antes do texto:

[submit " Send Message"]

Aqui está um exemplo completo de formulário de contato com o ícone no botão enviar:

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

Passo 4: Adicione o CSS para a fonte de ícone

O ícone não será exibido corretamente até que você diga ao navegador qual fonte usar para o botão enviar Sem esse CSS, você verá um pequeno quadrado ou ponto de interrogação em vez do ícone.

Ir para Aparência > Personalizar > CSS adicional e cole um dos seguintes trechos:

Para Font Awesome 5 (Elementor Padrão)

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

Para fonte incrível 6

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

O font-weight: 900 é necessário para ícones Sólidos (o estilo mais comum).Se você estiver usando ícones Regulares, altere-o para font-weight: 400. Para ícones de marca (como o logotipo do Twitter ou GitHub), use font-family: "Font Awesome 6 Brands" com font-weight: 400.

Dica profissional: Se o ícone for exibido na área de trabalho, mas não no celular, adicione -webkit-font-smoothing: antialiased; e text-rendering: auto; para a regra CSS. isso corrige inconsistências de renderização em navegadores.

Salve seu CSS e visualize o formulário Agora você deve ver o ícone renderizado dentro do botão enviar ao lado do texto.

Bônus: adicione ícones incríveis de fonte aos campos de espaço reservado CF7

Quer ícones dentro dos espaços reservados do seu campo de formulário também? você pode adicionar um ícone de envelope no campo de e-mail, um ícone de usuário no campo de nome e um ícone de lápis no campo de mensagem Ele leva a mesma abordagem Unicode.

Aqui está o código CF7 com ícones nos espaços reservados:

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

Agora adicione o CSS para aplicar a fonte Font Awesome aos seus espaços reservados:

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

Nota sobre fontes de espaço reservado: Configuração font-family em espaços reservados afeta todo o texto do espaço reservado, não apenas o ícone Se o resto do texto do espaço reservado parecer diferente do esperado, adicione a fonte do corpo do seu tema como um fallback: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

O método sem código: Estilo CF7 com complementos mestres para elementor

Se preferir pular totalmente o CSS, Complementos Mestres para Elementor inclui um dedicado Formulário de contato 7 widget que permite personalizar visualmente a aparência do seu formulário, sem escrever uma única linha de código.

Eis o que pode fazer com o widget do Formulário de Contato MA 7:

• Estilize o botão enviar com cores, gradientes, efeitos de hover, bordas e preenchimento personalizados
• Personalize os campos de entrada com cores de fundo, raio de borda e tipografia
• Aplique predefinições de estilo pré-construídas para obter um formulário polido em um clique
• Controle o espaçamento e o layout para cada elemento de formulário do painel Elementor
• Usar qualquer ícone de 8 bibliotecas de ícones premium empacotado com complementos mestres

Esta é a abordagem mais rápida se você quiser que seu formulário de contato corresponda ao design do seu site sem se aprofundar nos seletores CSS Basta arrastar o widget, escolher seu formulário e estilizar tudo, desde o editor visual.

Solução de problemas comuns

O ícone aparece como uma caixa quadrada ou ponto de interrogação

Isso significa que a fonte Font Awesome não está carregando para o botão enviar Verifique novamente isso:

• Font Awesome está ativado em seu site (configuração Elementor ou plugin FA)
• Seu CSS inclui o correto font-family e font-weight
• Você está usando a versão certa (os nomes das famílias de fontes FA5 vs FA6 são diferentes)

O ícone aparece, mas o texto normal parece estranho

Quando você definir font-family para Font Awesome para o botão inteiro, todo o texto no botão usa essa fonte Adicione uma fonte de fallback: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

O ícone funciona na área de trabalho, mas não no celular

Adicione essas propriedades à sua regra CSS:

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

Quero usar um :: antes do pseudoelemento

O botão de envio CF7 é um <input type="submit"> elemento. Os elementos de entrada não suportam ::before ou ::after pseudo-elementos porque eles não podem ter nós filhos É por isso que usamos a abordagem hexadecimal Unicode diretamente no texto do botão Em vez disso, Se você precisar de suporte a pseudo-elementos, você precisará converter o botão enviar para um <button> marque usando um gancho de filtro CF7, que requer PHP personalizado.

Perguntas frequentes

Embrulhando

Adicionando a ícone incrível da fonte para o botão de envio do Formulário de Contato 7 é uma pequena mudança que faz uma diferença notável. O método de código hexadecimal Unicode funciona em Font Awesome 5 e 6, requer apenas duas etapas (editar a tag de formulário + adicionar CSS) e leva menos de 5 minutos para ser configurado.

Para a abordagem de espaço reservado, aplica-se a mesma lógica: cole o código hexadecimal dentro do atributo de espaço reservado e defina a família de fontes em seu CSS. Ambos os métodos dão aos seus formulários uma sensação mais polida e profissional.

Se você quiser pular totalmente o CSS, o Widget Master Addons CF7 alças formam o estilo visualmente dentro do Elementor De qualquer forma, seus formulários ficarão melhores do que a saída CF7 padrão.

Leitura relacionada: Guia de ícones e bibliotecas de fontes do elementor | Como criar botões animados no elementor | Estilo CF7 com complementos mestres