Fonts are not vertically centered

[teclab-at]

Whatever I do I cannot get the font icon vertically centered:

I've already tried using the --descent option but with no effect. SVG files look correct. Also changing the CSS properties has no effect, so I am starting to believe that it is really inside the generated font.

Can I do something about it?

thx

[teclab-at]

As a workaround one can put a display=grid style option into the <i> element.

[teclab-at]

Unfort. this is not the final solution. The characters/symbols are bottom aligned inside the font and it seems there is no possibility to vertically center the symbols inside the font ...

[tancredi]

Sorry, just closed the other issue: #13

I see here you've already tried using descent which seems to work fine on my end.

Do you mind having another try with descent and fantasticon version 1.0.13?

Add a very high value (e.g. 1000) just to see if it has any effect - works fine for me, and if still ineffective let me know and we'll debug this a little more?

[teclab-at]

1000? I only used values around 10 or so ... Now I see why it did not work. Anyhow I have solved my issue using frames.
thx

[solomon-gumball]

Having the same issue here:

Original SVGs are centered vertically but it seems like all the :before tags are smaller than and offset vertically from their parent i tags. Not sure if it's an issue with the font generation or the CSS.

[saiballo]

same problem here... instead with same icons icon-font-generator works ok

[Tukkan]

i[class^="icon-"], i[class*=" icon-"] {
    line-height: 1;
}

Fixes the issue.
Make sure you generated fonts with --normalize true

[saiballo]

ok, normalize true is mandatory if you have one icon some pixel bigger then others.

thanks

[mkurczewski]

I've got the same issue but with this config everything seems to work well:

{
  normalize: true,
  fontHeight: 300,
  descent: 150
}

[seanking2919]

Even with normalize true, I still icons not vertically aligned like this:

[jesustorres38]

the same for me. I solved the problem by adjusting the value of descent ... in my case to 45

fantasticonrc.json

{
    "normalize": true,
    "descent": 45
}

before:

after:

[kovacevjosip]

Issue is because of :before pseudo-element definition. Just override somewhere in project same css without pseudo-elements.

i[class^="mq-p-"], i[class*=" mq-p-"] {
  font-family: mq-planning-icons !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[keune]

@kovacevjosip that does work. did you do anything to automate this or do you modify the css by hand?

[kovacevjosip]

@kovacevjosip that does work. did you do anything to automate this or do you modify the css by hand?

You just need to copy code above somewhere inside your project (like src/scss/_icons.scss or whatever). You don't need to touch actual lib.

[harun911]

I also run into issues with the icons not being centered vertically. Using descent is not an option in my case, because the icons are all varying in height and width. So, I can not use a single value to correct the offset.

Here you can clearly see the problem:

Here is another screenshot of the icons.html, where you see the difference in alignment.

Is it possible to somehow vertically align them inside the font? All the fixes mentioned before,unfortunately did not work for me.

[kovacevjosip]

I also run into issues with the icons not being centered vertically. Using descent is not an option in my case, because the icons are all varying in height and width. So, I can not use a single value to correct the offset.

Here you can clearly see the problem:

Here is another screenshot of the icons.html, where you see the difference in alignment.

Is it possible to somehow vertically align them inside the font? All the fixes mentioned before,unfortunately did not work for me.

The design team needs to design icons properly. I think they need to vertically align icons inside given grid (if icons are not occupying 100% of height).

[james-william-r]

Bit hacky, but I just made every icon an inline-flex and centered items and content... 😅
.icon { display: inline-flex; align-items: center; justify-content: center; }