Customizing social sharing element and buttons

Support
#1

Hi,

I’d like to customize my social sharing icons and styling and at this point I need help, since the answers I found (from old support forum) did not work for me.

I’d like to edit css so that I could make my social sharing element to look like in attached picture, no need for sharing numbers. This is what I’m trying to get:

  • “Share this post” –text in uppercase and with some spacing
  • Simple black social media icons in the same row with the text, simply changing color when hovered
  • Whole element without any lines

I’d also like to change Facebook and twitter icons to X icons: [x_icon type=“facebook”]and [x_icon type=“twitter”]. I also need to find Pinterest icon with only P-letter, like in the attached picture.
How can I change these icons?

Thank you for your help.

#2

Hey there,

I see that the text is already uppercase in your site and icons are black. To remove the lines, add this code in X > Launch > Options > Global CSS

.x-entry-share {
    border: 0;
}

The other tweaks will be getting into custom development which is outside the scope of our support. You either need to use a third party plugin or hire a third party web developer to do theme customizations.

Thanks.

#3

Hi there,

To align the social sharing text and the icons, please try this code:

.x-entry-share p,
.x-share-options  {
    float: none;
    display: inline-block;
}

.x-entry-share p {
    margin-right: 15px;
    margin-top: 0;
}

Customizing the icons would take more steps. This thread should get you started. You will need to have a child theme and add the code suggested on the thread in the functions.php file of the child theme.

Notice that each of the social sharing icon has a data-x-icon attribute. Each of the icon has its specific value which you can get from FontAwesome. Please check this thread on that as well.

Hope this will get you started.

Cheers!

#4

Thank you!

So there is now way to change icons without child theme? I have tried to avoid that kind of customization.

Could you tell me where I could change the hover look of icons?

Thanks.

#5

Hi There,

Yes, we need the child theme. Those backslash on the code values for icon will be stripped out when adding on Global CSS. It is recommended to use child theme and add instead on it’s style.css file.

We can use the following CSS for hover looks:

    color: #fff;
    background-color: #298f5e;
}```

Hope this helps.