Skip to main content
Topic: SVG icons: how are you supposed to change fill colour? (Read 155 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

SVG icons: how are you supposed to change fill colour?

Just wondering. Say I wanted to do a dark theme. Default icons colours are no good, so I want to change them. CSS has a fill attribute you can use, but it doesn't appear to work on Elk icons. I assume this is because with Elk icons the .svg image is set as ::before content, rather than as just an .svg image as part of the DOM.

Anyway, since this is something really obvious I assume there must be an easy and obvious way of changing icon colours via CSS. Do note that I would not classify having to directly edit the XML for every .svg icon as "easy" or "obvious".  :D

PS: By the way, it's easy with Font Awesome icons if you are actually running FA. You can change colours just like any other font. Elk 1.1.6 doesn't appear to run FA though, so no can do that way.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

 

Re: SVG icons: how are you supposed to change fill colour?

Reply #1
Ok, haz solution: CSS transforms and filters. If you do this:
Code: [Select]
  .i-board-off {
  position: relative;
  top: 6px;
  left: 6px;
  transform: rotate(15deg)scale(.85);
  filter: brightness(.6)
  }
  .i-board-redirect {
  position: relative;
  top: 6px;
  left: 6px;
  transform: scale(.85);
  filter: brightness(.8) sepia(1) hue-rotate(-10deg) saturate(1.4)
  }}
It looks like the attached screenshot[1], which is a lot easier than editing the XML for each icon. :)
And before anyone asks: yes, the theme will be available soon, for certain rubbery definitions of "soon" that depend on my mood and various life things.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P