Social icons size become smaller after update

Hi, @sdarthenos.

I checked your site and couldn’t see any custom CSS code that would affect the icon size following an update.

After updating the plugin again, you could:

1. Visit Appearance → Widgets.
2. Adjust the widget settings and size.
3. Re-save the widget.
4. Clear any caching and performance plugins.

If the icons still appear smaller, please feel free to leave the new version of the plugin installed so we can see the issue and review it further for you.

> How do I make sure that I am present on my system as soon as I see it
> after updating?

I wasn’t sure what you meant by this, but please feel free to clarify if you’d like further advice here.

Hi, @thedude12x.

Yes, the styling changed, but it’s possible to disable output of the new styles if you’ve been styling your icons with custom CSS. This note from the FAQ shares more:

https://wordpress.org/plugins/simple-social-icons/#my%20icon%20styling%20changed%20after%20updating

If you still require help after this, please open a new thread with a link to your site. I’m happy to review further.

@thedude12x The plugin’s style.css will still be output, but no inline styles are generated, and settings in the widget will be removed.

More info on the filter is available here:

– https://studiopress.blog/simple-social-icons-3/
– https://github.com/studiopress/simple-social-icons/blob/99ca67d1afb0c0678c1045d587ffc2343f714327/simple-social-icons.php#L217-L234

The alternative if you partly depend on the inline styles would be to adjust your custom CSS to be more specific (by using the ID of each widget area). If you require further help with this, please feel free to open a new thread with further details, or reach out to StudioPress support: https://my.studiopress.com/help/.

Thanks for your understanding, and I’m sorry for the extra work it has caused you here. (The CSS change was made to allow per-widget styling, so it brings benefits too.)

@sdarthenos Thanks for your reply. If you decide you’d like further help with this, we’d be happy to look further if you can activate the new version of the plugin so we can see what’s causing the styling issue in more detail.

Thank you, @sdarthenos. Please could you also leave the new version of the plugin active for a short time until we can review and reply?

It seems that the theme or a plugin may be affecting the HTML markup of the icons widget to prevent them from being styled correctly. It would be helpful to confirm this with the new version of the plugin active so that I can offer a workaround for you.

If your web host provides a staging site, you are welcome to update the plugin there and share a link to the staging URL instead. Otherwise, I only need to see the new version active for a short time.

Thank you very much for your patience and help with this, @sdarthenos.

It is as suspected — a plugin or some theme code is altering the widget HTML markup, breaking the new styles.

You can fix this without downgrading the plugin:

1. Visit Appearance → Customize.

2. Add this CSS to the “Additional CSS” box:

.simple-social-icons ul li a,
.simple-social-icons ul li a:hover,
.simple-social-icons ul li a:focus {
    background-color: #dbdbdb !important;
    border-radius: 3px;
    color: #000 !important;
    border: 0px #fff solid !important;
    font-size: 26px;
    padding: 13px
}

.simple-social-icons ul li a:hover,
.simple-social-icons ul li a:focus {
    background-color: #666 !important;
    border-color: #fff !important;
    color: #fff !important
}

.simple-social-icons ul li a:focus {
    outline: 1px dotted #666 !important
}

3. Publish the changes and clear any caching plugins.

If you need further help with these steps, please let us know.

You’re welcome! Thanks for letting us know that solved this for you.