feathericons / feather

Simply beautiful open-source icons
https://feathericons.com
MIT License
24.98k stars 1.22k forks source link

Can't set custom css properties on individual feather icons #986

Closed ghost closed 4 years ago

ghost commented 4 years ago

I need to change the size and color of some icons, but it doesn't seem to work, I tried adding a style attribute that changes the width and height with no success. I also tried adding #element .feather to my css without it working.

Does anyone know a workaround?

moeenio commented 4 years ago

Are you using the JS library, with feather.replace? If yes, make sure your styles are targeting SVG elements.

ghost commented 4 years ago

Are you using the JS library, with feather.replace? If yes, make sure your styles are targeting SVG elements.

Yes, I'm using the JS library. I have tried #element .feather and #element svg. None of them seem to work :/

moeenio commented 4 years ago

Make sure your DOM is what you expect it to be (use your browser's devtools)

ghost commented 4 years ago

Make sure your DOM is what you expect it to be (use your browser's devtools)

oh my god I looked up some stuff and got this article, and apparently #id .class completely differs from #id.class

I fixed it by removing the space between #element and .feather in my css file

moeenio commented 4 years ago

Yup, they differ. #id .class will select elems with this class that are inside an element with this id; #id.class selects the element with both this id and class.