Docs

[zendog22]

HI, I’m wondering if it’s possible to change the colour of my social media icons in my footer.

The code in there is currently:
<div class=”footer-social”> [x_icon style=”font-size: 1.5em; color: #415968; type=”linkedin-square”] Join us on LinkedIn
[x_icon style=”font-size: 1.5em; color: #415968; type=”twitter-square”] Follow us on on Twitter </div>

It’s green because that’s the site’s link colour. But can’t see that colour in footer.
Wonder if you can help please?

[zendog22]

As per my request above, the site address is http://kentishandco.staging.wpengine.com/

many thnaks

[Friech]

Hi There,

Thank you for writing in! You can add this under Custom > Global CSS in the Customizer.

.top .footer-social a i {color: red;}
.top .footer-social a:hover i {color: #B2CC39}

The first line is the default color, the second line is the hover color.

Hope it helps, Cheers!

[zendog22]

Thanks for this. I’m also wondering how to add a link to text. It’s not quite this code but must be close?

.top .footer-link a i {color: #000;}
.top .footer-link a:hover i {color: #B2CC39}

[Rue Nel]

Hello There,

To add a link to the text, please edit your code and use this instead:

<div class="footer-social">
	<a target="_blank" href="https://www.linkedin.com/in/" rel="nofollow"> [x_icon style="font-size: 1.5em; color: #415968; type="linkedin-square"] Join us on LinkedIn </a><br>
	<a target="_blank" href="https://twitter.com/" rel="nofollow"> [x_icon style="font-size: 1.5em; color: #415968; type="twitter-square"] Follow us on on Twitter </a>
</div>

Hope this helps. Kindly let us know.

[zendog22]

Hi, thanks for this, it changes the link to green though which is my site’s link colour but doesn’t look great in the footer. Is it possible to have the text that is to be linked appear as the colour #415968?
many thanks

[Rue Nel]

Hello Again,

If you want to make the text as link, this is the only way. You need to use this code:

<div class="footer-social">
	<a target="_blank" href="https://www.linkedin.com/in/" rel="nofollow"> [x_icon style="font-size: 1.5em; color: #415968; type="linkedin-square"] Join us on LinkedIn </a><br>
	<a target="_blank" href="https://twitter.com/" rel="nofollow"> [x_icon style="font-size: 1.5em; color: #415968; type="twitter-square"] Follow us on on Twitter </a>
</div>

And of course the color of the text would change because it is now a link. In order to change it back the color, you’ll also need to apply a custom css. In your case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-colophon.top .footer-social a {
    color: #000;
}

.x-colophon.top .footer-social a:hover {
    color: #B2CC39;
}

And you’ll have something like this:

And when it is hovered:

Hope this helps.

[Author]

Posts