XF 2.3 Declaring icons via CSS oddities

[willl]

I haven't been able to isolate exactly WHY this happens, but I've got a rather unique issue with icons.

Given the following less:

.testicon {
    &:before {
        .m-faContent(@xf-var-life-ring);
    }
}

I can add that class to a nav item, and it'll attempt to render the icon, except the value of mask/-webkit-mask ends up being r-life-ring no-repeat center.

All the other appropriate CSS is there, it's just getting weird on the mask URL value.

 

[Old Nick]

.m-faContent(@xf-var-life-ring); or .m-faContent(@fa-var-life-ring);?

Note that the new syntax within XF 2.3 is not anymore .m-faContent but .m-faIcon

XF 2.3 Post in thread 'Boosting performance in XenForo 2.3'

Sep 26, 2023

Font Awesome improvements​

On almost every page we serve currently, we include as many as five different variants of the Font Awesome 5 Pro icon library. That's up to 8,000 icons split across their different variations, but on any given page we actually use... a lot less than that. The file size of each of these fonts is up to 200KB with an additional 40KB worth of CSS.

We have always wanted to ship a much smaller subset of icons but when admins, style designers and add-on developers have the full suite of icons available to them, this can be a challenge. In particular, working with...

• Chris D

• 
• 
• 

 

[Chris D]

Note that the new syntax for 2.3 is not anymore .m-faContent but .m-faIcon

.m-faContent is still valid.

But, indeed, the issue here is the naming of the variable.

.testicon {
    &:before {
        .m-faContent(@fa-var-life-ring);
    }
}

@fa-var-life-ring not @xf-var-life-ring.

 

[willl]

.m-faContent is still valid.

But, indeed, the issue here is the naming of the variable.

.testicon {
    &:before {
        .m-faContent(@fa-var-life-ring);
    }
}

@fa-var-life-ring not @xf-var-life-ring.

Ugh, thanks. Been a distinct lack of sleep lately for me