TikTok Logo not appearing correctly

I have attempted to add in the TikTok logo in the social links block: https://seaustravl.com/explore

But it is appearing incorrectly. Does anyone have a solution so it aligns with the design of the other logos/icons?

Also, the last link in the social link is our website but i would like a more generic web/globe/www icon rather than the hyperlink icon, is this also possible?

Which code did you use to add Tiktok? We can use CSS to add Tiktok FontAwesome icon, then you can change its color easier.

And we can also use FontAwesome to add Globe icon

6 hours ago, tuanphan said:

Which code did you use to add Tiktok? We can use CSS to add Tiktok FontAwesome icon, then you can change its color easier.

And we can also use FontAwesome to add Globe icon

Yes. Please happy to add in css. If you could please assist 

Add to Settings > Developer Tools > Code Injection > Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
/* hide current link icons */
  a.sqs-svg-icon--wrapper.url[href*="tiktok"] {
    visibility: hidden;
}
/* add tiktok */
a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    background: black;
    width: 28px;
    height: 28px;
    color: white;
    line-height: 28px;
}
</style>

If it doesn't work, please keep the first line, then we can check it again easier

On 8/9/2023 at 2:19 PM, tuanphan said:

Add to Settings > Developer Tools > Code Injection > Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
/* hide current link icons */
  a.sqs-svg-icon--wrapper.url[href*="tiktok"] {
    visibility: hidden;
}
/* add tiktok */
a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    background: black;
    width: 28px;
    height: 28px;
    color: white;
    line-height: 28px;
}
</style>

If it doesn't work, please keep the first line, then we can check it again easier

Yeah unfortunately that didnt work https://seaustravl.com/explore

On 8/27/2023 at 3:42 PM, JCT said:

Yeah unfortunately that didnt work https://seaustravl.com/explore

I see you solved?

14 hours ago, tuanphan said:

I see you solved?

Sorry there may be some confusion, It is the social links block in the middle of the page, not in the header. 
Please see attached image.

I am trying to add in the tiktok logo in the second last small box and a web/globe image in the last box. 

On 8/30/2023 at 8:16 AM, JCT said:

Sorry there may be some confusion, It is the social links block in the middle of the page, not in the header. 
Please see attached image.

I am trying to add in the tiktok logo in the second last small box and a web/globe image in the last box. 

Just add this to Custom CSS box

#block-yui_3_17_2_1_1688537674089_5133 a[href*="tiktok"] svg {
    fill: black !important;
}

On 9/3/2023 at 12:37 PM, tuanphan said:

Just add this to Custom CSS box

#block-yui_3_17_2_1_1688537674089_5133 a[href*="tiktok"] svg {
    fill: black !important;
}

Perfect - thank you - that worked, 

Could you assist in removing the standard "hyperlink" logo and replacing it with a web/globe icon in the last box? Cheers

Add this code under to add Globe icon

<style>
  /* hide current link icons */
  a.sqs-svg-icon--wrapper.url[href*="seaus"] {
    visibility: hidden;
}
/* add tiktok */
a.sqs-svg-icon--wrapper.url[href*="seaus"]:before {
    content: "\f0ac";
    visibility: visible;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    background: black;
    width: 28px;
    height: 28px;
    color: white;
    line-height: 28px;
}
</style>

On 9/14/2023 at 6:15 PM, tuanphan said:

<style>
  /* hide current link icons */
  a.sqs-svg-icon--wrapper.url[href*="seaus"] {
    visibility: hidden;
}
/* add tiktok */
a.sqs-svg-icon--wrapper.url[href*="seaus"]:before {
    content: "\f0ac";
    visibility: visible;
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    background: black;
    width: 28px;
    height: 28px;
    color: white;
    line-height: 28px;
}
</style>

That seemed to work, to some extent. The icon is black rather the standard white. When i swap the black and white in the CSS the black border disappears. Also the tiktok icon seens to highlight when i hover over any of the icons. please see attached image. 

On 9/22/2023 at 9:31 AM, JCT said:

That seemed to work, to some extent. The icon is black rather the standard white. When i swap the black and white in the CSS the black border disappears. Also the tiktok icon seens to highlight when i hover over any of the icons. please see attached image. 

Add this code under

<style>
  .sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
    background: unset !important;
}
</style>

Still having issues. 

Please see each page: Social Links in Footer: https://seaustravl.com/blog/kgari-ultimate-travel-guide

Links in https://seaustravl.com/explore

 

With icon in Footer, add this to Website Tools (under Not Linked) > Custom CSS

footer.sections .sqs-svg-icon--wrapper[href*=tiktok] {
    background: unset !important;
}

On 8/8/2023 at 11:19 PM, tuanphan said:

Add to Settings > Developer Tools > Code Injection > Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<style>
/* hide current link icons */
  a.sqs-svg-icon--wrapper.url[href*="tiktok"] {
    visibility: hidden;
}
/* add tiktok */
a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    background: black;
    width: 28px;
    height: 28px;
    color: white;
    line-height: 28px;
}
</style>

If it doesn't work, please keep the first line, then we can check it again easier

Hi tuanphan! This worked beautifully for the social links in my footer, but not in the header. What would I need to add to change the header link to a tiktok icon? Here's the site:

https://www.arkansaspelvichealth.com/

On 12/16/2023 at 3:56 AM, rosemaryhallmarkcrea said:

Hi tuanphan! This worked beautifully for the social links in my footer, but not in the header. What would I need to add to change the header link to a tiktok icon? Here's the site:

https://www.arkansaspelvichealth.com/

Add this code under

<style>
  /* hide current link icons */
   header#header [href*="tiktok"] {
    visibility: hidden;
}
/* add tiktok */
 header#header [href*="tiktok"]:before {
    content: "\e07b";
    visibility: visible;
    font-family: "Font Awesome 5 Brands";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 14px;
    width: 28px;
    height: 28px;
    line-height: 28px;
}
</style>

Worked beautifully, thank you so much!