Problema com o alinhamento de ícones com texto no Outlook

Contents

This post is also available in: English

Este tutorial explica por que, em alguns casos, os ícones de uma assinatura de e-mail podem ficar desalinhados em relação ao texto no Outlook. Isso pode acontecer principalmente em assinaturas que usam ícones ao lado de informações como telefone, e-mail, site ou endereço.

Infelizmente, esse comportamento está relacionado à forma como o editor do Outlook interpreta e reescreve o HTML da assinatura.

Exemplo de uma assinatura de e-mail com ícones e texto não alinhados.

Problema com o alinhamento de ícones com texto no Outlook.

Observe no exemplo que o texto fica alinhado verticalmente por baixo, e não no centro.

Por que o alinhamento dos ícones muda no Outlook?

O Outlook pode alterar automaticamente o código HTML da assinatura ao salvar ou carregar a assinatura no editor.

Isso significa que, mesmo que a assinatura tenha sido criada corretamente na Bybrand, o Outlook pode remover algumas tags ou atributos HTML importantes usados para manter o alinhamento vertical entre ícones e textos.

Por exemplo, propriedades usadas para alinhar um ícone ao centro do texto podem ser removidas pelo Outlook. Como resultado, o ícone pode aparecer um pouco acima ou abaixo da linha do texto.

Observação: esse comportamento é causado pelo próprio editor do Outlook. Não é uma falha da assinatura criada na Bybrand.

Tentando forçar o alinhamento vertical

Uma possível tentativa é ajustar o alinhamento vertical dos ícones para que eles fiquem centralizados em relação ao texto.

Na prática, isso pode ser feito usando ajustes no HTML da assinatura, como alinhamento vertical em tabelas ou imagens.

No entanto, essa solução não funciona em 100% dos casos, porque o Outlook pode remover esse parâmetro ao carregar ou salvar a assinatura.

Vídeo exemplo:

Alternativas recomendadas

Substituir ícones por texto

Se o desalinhamento continuar acontecendo, recomendamos uma alternativa mais estável: substituir os ícones por textos simples.

Em vez de usar um ícone para identificar telefone, e-mail, site ou endereço, você pode usar palavras como:

Telefone:
E-mail:
Site:
Endereço:

Exemplo, assinatura de e-mail sem ícones com texto para o Outlook.

Essa opção é mais simples, mais compatível com o Outlook e reduz o risco de problemas visuais na assinatura.

Reduzir o tamanho dos ícones

Se os ícones forem muito grandes, o desalinhamento pode ficar mais evidente.

Uma alternativa simples é reduzir a dimensão dos ícones para algo entre 20px e 25px. Ícones menores tendem a minimizar a percepção do desalinhamento e deixam a assinatura com uma aparência mais equilibrada.

Usar hífen

Outra opção é remover os ícones e deixar apenas um hífen antes das informações.

Exemplo:

- Explore Partnership Opportunities
- Download Our Executive Guide
- Connect on LinkedIn

Essa alternativa mantém a assinatura limpa e fácil de entender, sem depender de imagens ou alinhamento visual complexo.

Na maioria dos casos, as informações já são autoexplicativas, especialmente quando o e-mail, telefone ou site seguem um formato conhecido.