How to resize sharing buttons (icons only)?

You can customize the look of every element on your site thanks to CSS. You can add that CSS to your theme stylesheet, or to your custom CSS editor available under Appearance > Edit CSS in your dashboard.

For example, to change the size of the sharing buttons, you can use this CSS:

sd-social-icon .sd-content ul li a.sd-button:before {
    font-size: 1em;
}

I hope this helps!

I also searched Jetpack’s main CSS file, but didn’t now how to resize them

I would strongly recommend against editing plugin files as your changes would then be overwritten every time you update the plugin. Instead, you can add your custom CSS to the Custom CSS editor.

Hi Jeremy,

I am using the custom CSS from Site Origin.

But I guess I’m not finding the correct “selector”, to be able to change it, or the correct “properties”.

I tried the one you told me

sd-social-icon .sd-content ul li a.sd-button:before {
    font-size: 1em;
}

and also others, including this

.sd-content ul li {
    font-size: 1em;
}

but also didn’t work :-/

Do you know why we use “font-size”?

In my case they are the “Icons Only” buttons.

What do you think?

The CSS I posted above works well in my tests. If it doesn’t work for you, I’d recommend that you paste that code into WordPress’ CSS editor under Appearance > Customize > CSS, instead of using an alternative CSS editor.

Do you know why we use “font-size”?

We use font-size here because each icon is a different character is a custom font, named Social Logos: each one of the characters in that font is a different character, and can be resized like text would be resized, with font-size.

I hope this helps.

Hey!!

Yes, it worked!

There was a “.” missing in front of “sd-social-icon .sd-content ul li a.sd-button:before”

??

Thank you!

Hey, do you mind if I ask you something?

I am having a lot of trouble because I am using a lot of CSS files and JS files. Page loading time increased significantly. Pagespeed Insights told me to put all JS into a single file.

Do you know, by any chance, a good plugin to do this?

I tried to find, but maybe a good one is “under the radar”, maybe only developers know…

Well, if you know, I would thank you a lot!

Sorry if this is not the proper place to ask you this.

You helped me already a lot today! ??

There was a “.” missing in front of “sd-social-icon .sd-content ul li a.sd-button:before”

Yes indeed, sorry about that!

Do you know, by any chance, a good plugin to do this?

You could use a plugin like Autoptimize to concatenate CSS and JS files. I use it on my own site and it works well.