Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Specify color does not work #49

Open
marko-avlijas opened this issue Mar 9, 2016 · 5 comments
Open

Specify color does not work #49

marko-avlijas opened this issue Mar 9, 2016 · 5 comments

Comments

@marko-avlijas
Copy link

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.

@iegik
Copy link

iegik commented Mar 12, 2016

Use fill="currentColor" FortAwesome/Font-Awesome#3203 (comment)

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>

@marko-avlijas
Copy link
Author

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

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

@iegik
Copy link

iegik commented Mar 14, 2016

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
Copy link

iegik commented Mar 14, 2016

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)

@marko-avlijas
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants