Font awesome icons 2.3 - categories, nodes, prefixes, phrases, templates etc...

[bzcomputers]

...Duotone icons elsewhere use standard --fa-primary-opacity, --fa-secondary-opacity, --fa-primary-color, and --fa-secondary-color as properties, so the way XF seems to do this is non-standard and confusing. This is beyond the scope of this resource, of course, but wanted others to be aware. Either way it's kind of cool to have this ability to color duotone icons.

XenForo by default, for duotone, uses the same color for both fa-primary and fa-secondary (it just inherits fa-primary color), only difference is fa-secondary is set at 40% opacity.

Actually, this does work. Testing on a different page.

[data-template="forum_view"] .fa-primary { color: @xf-paletteAccent2; opacity: 1.0; }
[data-template="forum_view"] .fa-secondary { color: desaturate(@xf-paletteAccent2, 30%); opacity: 0.8; }

But I worry that if I don't want this to apply to all FontAwesome duotone icons on the page, this might affect other icons. (For example, the envelope and bell icons for messages and notifications.) So I'm still experimenting. But in basic terms, that is working so far.

You're on the right track here, all you really need to do is use a selector scope so you're only applying it where you want it...

.node-icon {
    .fa-primary {
        color: @xf-paletteAccent2;
        opacity: 1;
    }
    .fa-secondary {
        color: desaturate(@xf-paletteAccent2, 30%);
        opacity: 0.8;
    }
}