Tiktok header icon color change needed

Site URL: https://www.marydisomma.com

I can't figure out how to change the color of my tiktok social link icon in the header of a client's site. I've tried using code from several different threads I found in the forum, but I just couldn't make any of them work.

Also, tiktok icon is only showing up on the homepage. On the other pages, a hyperlink icon shows instead. I need the tiktok icon in the header of each page, and it needs to be #5793ce.

Thank you to the folks who help here on the forum. You guys are life savers! 🙂

12 hours ago, AnaDavisDesign said:

Site URL: https://www.marydisomma.com

I can't figure out how to change the color of my tiktok social link icon in the header of a client's site. I've tried using code from several different threads I found in the forum, but I just couldn't make any of them work.

Also, tiktok icon is only showing up on the homepage. On the other pages, a hyperlink icon shows instead. I need the tiktok icon in the header of each page, and it needs to be #5793ce.

Thank you to the folks who help here on the forum. You guys are life savers! 🙂

Hi. Your tiktok is IMAGE, can't change image color.

To change color, design a new image with color you want, then use code to add new tiktok image.

Another way is add Tiktok icon with FontAwesome Icon, thus you can change color, size easier.

What do you think?

Oh! That explains it. I would try font awesome, but I don't have the font. Do I have to buy it?

I still have the other issue, that the hyperlink icon is on every other page. Do I need to use code injection for this on every page of the website?

On 7/28/2021 at 8:36 PM, AnaDavisDesign said:

Oh! That explains it. I would try font awesome, but I don't have the font. Do I have to buy it?

I still have the other issue, that the hyperlink icon is on every other page. Do I need to use code injection for this on every page of the website?

No Need. Fontawesome is free.

You need to 2 steps

First, add this code to Code Injection > Header.

if your plan is Personal >> Edit Site Footer >> Add a Code Block >> paste this code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">

Step 2. When you're done, let me know. We will check code to add Tiktok

I added the code to my header on the Home page. But will I have to do this for EVERY page? 

5 hours ago, AnaDavisDesign said:

I added the code to my header on the Home page. But will I have to do this for EVERY page? 

Add to Settings > Advanced > Code Injection > Header, not Homepage Header

Add to Design > Custom CSS

/* tiktok icons size */
 [href*="tiktok"] {
    width: 30px !important;
    height: 30px !important;
    visibility: hidden;
  }
/* add tiktok */
  a[href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    position: relative;
    top: 5px;
}

The tiktok logo appears to be working just fine. I had to play around with the colors on my footer icons to make one color work in both the header and the footer, but it looks good. Thanks for your help!

@tuanphan  code worked great for header.  please advise on footer.

www.quillconsulting.com

20 hours ago, quillconsultingllc said:

@tuanphan  code worked great for header.  please advise on footer.

 

www.quillconsulting.com

Add this code for Footer

footer.sections a[href*="tiktok"]:before {
    border: 2px solid white;
    width: 36px;
    height: 36px;
    display: inline-block;
    border-radius: 50%;
    top: -15px;
}
footer.sections a[href*="tiktok"] {
    overflow: visible;
    width: auto !important;
    height: auto !important;
}