Change Color of Icon in Social Links

[databell]

I’m trying to style the Social Links widget to the colors I want. Pretty much straightforward. Transparent backgrounds, black text and icons. The text I got in my child theme’s CSS, but the images / icons for the various social symbols stay white. I thought adding fill: #000; would work but even after adding !Important to the style, it didn’t change anything. How can I get these icons to appear black?

[yevhen]

Please try this CSS snippet but please note that it can require further customization

.hp-social-links .hp-social-links__item{
	background-color: #000 !important;
}

[databell]

@yevhen

.hp-social-links .hp-social-links__item{
	background-color: #000 !important;
}

That’s not what I’m looking for. That changes the background color of the entire div. I just want to change the color of the icon from white to black.

[yevhen]

Unfortunately there’s no easy way to do this because these icons are embedded as SVG images, so the color is defined in the SVG image file.

[databell]

That’s not going to work. The client wants each SM icon to be representative of the color of the brand. So Facebook Blue or YouTube red. And not as a background of the button either.

So basically, I’m going to have to locate where you store all these SVG’s, bring them into Illustrator, color them, re-upload them and then do it every time there’s a plugin update.

I know you should be able to do this in CSS with fill or color. I’ve done that before. Not sure why it won’t work here.

[ihor]

Each icon already has the brand color set as background Overview | HivePress Social Links - YouTube If you mean inverting these colors and setting the background to be the same, but changing the icons directly this requires customizations, unfortunately there’s no such styling option in the current Social Links version.

If you decide to customize this I’m not sure if it’s possible to change the fill attribute for SVG via CSS, but I found this topic image - img src SVG changing the styles with CSS - Stack Overflow

Hope this helps.