Wordpress changing element.style with CSS-CodePudding

I want to change the color of the social icons (on the left side of the screenshot). Since I have no clue how to change it in wordpress, I tried it with css. But now I noticed that I have to change the element.style and I don't know how... I tried just changing the color in the element.style and copying into the additional css in wordpress, but it doesn't work. On the screenshot you can see what I mean. Is there a solution for this problem?

This is what I tried:

element.style {
    --wpz-social-icons-block-item-color: #FF0000;
    --wpz-social-icons-block-item-color-hover: #FF0000;
}

CodePudding user response：

I think that what makes color is the element inside a <span >

But anyway you are trying to change something via style, and if you want to do like this you´ll hace to use something like

style="background-color:#000"

or wathever, color, font-size etc

But in this case I will use a new style, like

.socicon-icon-instagram {color:#000;}

And maybe depends of the template you´ll need to add !important to CSS class to get the color...like this

 .socicon-icon-instagram {color:#000!important;}

It is not a good practice but sometimes is necesary

CodePudding user response：

Please try with this following code in wordpress customizer > Additional CSS

.social-icon-link{
 --wpz-social-icons-block-item-color: black !important;
--wpz-social-icons-block-item-color-hover:
red !important;
}