Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Arta

Add tiktok logo to website

Question

Site URL: https://lilsuka.com

In the header I have my social media links, however I am unsure how to add a custom logo for tiktok. I have the image I wish to use my computer so I was hoping to know how to replace the link logo with the tiktok logo.

Share this post


Link to post

11 answers to this question

Recommended Posts

  • 1

You can add this code to Home > Design > Custom CSS. Replace image in code with tik tok image url

a.icon.icon--fill[aria-label="URL"] svg {
    display: none;
}
a.icon.icon--fill[aria-label="URL"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
1 hour ago, trainwithtimko said:

Thanks tuanphan, your custom CSS worked for me. However, it only worked in the site header and not the footer. Why is this?

Can you share link to your site? I guess footer icons has different class name.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

I tried your solution and it worked but it also overrode the icon for the regular URL. I saw a code somewhere where they specified to only change if it had "tiktok" in the css.

I'm looking for a solution that only impacts the tiktok url.

Share this post


Link to post
  • 0
On 4/28/2020 at 4:28 AM, tuanphan said:

Can you share link to your site? I guess footer icons has different class name.

oh yeh this didn't work for my footer either, do you have the code to input this logo into the footer too?

Share this post


Link to post
  • 0
On 4/28/2020 at 8:29 AM, trainwithtimko said:

Thanks tuanphan, your custom CSS worked for me. However, it only worked in the site header and not the footer. Why is this?

 

On 5/13/2020 at 6:21 AM, jansbri_ said:

I tried your solution and it worked but it also overrode the icon for the regular URL. I saw a code somewhere where they specified to only change if it had "tiktok" in the css.

I'm looking for a solution that only impacts the tiktok url.

.sqs-svg-icon--wrapper[href*="tiktok"] svg {
    display: none;
}
.sqs-svg-icon--wrapper[href*="tiktok"] {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/11/List-71.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
12 hours ago, silviacantu said:

@tuanphan

Thanks for sharing above.

I used the CSS code you gave (the second one), but instead of https://beaverhero.com/wp-content/uploads/2019/11/List-71.png I should place a png icon of TikTok. How can I do?

Thanks a lot for your precious help

 

Here my URL:

https://www.silviacantu.com/

Yes. You can replace with tiktok icon url.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
On 4/27/2020 at 9:28 PM, tuanphan said:

Can you share link to your site? I guess footer icons has different class name.

I'm attempting to do the same thing, and the link icon is not changing. What am I doing wrong? This is the code I used

.sqs-svg-icon--wrapper[href*="tiktok"] svg {
    display: none;
}
.sqs-svg-icon--wrapper[href*="tiktok"] {
    background-image: url(https://static1.squarespace.com/static/5a08c31a64b05f2730b4121b/t/5f0a2ca5e08c710baddbc6a1/1594502309912/tiktok+white.png);
    background-size: cover;
    background-repeat: no-repeat;
}

And this is my website: https://www.ignitedinkwriting.com/

My social media links are in the footer.

Share this post


Link to post
  • 0
On 7/11/2020 at 12:02 AM, silviacantu said:

 

 

53 minutes ago, caitlineditor said:

I'm attempting to do the same thing, and the link icon is not changing. What am I doing wrong? This is the code I used

.sqs-svg-icon--wrapper[href*="tiktok"] svg {
    display: none;
}
.sqs-svg-icon--wrapper[href*="tiktok"] {
    background-image: url(https://static1.squarespace.com/static/5a08c31a64b05f2730b4121b/t/5f0a2ca5e08c710baddbc6a1/1594502309912/tiktok+white.png);
    background-size: cover;
    background-repeat: no-repeat;
}

And this is my website: https://www.ignitedinkwriting.com/

My social media links are in the footer.

Remove above code, add this to Home > Settings > Advanced > Code Injection > Header

<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>
<style>
  [href*="tiktok.com"] {
    fill: white;
}
</style>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...