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


Well-known member
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') }}

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') }}

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


XenForo developer
Staff member
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.


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