Add tiktok logo to website

On 1/1/2022 at 12:33 AM, af76131 said:

@tuanphan Hi! I'd like to add TikTok and CashApp logos to my social links in my head and footer. Can you help me? I'm semi familiar with css and coding and would love to know how to do this so I can tweak the code on my own in the future if need be. Also wondering if there is a way to stack the icons instead of having them inline?

You can add 2 generic links, then we will give code to change generic icons with Tiktok/CashApp icon.

7 hours ago, tuanphan said:

You can add 2 generic links, then we will give code to change generic icons with Tiktok/CashApp icon.

@taunphan I've added the generic links

On 1/3/2022 at 12:07 AM, af76131 said:

@taunphan I've added the generic links

Hi. What is your site url?

(Note for me: Tiktok/CashApp icon.)

8 hours ago, tuanphan said:

Hi. What is your site url?

(Note for me: Tiktok/CashApp icon.)

@tuanphan www.ashley-fletcher.com

(sorry for the previous name misspelling my eyes are a little wonky starring at my screen lol)

15 hours ago, af76131 said:

@tuanphan www.ashley-fletcher.com

(sorry for the previous name misspelling my eyes are a little wonky starring at my screen lol)

With Tiktok, add to Settings > Advanced > Code Injection > Footer

 <script>
var tiktoks = document.querySelectorAll('a[href*="tiktok"]')

tiktoks.forEach(item => {
    item.innerHTML = `
<svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 50 50">
  <path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"/>
</svg>`
})
</script>

With Cashapp, You mean CashApp or Ebay? I don't see Cashapp on Header.

4 hours ago, tuanphan said:

With Tiktok, add to Settings > Advanced > Code Injection > Footer

 <script>
var tiktoks = document.querySelectorAll('a[href*="tiktok"]')

tiktoks.forEach(item => {
    item.innerHTML = `
<svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 50 50">
  <path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"/>
</svg>`
})
</script>

With Cashapp, You mean CashApp or Ebay? I don't see Cashapp on Header.

Thank you! I'm sorry I meant Etsy not Cashapp. Now the TikTok icon in my footer is black not white like the other footer social icons. Do you know how I can change that? @tuanphan

On 1/5/2022 at 7:43 PM, af76131 said:

Thank you! I'm sorry I meant Etsy not Cashapp. Now the TikTok icon in my footer is black not white like the other footer social icons. Do you know how I can change that? @tuanphan

Use this CSS

footer.sections [href*="tiktok"] svg {
    fill: white;
}
footer.sections [href*="tiktok"] {
    width: 30px !important;
    height: 30px !important;
    position: relative;
    top: 2px;
}