ligatures work in FF but not in Chrome

[be...@ernie.be]

I downloaded a self made icon-font with icomoon app. Ligatures didn't work in Chrome, but they did in Firefox.

After I added

"font-variant-ligatures: common-ligatures;"

to my class attribute selector, they did show up in Chrome

can this be added by default in the generated CSS?

[Keyamoon]

Hmm, they work fine in Chrome. Are you seeing this issue in the generated demo.html? Could you please attach the zip pack with this problem here?

[be...@ernie.be]

I sent a mail with the zip pack, couldn't attach it here.
Thx for the help!

[Keyamoon]

Thank you. It seems to happen when you have space in your ligatures; and it turns out that "discretionary-ligatures" is a more appropriate value for that CSS property (at least for IcoMoon fonts): https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures

I have added it to the CSS that IcoMoon generates. Thanks for reporting this issue.

[be...@ernie.be]

Well that was quickly resolved :-)

Thx for looking into this!

[be...@ernie.be]

I noticed another behavior, :hover doesn't work correctly on Google Chrome on ligatures with spaces. Only the first part of the ligature is clickable when you use it in an a-tag

I solved it by not using a regular space in my ligature, but a non-breaking space instead

[Keyamoon]

Try `display: inline-block`. It would probably solve the issue with regular space.