Duplicate Vertical alignment on buttons using fa attribute

[digitalpoint]

Affected version

2.1.0

Identical buttons where one uses the icon attribute and one uses the fa attribute end up with a 1px vertical alignment difference as shown here:

<xf:button href="{{ link('events/analytics', $event) }}" class="button" fa="far fa-chart-bar" data-xf-click="overlay" data-cache="off" >{{ phrase('stats') }}</xf:button>
<xf:button href="{{ link('events/analytics', $event) }}" class="button" icon="result" data-xf-click="overlay" data-cache="off" >{{ phrase('stats') }}</xf:button>

It can of course be worked around to never use the icon attribute when you have multiple buttons, but seems like it should be the same, just with a different icon.

 

[marquisite]

Can't fix - <xf:button fa=...> element is offset by one pixel

Comparing with the new XF2.1 fa="" attribute and the legacy icon="" attribute (or no icon at all), the fa="" button ends up misaligned vertically by one pixel. In the example above: Test 1 is Text... Test 2 is Text... Test 3 is Text... Test 4 is Text... This occurs in the two browsers...

xenforo.com

I noticed the same thing when adding an additional page action button (with fa attribute) next to the default ones (e.g. New posts). Another workaround for now is to use an <xf:fa> element inside the button.