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.