[flacnvinylParticipant]

What is the best way for us to use images instead of the built-in icons.

[ThaiModerator]

Hi Drake,

You can use this custom CSS:

.x-share-options .x-share i:before {
    display: none;
}
.x-share-options .x-share i {
    background-size: 100% 100%;
    width: 32px;
    height: 32px;
}
.x-share-options .x-share .x-icon-facebook-square {
    background-image: url(https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-32.png);
}
.x-share-options .x-share .x-icon-twitter-square {
    background-image: url(https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-32.png);
}

Hope it helps 🙂

[flacnvinylParticipant]

I apologize, I probably did a poor job of describing my request. The custom code provides social sharing, which is great (hope you all make this a permanent feature in X/Customizer itself soon). I am referring to the social icons which link to profiles for the website. IE: Header icons.

[ThaiModerator]

Hi There,

Sorry for the confusion!

Please update the previous CSS a bit:

.x-social-global a i:before {
    display: none;
}
.x-social-global a i {
    background-size: 100% 100%;
    width: 32px;
    height: 32px;
}
.x-social-global a .x-icon-facebook-square {
    background-image: url(https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-32.png);
}
.x-social-global a .x-icon-twitter-square {
    background-image: url(https://cdn1.iconfinder.com/data/icons/logotypes/32/square-twitter-32.png);
}

Hope it helps 🙂

[Author]

Posts