Docs

[afitz10s]

Hello,

Is there an easy-ish way to change the social media icons using css? Using for example:[x_icon type=”facebook”]. I just want to swap a few of my social media icons and I have all of thse little short codes for each icon ready to go. Can you help me with where/how to do this? Thanks!

[Darshana]

Hi there,

Thanks for writing in! You can change the complete functionality, please check the following post for a possible implementation (https://community.theme.co/forums/topic/want-to-add-custom-social-media-icons-how-to-do-it/page/2/#post-318884).

Hope that helps.

[afitz10s]

Thanks for the link, but not getting help from that. In fact, my brain just exploded. Might as well have sent me link about string theory.

Can you just give me some specific help please? I do have the child theme set up, but I have been just adding a few changes to the additional css under customize.

[Joao]

Hi There,

If you look the very first post of Rue Nel on the thread above it explains it, what part you did not understand. please read the code you will change the code for example:

if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon=""></i></a>'; endif;

for

if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook" data-x-icon=""></i></a>'; endif;

As you can see I changed the icon x-icon-facebook-square for x-icon-facebook

Hope it helps

Joao

[afitz10s]

Uhhh…I’m pretty much a noob so you have to talk to me like an 8 year old. I need step-by-step directions. Where exactly to put things etc. Pictures would help if you can.

[Friech]

Hi There,

Is the icon that you want to use is not available here?

Please provide us your site URL and point us the icons that you want to change. We will try to change it with just a custom CSS.

Thanks.

[afitz10s]

This reply has been marked as private.

[Paul R]

Hi,

To change the icons, you can add this in your child theme’s style.css

.x-social-global .x-icon-facebook-square:before {
       content: "\f09a";
}

.x-social-global .x-icon-twitter-square:before {
        content: "\f099";
}

.x-social-global .x-icon-youtube-square:before {
    content: "\f167";
}

.x-social-global .x-icon-instagram:before {
    content: "\f16d";
}

Hope that helps.

[afitz10s]

Paul R…you are the man! The only problem (if it is a problem) I’m having is that nothing changes when I add all of my custom css to my x-child theme style.css, the changes only work under the custom tab or additional css tab. Any idea? Or do I need to start a new topic?

[Joao]

Hi There,

Please paste your CSS here to check for syntax mistakes.

http://csslint.net

Let us know how it goe,s,

Joao

[Author]

Posts