Skip to content

Instantly share code, notes, and snippets.

@ryandejaegher
Last active March 30, 2020 11:47
Show Gist options
  • Select an option

  • Save ryandejaegher/081d92fdcdec71183bba31c85d45f669 to your computer and use it in GitHub Desktop.

Select an option

Save ryandejaegher/081d92fdcdec71183bba31c85d45f669 to your computer and use it in GitHub Desktop.
This code adds the TikTok icon to Squarespace social icons. If a user adds a link to a TikTok profile in the social accounts for Squarespace it will add the TikTok icon instead of the "link" placeholder.
/* This is the CSS to change the fill cover on hover/not hover. Using :not it is possible to make changes
#thing svg:not(:hover) {
fill:rgba(31,31,31,.4);
transition:fill 170ms ease-in-out;
}
<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"> <path d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z"/></svg>
*/
/* Gets all a elements where the link contains tiktok */
var tiktoks = document.querySelectorAll('a[href*="tiktok"]')
/* For each link to tiktok replace the default link icon with a tiktok svg logo */
tiktoks.forEach(item => {
item.innerHTML = `
<svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 50 50">
<path fill-rule="nonzero" d="M37.006,22.323C36.779,22.344 36.549,22.358 36.316,22.358C33.693,22.358 31.388,21.009 30.047,18.97L30.047,30.507C30.047,35.216 26.229,39.034 21.52,39.034C16.811,39.034 12.993,35.216 12.993,30.507C12.993,25.798 16.811,21.98 21.52,21.98C21.698,21.98 21.872,21.996 22.047,22.007L22.047,26.209C21.872,26.188 21.7,26.156 21.52,26.156C19.116,26.156 17.168,28.104 17.168,30.508C17.168,32.912 19.116,34.86 21.52,34.86C23.924,34.86 26.047,32.966 26.047,30.562C26.047,30.467 26.089,10.968 26.089,10.968L30.105,10.968C30.483,14.559 33.382,17.393 37.006,17.653L37.006,22.323Z"/>
</svg>`;
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment