Last active
March 30, 2020 11:47
-
-
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 file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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