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

13 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 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

I was able to add the custom tiktok icon, but is there a way to change which icon it uses depending on which style header is being used? Like and if/then type of thing? The same applies for my site logo. On the home page the colored version is fine, but on the others I need to use the white version.

My home page has a white background and the social icons are black. Most other pages have a picture behind the header and the icons are white, but my custom icon stays black.

Unfortunately, I'm still waiting on domains transfers and my site it not live yet.

Screen Shot 2020-08-24 at 12.46.07 PM.png

Screen Shot 2020-08-24 at 12.46.18 PM.png

Share this post


Link to post
  • 0
4 hours ago, dpattax said:

I was able to add the custom tiktok icon, but is there a way to change which icon it uses depending on which style header is being used? Like and if/then type of thing? The same applies for my site logo. On the home page the colored version is fine, but on the others I need to use the white version.

My home page has a white background and the social icons are black. Most other pages have a picture behind the header and the icons are white, but my custom icon stays black.

Unfortunately, I'm still waiting on domains transfers and my site it not live yet.

Screen Shot 2020-08-24 at 12.46.18 PM.png

Can you site url? (you can share built-in domain: abcxyz.squarespace.com)


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

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...