Ligatures in Chrome: Only displaying when adding other characters - css

Question

I created a font with icomoon
and I wanted to use ligatures. Currently all my ligatures have hyphens in the ligature code.
For example: my-ligature
So when I use
<i>my-ligature</i>
It works as expected in Firefox and IE but not Chrome.
When I add a or any other character like
<i>my-ligature </i>
<i>my-ligature </li>
It also works in Chrome.
As soon as I replace the hyphen in the ligature code with something else like an underscore it works in Chrome as expected (no whitespace etc. necessary)
Is this a Chrome Bug or are hyphens not allowed here?
You'll find a demo of the whole thing here (made with a standard icomoon icon)
http://www.swisscocktailblog.ch/icomoon/demo.html
EDIT:
As requested the css for the ligatures (it's the one used in the demo)
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?6mfq3a');
src:url('fonts/icomoon.eot?#iefix6mfq3a') format('embedded-opentype'),
url('fonts/icomoon.ttf?6mfq3a') format('truetype'),
url('fonts/icomoon.woff?6mfq3a') format('woff'),
url('fonts/icomoon.svg?6mfq3a#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
i, .icomoon-liga {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Enable Ligatures ================ */
letter-spacing: 0;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-wifi-full:before {
content: "\e600";
}

Answer 1

This bug has been identified elsewhere in Chromium, and more specifically affects ligatures named with non-alphabetical characters:
https://bugs.chromium.org/p/chromium/issues/detail?id=277677
It was marked fixed on that thread, but that doesn't seem to be the case.
On a hunch I checked whether the character was there but not visible by adjusting letter-spacing, and that worked. Something as negligible as the following will allow the icon to render:
i {
letter-spacing: .001em;
}
If you apply this style to your demo page via devtools and inspect the two i elements, you'll see that the second is rendered as a sliver as compared with the first. If you add text after each you'll see that the text begins at a different point. To avoid this you could write more CSS, something like this:
i {
display: inline-block;
letter-spacing: .001em;
width: 1.2em;
}
This should ensure that all of your icons render consistently in spite of the bug, and will scale properly with the font-size. But at this point it's probably best to accept as best practice that ligatures should avoid non-alphabetical characters.
While the bug's cause is still unclear, the above should provide a workable solution. The reason the additional characters allow the icon to render is that they provide the missing character spacing made up for here by the additional CSS.

Answer 2

We too have the same issue in Angular 4 when creating our own icon in chrome 59.0. using css property
{
white-space : pre;
}
does solve this.
Mozilla 54.0.1 its working fine.