Duplicate Vertical alignment on buttons using fa attribute

digitalpoint

Well-known member
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:

Code:
<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>

196346

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.
 

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.
 
Top Bottom