Social icons footer

Support
#1

Hi,
How can I make social icons in footer bigger ?
I’m using Gym demo and they look like this:
https://www.screencast.com/t/i6GDvWeBDG
I wolud like them to look like this (church demo):


Thank you.

#2

Hi,

To achieve that, you can add this in X > Launch > Options > CSS

.x-colophon.bottom .x-social-global a {
    background: #ccc;
    padding: 10px 10px 10px 10px;
    border-radius: 45px;
    font-size: 25px;
}

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

You may change the colors and numbers to achieve your desired look

For future reference, I have come up with that code using google inspect element.

Hope that helps

#3

It works :slight_smile:
But hover stopped working, icons don’t change color.
How can I fix that?
Thank you

#4

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

#5

Hi,

For Hover, you can add the following CSS

/* circle color */
.x-colophon.bottom .x-social-global a:hover {
    background: red;
}

/* icon color  */
.x-colophon.bottom .x-social-global a:hover i {
    color: #fff;
}

Change the color as you like.

Thanks

1 Like