If you are using the Gutenberg editor, you could try using the Social Icons block — there’s a “Size” option in the block toolbar that will change the size of all the icons at once.
Thread Starter
dmwesq
(@dmwesq)
I tried the social icon block, and that takes care of the size just fine. Do you know if using this block there is a way to change the background color or icon color of individual icons, or only all icons?
For now, you can only change the background color/icon color of the full set in the sidebar settings. Changing the color of an individual icon is not an option in the interface but can be done using CSS. Each icon already has it’s own class name, e.g. “wp-social-link-wordpress” or “wp-social-link-twitter.”
Thread Starter
dmwesq
(@dmwesq)
@critterverse If I were to attempt to do changes using CSS, would I do that in the Custom CSS section or do I need to edit a particular file (such as style.css)?
Thread Starter
dmwesq
(@dmwesq)
I think I spoke too soon. The social media icons display fine in edit view, but when you publish the page the icon spans the width of my page. Not the look I was going for.
You can add it to either place, both the Custom CSS section or the style.css for the theme will work. Also, you may want to include an “important” rule to make sure it overrides any existing styling for that element.
Thread Starter
dmwesq
(@dmwesq)
I’m still stuck here. The icons appear normal size at first, but then when I view the page they span the entire page. I don’t see any additional CSS that could cause that, but need to find a way to fix that. Also, when I view the HTML code, it looks like each icon has the same name, and is differentiated by the “service” class. I had tried to change the color of just the link/chain icon, but it also changes the mail at the same time.
I am not seeing the same issue in testing the Twenty-Twenty One theme but I wonder if the width issue could be related to this bug: https://github.com/WordPress/gutenberg/issues/38043
> it looks like each icon has the same name, and is differentiated by the “service” class. I had tried to change the color of just the link/chain icon, but it also changes the mail at the same time.
One of them has the class name wp-social-link-chain and the other has the class name wp-social-link-mail so I was able to use those to target the icons individually. You can always add additional CSS classes as well in the block setting sidebar within the “Advanced” panel.
Thread Starter
dmwesq
(@dmwesq)
Odd that you are not seeing what I see. I have cleared cache and viewed the form on several different browsers, desktop and mobile and the icons are all stretched horizontally. Could be the same sort of issue as you suggested – just not seeing a remedy
I am seeing the issue on your site but I am not having the same issue in my own testing of Twenty-Twenty One theme — which is why I’m not sure that it’s a theme issue (as described in the GitHub ticket).
It seems that this issue can be resolved with some tinkering with the CSS. For example, I tried this code which had the icons looking a bit more how you would expect them to:
.wp-block-social-link {
max-width: 36px;
float: left;
margin-right: 12px;
}
Thread Starter
dmwesq
(@dmwesq)
I am so close but so frustrated. What I thought would be a fairly simple project is taking way too long. Every time I try another theme it comes out worse, but I can’t get these social icons to work. I added the code you suggested, and at first it worked although the icons were left justified. Then as soon as I refreshed the page, even after purging the cache, the icons were back to spanning the whole page horizontally.
You could also try deactivating your plugins one by one to make sure none of them are affecting the styling. If that turn out to be the case and you decide to remove the plugin, don’t forget to also remove any custom CSS that was added. Sorry to hear it’s been so frustrating so far!
