Customizing Social Icons in Footer

[fbrugger]

Hi there
i would like to customise the social icons in the footer of Integrity X-Theme. How can i change the colors of Icon and hover, so they don’t have the global Link color and how can i make the Icons bigger?

Thanks for your help!

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

.x-colophon.bottom .x-social-global a {
    color: #000;
}
.x-colophon.bottom .x-social-global a:hover {
    color: #c54747;
}

Hope it helps

[fbrugger]

Hi thai

Yes, that works, thank you very much. How can i make the icons bigger? Is there any CSS?

Thanks a lot!

[rad]

Hi Felix,

You can add font-size in that CSS and increase their sizes, example,

.x-colophon.bottom .x-social-global a {
    color: #000;
    font-size: 50px;
}
.x-colophon.bottom .x-social-global a:hover {
    color: #c54747;
}

Cheers!

[fbrugger]

Hi Rad

Thank you very much! I didn’t know it’s “font-size”. I have tried just “size”. Now it’s working perfect!

Thanks a lot!

[rad]

You’re most welcome!