Adding 'TikTok' and 'Giphy' Social Icon for top right Header.

Site URL: https://vespertine.uk/

https://vespertine.uk/

Hi there,

I've linked my website above. Could anyone please write me a code injection I can add to the Header so that rather than having these two hyperlink symbols next to the Instagram symbol. Can they instead display the respective social link logos for TikTok and Giphy  (matching the style of the instagram logo). I was hoping SquareSpace would update this but it appears they have not. I really appreciate whoever is able to help. 

Thanks so much!

Sam

On 4/9/2021 at 8:13 PM, Vespertine said:

Site URL: https://vespertine.uk/

https://vespertine.uk/

Hi there,

I've linked my website above. Could anyone please write me a code injection I can add to the Header so that rather than having these two hyperlink symbols next to the Instagram symbol. Can they instead display the respective social link logos for TikTok and Giphy  (matching the style of the instagram logo). I was hoping SquareSpace would update this but it appears they have not. I really appreciate whoever is able to help. 

Thanks so much!

Sam

 

try

.SocialLinks-inner a[href*="tiktok"] svg,
.SocialLinks-inner a[href*="giphy"] svg{
  display: none;
}
.SocialLinks-inner a[href*="giphy"]:after {
  content: '';
  background-image: url('https://cdn.iconscout.com/icon/free/png-256/giphy-3215407-2673825.png');
  width: 25px;
  height: 25px;
  background-size: cover;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  filter: invert();
}
.SocialLinks-inner a[href*="tiktok"]:after {
  content: '';
  background-image: url('https://cdn.iconscout.com/icon/free/png-256/tiktok-2270636-1891163.png');
  width: 25px;
  height: 25px;
  background-size: cover;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  filter: invert();
}