skip to Main Content

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 to this problem?

Screenshot

This is what I tried:

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

2

Answers


  1. I think that what makes color is the element inside a <span class="social-icon socicon socicon-icon-instagram">

    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

    Login or Signup to reply.
  2. 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;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search