Botão de Whatsapp [problemas]

Layout
1

Olá, pessoal. Estou tendo problemas para instalar um botão de whatsapp no me site. Tentei dois códigos diferentes que encontrei aqui, porém ambos estão ficando com o ícone do whatsapp desalinhado e um segundo ícone cinza por trás. Alguém poderia me ajudar com isso?

O código que utilizei é o seguinte:

> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
> <a href="https://wa.me/555131052155?text=Seja%20bem%20vindo" style="position:fixed;width:60px;height:60px;bottom:40px;right:40px;background-color:#25d366;color:#FFF;border-radius:50px;text-align:center;font-size:30px;box-shadow: 1px 1px 2px #888; z-index:1000;" target="_blank">
> <i style="margin-top:0px" class="fa fa-whatsapp"></i>
> </a>

Captura de tela 2020-10-05 130350

2

sei site está em manutenção…
teria que tirar de manutenção ou enviar o endereço de manutenção!

3
4

Consegue acessar o link da loja em manutenção? Qualquer coisa coloco no ar. Obrigado!

5

olha tive que mudar o CSS pq está uma mistureba, então criei!

.fa-whatsapp-1:before {
    content: "\f232";
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

e mudei esse código da implementação do WhatsApp

DE

<i style="margin-top:0px" class="fa fa-whatsapp"></i>

PARA

<i style="margin-top:0px" class="fa fa-whatsapp-1"></i>
6

Obrigado, Leonardo!

Saiu aquele ícone cinza de trás e o ícone do whatsapp ficou centralizado verticalmente, mas não está bem centralizado na horizontal. Tem algo que eu possa fazer?

Captura de tela 2020-10-06 130326

7

veja se ajuda, vai ajustando o width e o height

.fa-whatsapp-1:before {
    content: "\f232";
    width: 24px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
}

image

8

Funcionou. Muito obrigado!

1 curtida
9

Fala, pessoal!

Cheguei atrasado mas espero ajudar hahah
Eu criei um tutorial em vídeo pra adicionar o botão flutuante do Whatsapp:

Tutorial em vídeo:

O passo a passo é bem simples, mostrando como e onde incluir na LI pra não ter erro. Eu gosto de usar ícone pq ajuda na performance, mas as vezes o Font Awesome dá uns problemas, por isso ensinei usando imagem.

Este é o primeiro vídeo do canal, então se puder dar uma força lá eu fico feliz :smiley:

Se precisarem de alguma coisa estou a disposição!

Douglas Medina

Especialista em e-commerce

Whatsapp :zap: Criação de lojas
Instagram :zap: @_douglasmedina
Conteúdo :zap: douglasmedina.com
Curso Online :zap: Personaliza LI