Topic: Custom social media icon resizing unsuccessful

Tagged: x

Author

Posts
February 19, 2017 at 11:08 am #1377178

markwongsl
Participant

Hi there,

I’ve tried to adjust the dimensions of my custom instagram logo with no success thus far. I added custom css like so:

.x-social-global .x-icon-instagram:before {
content: url(https://batonsleep.com/wp-content/uploads/2017/02/logo-instagram2.png);
}

The image successfully overrides the old instagram logo but appears oversized as attached for your reference. Could you please advice on the css to resize the icon’s width and height? I’ve tried using the ‘width’ and ‘height’ tags which don’t seem to work.

Thank you so much… any help would mean the world!

February 19, 2017 at 12:12 pm #1377222

Rupok
Member

Hi there,

Are you are using as pseudo element, you can’t directly control the size. Let’s upload the resized image and use the CSS.

Cheers!

February 21, 2017 at 10:27 am #1380024

markwongsl
Participant

This reply has been marked as private.

February 21, 2017 at 11:27 am #1380107
Thai
Moderator
Hi There,

Please try with this CSS instead:
```
.x-social-global .x-icon-instagram {
    background: url(https://batonsleep.com/wp-content/uploads/2017/02/logo-instagram2.png) no-repeat center center;
    background-size: 100%;
}
.x-social-global .x-icon-instagram:before {
    opacity: 0;
}
```
Hope it helps 🙂
February 21, 2017 at 1:47 pm #1380264

markwongsl
Participant

This reply has been marked as private.

February 21, 2017 at 2:22 pm #1380309

markwongsl
Participant

This reply has been marked as private.

February 21, 2017 at 5:01 pm #1380478

Jade
Moderator

You’re most welcome, Mark.
Author

Posts

<script> jQuery(function($){ $("#no-reply-1377178 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>