Skip to main content

TikTok Social Icon in Header

You can use the following scripts to replace either the YouTube or LinkedIn buttons to a TikTok logo. Place in the Scripts tab, not an embed. Should be used in conjunction with the social color style page so that they are all black or white.

YouTube - Black Icon 

// Replacing the Youtube Icon for a black TikTok Icon
document.addEventListener('DOMContentLoaded', function() {
  var youtubeAnchor = document.querySelector('a[aria-label="youtube"]');
  if (youtubeAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/tiktok-black-icon.png';
   img.alt = "TikTok Icon";
   img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (youtubeAnchor.firstChild) {
      youtubeAnchor.removeChild(youtubeAnchor.firstChild);
    }
    youtubeAnchor.appendChild(img);
  }
});

YouTube - White Icon 

// Replacing the Youtube Icon for a white TikTok Icon
document.addEventListener('DOMContentLoaded', function() {
  var youtubeAnchor = document.querySelector('a[aria-label="youtube"]');
  if (youtubeAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/tiktok-white-icon.png';
    img.alt = "TikTok Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (youtubeAnchor.firstChild) {
      youtubeAnchor.removeChild(youtubeAnchor.firstChild);
    }
    youtubeAnchor.appendChild(img);
  }
});

LinkedIn - Black Icon 

// Replacing the LinkedIn Icon for a black TikTok Icon
document.addEventListener('DOMContentLoaded', function() {
  var linkedinAnchor = document.querySelector('a[aria-label="linkedin"]');
  if (linkedinAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/tiktok-black-icon.png';
    img.alt = "TikTok Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (linkedinAnchor.firstChild) {
      linkedinAnchor.removeChild(linkedinAnchor.firstChild);
    }
    linkedinAnchor.appendChild(img);
  }
});

LinkedIn - White Icon 

// Replacing the LinkedIn Icon for a White TikTok Icon
document.addEventListener('DOMContentLoaded', function() {
  var linkedinAnchor = document.querySelector('a[aria-label="linkedin"]');
  if (linkedinAnchor) {
    var img = document.createElement('img');
    img.src = 'https://4515944.fs1.hubspotusercontent-na1.net/hubfs/4515944/IM%20Background%20Images/tiktok-white-icon.png';
    img.alt = "TikTok Icon";
    img.width = 25;
    img.height = 25;
    img.style.display = 'inline'; // Ensures the image flows with the text/icons
    img.style.verticalAlign = 'top'; // Aligns the top of the image with the top of the line-box
    while (linkedinAnchor.firstChild) {
      linkedinAnchor.removeChild(linkedinAnchor.firstChild);
    }
    linkedinAnchor.appendChild(img);
  }
});