XF 2.1 Font Awesome Duotone Icons site-wide

[Wildcat Media]

Has anyone attempted to find a way to get Font Awesome Duotone icons site-wide? We have this option under Typography:



Adding a fourth choice, Duotone, would be the easiest in future XF versions, or via an add-on. But I'm thinking there must be some place in a template or style sheet where I could change this same option to Duotone. (It uses .fad vs. .far, .fas, etc..) I've used them for node icons (using a Nodes add-on) and like the effect. Duotone is relatively new (dates back to mid 2019) so hopefully this might end up as an option in XF 2.2. But until then, any ideas?

 

[DeltaHF]

I was trying to understand why this wasn't an option and I think I figured it out.

Many of the icons in XenForo are displayed on the page via pseudo-elements. Unfortunately, because of how the Duotone icons work (they are surprisingly complicated: layered characters displayed on top of one another with different opacity levels), it's really hard and requires icon-specific work to display them using pseudo-elements.

FontAwesome's docs explain in more detail:

CSS Pseudo-elements

fontawesome.com

 

[Wildcat Media]

Maybe it will end up in a future XF version, or in a third-party theme.

For now, I am using the duotone set for node icons and have done some cool things with them. (Being able to change color and opacity for the two colors can result in some unique effects.) I did try a few at a smaller size but they do not render quite as cleanly as they do larger.