O CSS está tudo certinho
Acho que tem algum erro nesse.
Estranho, no teste está funcionando perfeitamente.
Tenta com essas configurações:
<script type="text/javascript" charset="utf-8">
$(document).ready(fucntion(){
var btnWPP = $(''+
'<li class="float-whats">'+
'<a href="https://api.whatsapp.com/send?phone=5588988796332" title="Whatsapp" target="_blank">'+
'<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 37.1 37.101"> <g transform="translate(0)"> <path class="a" d="M18.554,37.1a18.427,18.427,0,0,1-10.2-3.066l-7.13,2.279,2.312-6.892A18.349,18.349,0,0,1,0,18.551,18.569,18.569,0,0,1,18.545,0h.009a18.551,18.551,0,0,1,0,37.1ZM11.565,8.485a2.689,2.689,0,0,0-1.9.665L9.62,9.2a5.93,5.93,0,0,0-1.848,4.465,9.615,9.615,0,0,0,2.177,5.561l.026.035c.021.027.059.083.117.167a22.02,22.02,0,0,0,9.118,7.991,15.781,15.781,0,0,0,5.433,1.519,4.811,4.811,0,0,0,1.065-.124c1.445-.311,3.2-1.376,3.641-2.617a4.645,4.645,0,0,0,.318-2.574c-.106-.183-.352-.3-.726-.481-.1-.046-.2-.1-.311-.152-.031-.016-3.148-1.564-3.7-1.756a1.342,1.342,0,0,0-.471-.094,1.035,1.035,0,0,0-.86.5l-.216.3a17.839,17.839,0,0,1-1.234,1.618,1.046,1.046,0,0,1-.775.314,1.4,1.4,0,0,1-.532-.108l-.167-.068a13.66,13.66,0,0,1-4.184-2.615,16.3,16.3,0,0,1-3.009-3.741.856.856,0,0,1,.2-1.138l.015-.017c.158-.2.314-.362.465-.522l0,0,0,0c.109-.116.221-.235.335-.366l.05-.057a3,3,0,0,0,.551-.794,1.1,1.1,0,0,0-.079-1c-.09-.19-.638-1.519-1.122-2.692l-.025-.06c-.2-.49-.389-.944-.521-1.261-.354-.847-.617-.893-1.178-.916l-.063,0C11.958,8.494,11.77,8.485,11.565,8.485Z" transform="translate(0 0)"></path> </g> </svg>'+
'</a>'+
'</li>'
);
$('.float-open').remove();
$('.float-contact').append(btnWPP);
});
</script>
Lembre-se, que tem a demora de cache para atualizar no site efetivamente.
Na suas duas primeiras prints, já estavam corretos.
Coloquei exatamente igual a esse.
Vi que o primeiro estava em JAVA.
Já esses último em HTML, exceto o CSS.
Pela sua foto você coloca em HTML e cabeçalho.
Faz alguma diferença ser cabaçalho ou rodapé?
Fiz a alteração com seu último código, estou aguardando atualizar no site.
O certo é como estava o primeiro, em javascript. Mas como não atualizou, pedi para testar em HTML. E sim, faz diferença entre cabeçalho e rodapé. O cabeçalho é dentro da tag <head> e o rodapé é dentro da tag <body>
Geralmente os códigos que mando para o pessoal, funciona de primeira. Não consigo entender o problema que está dando 
Vou aguardar a atualização do cache.
Depois vou incluir o primeiro código em cabeçalho, pois havia feito em rodapé.
Oi Gabriel voltei para o primeiro código em Java passados 15 minutos da LI não resolveu.
Exclui cache de 2 navegadores e permanece.
No momento está incluro o primeiro código em Java. É possível você verificar no seu navegador se está mostrando?
Analisei aqui, e o JS não está sendo incluído no site.
Como deveria estar:
Vou testar novamente o CSS.
Não deu certo também.
Agradeço a você pelos códigos enviados.