XF 2.0 How to use FA icons in <xf:button> context?

[Jaxel]

xf:button has an icon field. I thought simply putting the fa icon there, would work... but it doesn't:

<xf:button href="" class="button--cta rio-resize-medium" icon="video-camera">
    {{ phrase('EWRrio_cinema') }}
</xf:button>

I've gotten around this by using:

<xf:button href="" class="button--cta rio-resize-medium">
    <span class="fa fa-video-camera"></span> {{ phrase('EWRrio_cinema') }}
</xf:button>

However, I'm wondering if there is a proper way to use the icon property.

 

[Mike]

There are only a specific set of icons that we support out of the box (see core_button.less). If you want something different, you'd either need to insert the icon directly like you did or do custom CSS to add it.

 

[Jaxel]

Ah cool... I extended it myself...

I will say though, I think the icons are "off" in the default skin. Some icons are "lower" than they should be.

You guys have the margins set to: margin: -.255em 6px -.255em 0;.

I think it should be margin: -.400em 6px -.255em 0;

 

[Chris D]

That was reported as a bug, but we think it's actually an issue with the icon font itself.

See: https://xenforo.com/community/threads/reply-buttons-not-aligned-to-text.137948/