• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

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

Jaxel

Well-known member
#1
xf:button has an icon field. I thought simply putting the fa icon there, would work... but it doesn't:
Code:
<xf:button href="" class="button--cta rio-resize-medium" icon="video-camera">
    {{ phrase('EWRrio_cinema') }}
</xf:button>

I've gotten around this by using:
Code:
<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

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

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