Jump to content

Recommended Posts

Site URL: https://luluthelabel.com/


I recently coded in a TikTok icon for my social links which are shown on both the header and footer of my site. I have noticed that the hover function does not work on this icon, is there a custom code for this please? For example, I hover over the Instagram icon and the TikTok icon does not fade like the others. 

Template is Hyde.

Thanks in advance.

Edited by LULU3
Added in images.
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I unset your CSS and found out the tiktok icon is hard-coded on top of the normal URL icon. All of the original icons comes under the class ".sqs-svg-icon--social" which is only where the hover effect is applied.


And it seems to me that this piece of code is used to hardcode your tiktok icon.

var tiktoks = document.querySelectorAll('a[href*="tiktok"]');
tiktoks.forEach(item => {
    item.innerHTML = `<div>
  <svg class="SocialLinks-link-svg">
    <svg fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 55 55" style="fill: black;">
  <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"></path>

The styling of the icon is coming with the script itself. You can see style="fill: black;". Maybe, you have to find a way to stimulate similar styling on the script itself. To be honest, I am not experienced to solve this but I hope the information above will be helpful for someone who do. Never dealt with SVG attributes!





Sharing virtual tactics for an abstract world
Blogger @ humaneer.org

Link to comment
On 6/9/2021 at 11:22 AM, tuanphan said:

If you agree, we can replace 4 social icons with Code Block. Then you can change size, color, hover, easier.


Hi, yes this sounds good please if you can assist further? 

Thank you!

Link to comment
18 hours ago, LULU3 said:

Hi, yes this sounds good please if you can assist further? 

Thank you!

Add a Code Block > Paste this code

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<ul class="t-social">
  <a href="https://instagram.com">
  <i class="fab fa-instagram"></i>
  <a href="https:facebook.com">
  <i class="fab fa-facebook-f"></i>
  <a href="https://twitter.com">
  <i class="fab fa-twitter"></i>
  <a href="https://tiktok.com">
  <i class="fab fa-tiktok"></i>
  /* code block padding top bottom */
  .code-block {
    padding-top: 0;
    padding-bottom: 0;
  /* social icons code */
.t-social {
    display: block;
    margin: 0 auto;
    padding-top: 5px;
    text-align: center;
  	padding-left: 0;
  .t-social li {
  display: inline-block;
    margin: 0;
    line-height: 100%!important;
  .t-social li i {
    font-size: 30px;
    margin: 0 20px;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.