Icons: footer and

Support
#1

Hi,

I found this Javascript code in another thread to add an envelope icon in the footer and it works well:

jQuery(’.x-social-global’).append(’’);

1 How can I make the icon turn blue when hovering over as the other social icons do?: https://bablingua.com/

2 I also found a code to disable the hand cursor when using a Creative CTA (I mean, that the cursor doesn’t change and remains an arrow, not a hand) but it didn’t work and I deleted it. Could you please post here the correct code to achieve that? https://bablingua.com/subscriptions/

Thanks!

#2

Hello Alavaro,

Thanks for writing in!

1.) The social icons in the footer when using Renew stack are using built-in CSS that changes the colors on hover. The three icons is using this CSS code:

.x-social-global a:hover.facebook {
    background-color: #3b5998;
}

.x-social-global a:hover.twitter {
    background-color: #00abf0;
}

.x-social-global a:hover.instagram {
    background-color: #3f729b;
}

Based from this code, you will need to add a class for your email icon and then you create your own hover CSS for the email icon.
<a href="mailto:email@address.com" class="email"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a>

so that you can have your own hover CSS like this:

.x-social-global a:hover.email {
    background-color: #3f729b;
}

2.) Disabling the hand cursor will just be adding a custom CSS with the pointer-events property set to none.

Feel free to make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Best Regards.

#3

That’s just what I needed. Thank you once again for such amazing support!

#4

Can you please explain this step?

you will need to add a class for your email icon.

I’m not sure where to do that…

#5

Hi Alvaro,

Class is a selector of an element
From this html mail link:

<a href="mailto:email@address.com" class="email"><i class="x-icon x-icon-envelope" data-x-icon="" aria-hidden="true"></i></a>

You can see this part class="email". That mean you define that link to have that class. So that when you add

.x-social-global a:hover.email {
    background-color: #3f729b;
}

it pertains to that link with class email.

Hope this helps.

#6

I’m loving this theme and support. Thank you so much for your help!!

#7

Glad that we could be of help.

Cheers!

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.