Icons alignement with webfont

[jbelien]

First things first, great job ! I really love your icons set ! \o/

I migrated one of my projects from Font Awesome to Mono Icons and I love it ...
but the icons are not perfectly aligned with my texts!

You can check it here : https://report.osm.be/

What would be the best way to fix that alignment ?

Thanks!

[Wolfr]

In this case, I would do

h1 i {
    position: relative;
    top: 6px;
}

For different contexts, a different value will be needed.

[jbelien]

For different contexts, a different value will be needed.

That's what I meant, would there be a way to have something that applies to all (most ?) situation ?
Something that would vertically align to the center of the text in the same element ? or align to the "baseline" ?

To be honest, I don't really know what I'm talking about here (ask @evajacobs :P), but when using Font Awesome webfont (for instance), the icons are "magically" aligned correctly (or at least correctly based on what I "expect").

[Wolfr]

I see what you mean, perhaps we should take a look at aligning to the baseline of fonts in a better way.

[Wolfr]

On the icon font generator package, there is a --center and a --descent flag, something we should experiment with.

[ukaaa]

I gave --descent a try. The results are satisfying. I've made a PR ☝️

--center is used for horizontal centering.

[Wolfr]

@ukaaa this is indeed satisfying.

@jbelien sorry for letting you wait for 2 months,

These Svelte REPLs demonstrate the fix:

• Correct https://svelte.dev/repl/79de4cd85f6248559476dba9ac309dc5?version=3.29.7
• Bad (old) https://svelte.dev/repl/9875652ea79c46c7a03bc208d171bd4f?version=3.29.7

[jbelien]

No worries! Thanks @Wolfr , the update works like a charm 👌

[Wolfr]

Haha you already updated it. Nice. I love how the whole icon font generation aspect can live in a package in itself.