TikTok Social Media Icon

Hi @marcofavaretto this was recently asked but for a different social icon. I will provide the response @mrfoxtalbot provided to achieve this, here is a link to this specific thread.

He suggested uploading an image and placing it next to the social icons menu. Here is?a video?to show you how to go about this.

By the way, the option to add custom icons ?is currently being worked on?in GitHub so this might be available soon.

I don’t know if this is the same thing, but I mean in the homepage… if you go all the way down there’s something “native” about WordPress that allows me to put social media icons, but not the TikTok one.

It is something related to the menus in WordPress, I think…

• This reply was modified 1 year, 5 months ago by marcofavaretto.

I don’t know if this is the same thing, but I mean in the homepage… if you go all the way down there’s something “native” about WordPress that allows me to put social media icons, but not the TikTok one.

Hi @marcofavaretto apologies, I was provided information for the Twenty Twenty-Three theme. That will not work in this case, I would suggest using a social icon plugin to add the TikTok icon you can pick one from this list.

However, there is a hacky way of doing it using CSS but this code works best if you are only adding one custom social icon. You can add the TikTok icon as an image to your site, once that is done you can use this image to replace the chain icon.

svg.icon.icon-chain{
	fill:transparent; 
  background-color:transparent;
	background: url('https://YOUR-IMAGE-PATH/tiktok.png') no-repeat center center;
  background-size: contain;
	
}

You will need to go into your media library copy the image URL and replace it where it says https://YOUR-IMAGE-PATH/whatsapp.png inside the CSS code.

Ok thanks, I made it work via CSS…

Anyhow, it’s kinda small, how can I make it bigger?

Also, how can I put it in the center of the “box”?

• This reply was modified 1 year, 5 months ago by marcofavaretto.
• This reply was modified 1 year, 5 months ago by marcofavaretto.

Hi @marcofavaretto I am still seeing the chain icon on my end so I am not sure what it looks like.

However, it all depends on the image you add. I would suggest adding a square and making sure the icon is touching the edges. Here is a screenshot showing what I would add.

Yeah, that’s normal… I haven’t finalised it yet, that’s why…

• This reply was modified 1 year, 5 months ago by marcofavaretto.

Try now, you should see it…

• This reply was modified 1 year, 5 months ago by marcofavaretto.

Hey @marcofavaretto – thanks for letting us know. I see what you mean.

One thing I can see having an impact is the fact that the icon you selected is one of a different style to the others. It has a white background, with the dark icon (where the others are just a white icon with a transparent background.

The best approach would be to source a new icon image of a similar style (and no background) – if you’re able to find one.

But if you’d like to try a further CSS approach you could replace the CSS you added with this (making sure you still reference the correct image).

svg.icon.icon-chain{
  fill:transparent; 
  background-color:transparent;
  background: url('https://YOUR-IMAGE-PATH/tiktok.png') no-repeat center center;
  background-size: contain;
  height: 24px;
  width: 24px;
  top: 8px;
}

Could you please try that out and see how it goes?

Done. Like it more, now I just should find a white image with transparent background…

Try to have a look right now, please @jordesign

Hi @marcofavaretto this is what I see now, it looks great in size.

Yes, this is what it should look like @thelmachido , thanks a lot for your help! Also thank you to @jordesign

Hi @marcofavaretto thats good to know, I will mark this issue as resolved. If you have questions feel free to reach out on forums.

you can add the TikTok logo to your website’s footer using CSS. However, it’s important to note that including a trademarked logo like TikTok’s requires proper authorization and adherence to their brand guidelines.

CSS:

.social-media-link {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}

.tiktok {
background-image: url(‘path-to-tiktok-logo.png’);
}

you need to replace 'path-to-tiktok-logo.png' with the actual path to your TikTok logo image file. Adjust the dimensions (width and height) of the .social-media-link class as per your preference.

Remember to replace # in the href attribute of the <a> tag with the actual link to your TikTok profile or any relevant TikTok page.

@topstik try to have a look if what I did is okay, it should already be on the website, at the very bottom of the homepage.