Is it possible to change the black-icon color via CSS?

[waldenn]

Hi, first of all thank you for a great icon library, I use it with together with FontAwesome in my https://conze.pt encyclopedia project.

I would like to change the black stroke color using CSS upon hover. This works for FontAwesome, but not OpenMoji.

Any idea why this is and if it can be fixed / worked around? Thanks.

[waldenn]

I found a workaround for setting the color (and using this small JS tool)

.oma:hover {
    filter: invert(66%) sepia(11%) saturate(5452%) hue-rotate(312deg) brightness(93%) contrast(101%);
}

Not ideal, but it works. It would be much nice if there was an easier way to set the color using CSS (if possible?). I'll close the ticket, as my problem is resolved.

[fuddl]

We need OpenmojiMonochrome more than anyone needs OpenmojiBlack. I through it’s the easier thing to to. I have generated lots of monochrome fronts from svg files and there are libraries for that. But, correct me if I’m wrong, all shapes would need to be merged to a compound path and even before that, strokes need to be converted to outlines. I guess this is the difficult part.

[b-g]

Hi @fuddl, I see ... there might be a clean way by exporting all black/svg/ files (automatically during the build process) and replacing all attributes holding black with currentColor, see https://stackoverflow.com/a/65147574. Now you could set the openmoji-black "color" in pure css, or did I miss something?

[fuddl]

This only works if you embed individual glyphs as svg into html which is often not very efficient (no caching). I thought this ticket is about embedding the OpenmojiBlack as a font.

[fuddl]

@b-g I hope this illustrates the problem: https://codepen.io/fuddl-the-looper/pen/rNzxpRP (Firefox only)

interestingly the tires change their Color on hover in both fonts, but my OpenmojiMonochrome mock-up changes completely and this is what I expected from OpenmojiBlack.

[b-g]

@fuddl Many thanks for illustrating this. I think this issue and #339 have probably the same root cause: same black elements have explicitly fill: black whereas other don't have a fill or stroke attribute at all. It still kinda works as the SVG default color is black.

I believe the solution for everything would be to change the buildsystem to force all elements in the line layer to have a fill: currentColor and/or stroke: currentColor attribute. And tell the user to use css e.g. color: black for the desired color.

cc @kevincox

Note to self: this post shows how to use SVGO to force an currentColor attribute, https://github.com/svg/svgo/pull/521#

[kevincox]

And tell the user to use css e.g. color: black for the desired color.

This sounds good for the openmoji-black. However we should do the opposite for the openmoji-color set and ensure that they are black no matter what the font color is otherwise they look very bad and are hard to read.

[RobertWinslow]

We need OpenmojiMonochrome more than anyone needs OpenmojiBlack.... But, correct me if I’m wrong, all shapes would need to be merged to a compound path and even before that, strokes need to be converted to outlines. I guess this is the difficult part.

I wrote a little script to convert the black SVGs into a simple monochrome font using FontForge's importOutline() and removeOverlap() functions.

This results in a font which has a significantly smaller filesize than the ones in current releases, which seems to work properly in a much wider variety of software, and which readily accepts color changes.

You can download the OpenMoji-MonoChrome.ttf file here. And here is the script I used to build it.

[b-g]

Hi @RobertWinslow, wow! Many thanks for this lovely gift in such dark times! This is great on all levels ... but even greater would be to have this part of the npm run generate-font build pipeline and to use your OpenMoji-MonoChrome.ttf as OpenMoji-Black.ttf.

Could you have a look?

Comment:

• I would vote to use this PLACEHOLDERGEOMETRYSVG = '25A1.svg' https://openmoji.org/library/#search=missing&emoji=25A1
• I think the Docker container should already satisfy the dependencies https://github.com/b-g/scfbuild/blob/master/Dockerfile

[RobertWinslow]

even greater would be to have this part of the npm run generate-font build pipeline and to use your OpenMoji-MonoChrome.ttf as OpenMoji-Black.ttf

Thanks for the feedback. I'll certainly look into this. I'll need to familiarize myself with some of the build tools first.

[RobertWinslow]

I believe after #422, the answer to this question is definitively "yes".

[b-g]

Solved. The new fonts will be released with the next release, or see in the meantime the font folder of this repo: https://github.com/hfg-gmuend/openmoji/tree/master/font