Hi All,
First post so apologies if this is a repeat topic.
I've created a custom link icon for the 2nd link in my headers social link block. Its uploaded and works in the block fine, however I would like it to invert colours automatically so it can be visible on brighter backgrounds.
Here is my current CSS:
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(2) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/5ff9e3adfcd25633938fb07d/t/6426fd682bbee81914523c6a/1680276840395/glass.png);
background-size: 90%;
background-repeat: no-repeat;
}
}
I have tried filter: invert(1); but no luck there. Whilst it did invert the colours it made a permanent change rather than just inverting on brighter backgrounds.
On this page is how the icons display normally: https://jamiecozier.com/
And on a page with a brighter background: https://jamiecozier.com/prints
Any help would be greatly appreciated!
