Adding Href Links To Favicons And Animating Them (Helix Ultimate) - Question | JoomShaper
🎃 Halloween Sale is Live! Get 35% OFF on all plans. Sale ends soon! Get Offer

Adding Href Links To Favicons And Animating Them (Helix Ultimate)

JG

James Gravert

Helix Framework 3 months ago

UPDATE: Apologies, the title says 'Favicons' I meant 'Fontawesome'. I can't seem to edit the title.

This might be helpful to others, also this is a suggestion possibly for a furture release of the Helix Ultimate Templates.

For the Contact Info in the template when you have it display email, phone and mobile I noticed that the fontawesome icons did not have href's. I also wanted to add fontawsome animations.

The following works well.

To do this Globally, in the Custom Code>Custom Javascript section add the following.

document.addEventListener('DOMContentLoaded', function() {
  const items = document.querySelectorAll('.sp-contact-info li');
  items.forEach(item => {
    const icon = item.querySelector('span.fas');
    const link = item.querySelector('a');
    if (icon && link) {
      link.insertBefore(icon, link.firstChild);
      icon.classList.add('fa-beat');
    }
  });
});

To do this Individually, in the Custom Code>Custom Javascript seciton add the following.

document.addEventListener('DOMContentLoaded', function() {
  const icon = document.querySelector('.sp-contact-mobile .fas.fa-mobile-alt');
  const link = document.querySelector('.sp-contact-mobile a');
  if (icon && link) {
    link.insertBefore(icon, link.firstChild);
    icon.classList.add('fa-beat');
  }
});

You can use any of the avalible animations for fontawesome icons. Reference: https://docs.fontawesome.com/web/style/animate

For further control/customizations to the animations use something similar to this in the Custom Code>Custom CSS section. You just need to target properly for the desired effects.

.sp-contact-info .fas {
  --fa-animation-duration: 2s; /* Adjust as needed */
  --fa-beat-scale: 1.3; /* Adjust as needed */
}

NOTE: If you need more space between the fontawesome icon and the text you can use the following in the Custom Code>Custom CSS section.

.sp-contact-info a span.fas {
  margin-right: 10px; /* Adjust this value as needed: e.g., 5px for less space, 15px for more */
}

I initially did this to allow the fontawesome icon to have the same href as the text, but realized I could also use this to animate them.

Adjust for your particular use. Enjoy!

It would be nice to see these features added to the U.I. but I understand if that does not happen.

0
2 Answers
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 months ago #198989

Hi James Gravert,

Thank you so much for your suggestions and detailed analysis report. I will forward it to the team. The team will check and decide.

Wish you good luck:)

0
Rashida Rahman
Rashida Rahman
Accepted Answer
Support Agent 3 months ago #199097

Thanks for accepting the answer:)

0