Como deixar o icone igual

Código CSS/HTML
1

Adicionei este código para ter o ícone do tiktok, mas gostaria que ficasse igual aos outros, alguém consegue me ajudar?

$(function(){
	setTimeout(function(){
		$('#rodape .lista-redes > ul').append('<li><a href="https://www.tiktok.com/@amandamagrostore" target="_blank"><i class="icon-tiktok" style=""><div style="vertical-align: middle;width: 15px;height: 15px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="width: 20px;height: 20px;"><path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"></path></svg></div></i></a></li>');
	}, 500)
})

image
image390×400 43.5 KB

:raising_hands:

1 curtida
2

Boa tarde! Coloca assim:

<script>
$(function(){
  setTimeout(function(){
    $('#rodape .lista-redes > ul').append(`
      <li style="display: flex; align-items: center; justify-content: center;">
        <a href="https://www.tiktok.com/@amandamagrostore" target="_blank" 
           style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
          <i class="icon-tiktok" style="display: flex; align-items: center; justify-content: center;">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" 
                 style="width: 15px; height: 15px; display: block;">
              <path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"></path>
            </svg>
          </i>
        </a>
      </li>
    `);
  }, 500);
});
</script>
<style>
i.icon-tiktok {
    border-radius: 100%;
    background: white;
}
</style>

image

1 curtida
3

Olá! Salvando mais uma vez!
Mas adicionei o código, mas o ícone sumiu…

1 curtida
4

Eu tinha errado a tag script, coloquei style no lugar. Atualizei acima, só pegar de novo

5

Opa agora foi! :raising_hands:

Adicionei tb o css para tirar a barrinha cinza ao lado, mas como eu consigo por um pequeno espaço entre os ícones?

.lista-redes ul li {
    border-left: none; !important
}
6 
.lista-redes ul li {
	border-left: 0px solid transparent;
    margin-left: 3px !important;
}

Só adicionar um margin, assim

2 curtidas
7

Perfeito como sempre! :raising_hands:

1 curtida