Use ligatures?

[ianstormtaylor]

This font is awesome! It works for CSS-based use cases, but I was hoping to use it in a graphics program like Figma or Photoshop. Right now this is really hard to do. (You have to copy the unicode string directly from the CSS files, convert it to an actual glyph which renders as just a black box, then paste this glyph into your text somewhere.)

Ideally it would work how the Material Icons (docs explanation) font does with ligatures, where you can just type bloody-sword in the font and it will become the "bloody-sword" icon automatically. This makes it really easy to use everywhere.

If the font build process could support this it would be amazing!

---

Side benefit: this would make CSS use easy still too, because you can just add a single class like:

<i class="gameicons">bloody-sword</i>

[seiyria]

I'm personally not sold on this approach as I don't really understand the benefits of it, but more-over, I don't know how or if the tooling I use supports it. All this really is, is a convenient wrapper for some processes I needed 5 years ago (wow, it's been 5 years!). I'd wonder:

• how this would work with angular bindings (does <i class="gameicons">{{ name}}</i> work?)
• what changes need to be made for this to work?
• are they any packages that can be dropped into the build process to do this?
• can a separate output for this be created so both options are available?
• what are the drawbacks and benefits for both approaches?

thanks! looking forward to at least some information but hopefully a PR down the line!

[ianstormtaylor]

Fair enough, if you haven't touched it in 5 years I doubt it makes sense then. FWIW though, the ligatures approach is a better approach in almost all cases since it means the font can easily be used in places other than CSS.

how this would work with angular bindings (does {{ name}} work?)

Yup, that would work.

what changes need to be made for this to work?
are they any packages that can be dropped into the build process to do this?

I'm not sure how ligatures in fonts are described, so I don't know.

can a separate output for this be created so both options are available?

Yup! Both approaches can exist in the same font.

what are the drawbacks and benefits for both approaches?

The current approach only works for CSS. If you wanted to use the font in mobile apps, printed materials, digital images, etc. then you have to go through a really tedious process to use the glyphs. The only real drawback to the ligatures approach was compatibility, but all modern browsers and operating systems support them these days.

[seiyria]

I see. For what it's worth, I do still regularly use this project, but all I do is wrap game-icons, so unless there's a convenient svg to ligature (or whatever needs to be done), I don't see this being something that gets added.

Which, to be fair, I really only do use the CSS approach.

So, I would accept a PR if you can find a way to add this, but I don't think it's something I need enough to add on my own. I'll leave this open either way since it does seem like a good idea.

[ianstormtaylor]

@seiyria awesome! I dig a little digging, and it looks like the SVG transformer technically support ligatures, but that something in the TTF transformation doesn't? I'm not exactly sure, but I opened an issue upstream: nfroidure/svgicons2svgfont#114