XF 2.3 How to dynamically use FontAwesome icons in CSS with XenForo templates?

[unutKan]

Hi all,

I'm developing a XenForo 2.3 add-on and need to show icons dynamically based on template variables.

I have a variable like {$item.iconClass} that contains icon classes such as "fal fa-award".

In HTML, this works fine:

<xf:fa icon="{$item.iconClass}" />

But I want to use these icons in CSS pseudo-elements with the .m-faContent() LESS mixin, like this:

&:before {
    .m-faContent({$item.iconClass});
}

This doesn't work because .m-faContent() expects a LESS variable like @fa-var-award, not a string of CSS classes.

If I want to set icons via CSS content property or .m-faContent() dynamically, how can I pass the correct Unicode or variable?

What is the best practice for dynamic icons in XenForo add-ons?

Thanks for your guidance!

 

[Jeremy P]

The short answer is that .m-faIcon (and its alias .m-faContent) must have explicit @fa-var-* variables. You could create a series of modifier classes with different icons and append them to your elements conditionally, but if they need to be truly dynamic then you'd have to use HTML icons (<xf:fa> ) rather than CSS.