Hover Function

Site URL: https://luluthelabel.com/

Hello! 

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.

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.

<script>
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>
</svg>     
    </svg>
</div>`
})
</script>

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!

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

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!

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">
<li>
  <a href="https://instagram.com">
  <i class="fab fa-instagram"></i>
  </a>
</li>
<li>
  <a href="https:facebook.com">
  <i class="fab fa-facebook-f"></i>
  </a>
</li>
<li>
  <a href="https://twitter.com">
  <i class="fab fa-twitter"></i>
  </a>
</li>
<li>
  <a href="https://tiktok.com">
  <i class="fab fa-tiktok"></i>
  </a>
</li>
</ul>
<style>
  /* 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;
}
</style>