Font-Awesome-SVG-PNG icon indicating copy to clipboard operation
Font-Awesome-SVG-PNG copied to clipboard

Specify color does not work

Open marko-avlijas opened this issue 8 years ago • 5 comments

I have tried to get it to generate a non black color and failed.
This is what I tried:

./font-awesome-svg-png.js --color CCC --sizes 64 ./font-awesome-svg-png.js --color 888888 --sizes 64 ./font-awesome-svg-png.js --color #888888 --sizes 64

I always get black icons. How to specify hex color I want? Please update README with that information.

marko-avlijas avatar Mar 09 '16 15:03 marko-avlijas

Use fill="currentColor" https://github.com/FortAwesome/Font-Awesome/issues/3203#issuecomment-74839177

In addition to setting attributes on objects, you can also use CSS to style fills and strokes. In your CSS, you'll be setting values for attributes like fill and stroke instead of background-color and border... https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes#Using_CSS

<svg class="icon"><use xlink:href="fa-sprites-symbols.svg#fa-facebook" fill="currentColor"/></svg>

iegik avatar Mar 12 '16 22:03 iegik

Do you mean --fill="#444"? Or what?

Also I urge the contributors to add that information in README.

marko-avlijas avatar Mar 13 '16 14:03 marko-avlijas

https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/font-awesome-svg-png.js - generates PNG with only two colors: BLACK and WHITE:

'color', "Provide color or colors, e.g. --color black,white"

iegik avatar Mar 14 '16 08:03 iegik

But if You choose to use SVG sprite, you can colorize seporate symbol with:

  • inline fill attribute
  • inherit color from font color (color css property)

iegik avatar Mar 14 '16 08:03 iegik

That's not true. From other issue, there is a way to specify hex color:

font-awesome-svg-png --color "#0370E9" --svg --no-png --dest blue

I just think it should be included in documentation. Also I didn't know that I can control svg color with CSS. Thanks for that. Gotta read through your links when I have time.

marko-avlijas avatar Mar 19 '16 11:03 marko-avlijas