Can't fix Reply buttons not aligned to text

[tyteen4a03]

Affected version

2.0.0

Firefox 57 on Mac. See screenshot:

 

[Kier]

Firefox 57


Chrome 62


Safari 11


Opera 49

 

[tyteen4a03]

Firefox 57
View attachment 162723

Chrome 62
View attachment 162724

Safari 11
View attachment 162725

Opera 49
View attachment 162726

Disabling vertial-align: middle for .button.button--icon > .button-text::before actually fixed it for me... gotta love webdev.

 

[Kier]

Disabling vertial-align: middle for .button.button--icon > .button-text::before actually fixed it for me... gotta love webdev.

Looks pretty nasty in Chrome with that change though...

vertical-align: middle;

 

[tyteen4a03]

Looks pretty nasty in Chrome with that change though...

vertical-align: middle;
View attachment 162727

Hence my sentence, "gotta love webdev".

 

[Mike]

I think what you're seeing here are roughly 1px differences between where the browser decides to lay things out. Combined with the fact that the eye icon is placed a little low, but that would likely be down to how it's exactly defined in the font. If you look at other button icons, you'll see the align better in most cases (covering from above capitals to the descenders).

I have made a very small tweak to the CSS here, though it may not really look much different. Such I'm not sure what to even mark this bug. Can't fix?

 

[tyteen4a03]

Yeah, preview button on Chrome 62 / Windows 10 is definitely still off.

Oh well.

 

[Mike]

I hadn't rolled any changes out when you posted that message (though I have now). However, at 200% zoom, you can see that it has to do with where the icon is laid out in Font Awesome:



(The red box being the space allocated to the icon with a line-height of 1.)

The eye is aligned slightly lower, potentially baseline aligned. (Our icons are slightly larger than the button text.)

 

[Chris D]

I'm led to believe this is one of the types of things they've aimed to resolve in the new icon designs in Font Awesome 5.