0

I was hired to do the design of an app and a website and my boss is constantly changing his mind about the color of the icons. they are all one color (minimalist style) I have a lot of them and I was wandering if there was a way to color them all at once (he wants them all to be the same color). I have svg and png files so I can make them any format I want if it helps. Hope someone will be able to help. Tanks

Mr 14A
  • 5
  • 2

1 Answers1

0

If you use svg you can use a css class that will set the fill property, e.g.:

.svg-color{
   fill: red;
}

<svg class="svg-color"></svg>

Sometime the color is set on svg strokes aswell, so your class could be:

.svg-color{
   fill: red;
   stroke: red;
}

If you want to upade the file you can do it directly inside:

<svg fill="red" stroke="red"></svg>
Groben
  • 1,374
  • 2
  • 10
  • 29
  • thank you for your fast answer. I have a couple of new questions : 1) this will only affect the color on the website/app, the file would stay black right? 2) do you know of a way to change the file itself? 3) is there a way to add a background to the icon on top of the color setting? – Mr 14A Apr 27 '17 at 10:16
  • 1) Yes, it won't change the file. 2) I updated my answer. 3) Not really, but there is a workaround, see this answer: http://stackoverflow.com/a/11293812/1102310 4) If it helped, pls mark the answer as accepted. =) – Groben Apr 27 '17 at 11:25
  • i was trying to upvote it but my account is brend new so i can't do it in any case, thank you very much for your answer – Mr 14A Apr 27 '17 at 11:34
  • i have one last question : where do i put the last code to update the file itself? – Mr 14A Apr 27 '17 at 11:36
  • Open the svg with a text editor (e.g.: notepad++). You can update the root element (). – Groben Apr 27 '17 at 11:39
  • this is what I did but there is no initial color setting (maybe because black is the default setting) so i don't know where to put it – Mr 14A Apr 27 '17 at 11:42
  • on the node just add the "fill" and the "stroke" property as in the last part of my answer – Groben Apr 27 '17 at 11:44