[Share] Change social icons button color in header

To change social icons color in Header, you can follow these CSS code.

If it doesn't work, you can send link to your site, I will check again.

#1. Social icons color on All Pages

Use this to Custom CSS box

header#header a.icon svg {
    fill: #f1f;
}

#2. Social icons color on All Pages – Desktop Only

Use this CSS code

@media screen and (min-width:768px) {
  header#header a.icon svg {
      fill: #f1f;
  }
}

#3. Social icons color on All Pages – Mobile Only

@media screen and (max-width:767px) {
  header#header a.icon svg {
      fill: #f1f;
  }
}

#4. When burger overlay menu is open

body.header--menu-open header#header a.icon svg {
    fill: #f1f;
}

#5. Before header scroll

header#header:not(.shrink) a.icon svg {
    fill: #f1f;
}

#6. On Header Scroll

header#header.shrink a.icon svg {
    fill: #f1f;
}

#7. Social icons color on One Page

First, find Page ID.

Then use CSS code like this

#collection-6673f2e18432c25013aee99f header#header a.icon svg {
    fill: #f1f;
}