Add social sharing icons and make visible

Support
#1

Hi there, looking for help with 2 things:

  1. Add more social sharing icons in my blog post (twitter for now)
  2. Change the location of the social sharing icons in my blog posts. Currently you can only see them if you click on “leave a comment”. I like where icons are located (after the text) but would like them to be visible as soon as the page opens.

My website is: https://vibrantcelestialmeditation.org/blog/
Thanks!

#2

Hi,

Thanks for writing in!

Upon checking, I can see you are using jetpack plugin for your social icons.

Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

#3

Thanks - I didn’t realize Jetpack was running the post social icons. I’ve disabled that and inserted social sharing icons into my posts.

However now I have a different problem with the social icons. I’ve changed them to png images with some custom css I got from other posts, but not all the icons changed. Can you help me identify what the problem is and how to fix the Instagram, Google Plus, and Mail icons?

Here’s my css:

.x-icon-facebook-square:before {
content: url(https://vibrantcelestialmeditation.org/wp-content/uploads/2018/04/Facebook-Round-e1524516908680.png);
}
.x-icon-twitter-square:before {
content: url(https://vibrantcelestialmeditation.org/wp-content/uploads/2018/04/Twitter-round-e1524517358984.png);
}
.x-icon-instagram-square:before {
content: url(https://vibrantcelestialmeditation.org/wp-content/uploads/2018/04/Instagram-round-e1524517495359.png);
}
.x-icon-linkedin-square:before {
content: url(https://vibrantcelestialmeditation.org/wp-content/uploads/2018/04/Linkedin-round-e1524517615676.png);
}
.x-icon-googleplus-square:before {
content: url(https://vibrantcelestialmeditation.org/wp-content/uploads/2018/04/flat-social-icons_0001_google-plus-e1524517735692.png);
}
.x-icon-pinterest-square:before {
content: url(https://vibrantcelestialmeditation.org/wp-content/uploads/2018/04/Pinterest-round-e1524517987298.png);
}
.x-icon-email-square:before {
content: url(https://vibrantcelestialmeditation.org/wp-content/uploads/2018/04/Email-e1524510781557.png);
}

#4

Hi,

Please change .x-icon-googleplus-square:before to .x-icon-google-plus-square:before
and change .x-icon-email-square:before to x-icon-envelope-square:before

Hope that helps.

#5

Thank you! That worked perfectly for Google Plus and Email.
However the Instagram icon in the footer is still a problem. Can you help with that please?

#6

Hi There,

For the Instagram icon, use the following CSS rule.

.x-icon-instagram::before {
    content: url(https://path.to/image.png);
}

Hope that helps.

#7

That worked great. Thanks!

1 Like
#8