Looking for CSS to display thread prefixes as images (.icon-* labels)

[UltraPyromane]

Hi everyone,

I’m trying to display thread prefixes as images in XenForo 2.x.
For example, instead of showing text like “rwe” or “sgd”, I want to show a small icon – both in the thread title and in the prefix selection menu.

I remember seeing a working solution somewhere that used CSS classes like .icon-rwe for this, but I can’t find it anymore.

I’ve already tried many approaches:

• .prefixLabel, .icon-rwe, .label.label--rwe
• text-indent: -9999px
• ::before pseudo-elements
• Extra.less + inline CSS

Nothing works reliably. Does anyone know a working method to display thread prefixes as images, ideally with CSS or minimal JS, that works both in the thread title and in the prefix menu?

Thanks in advance!

 

[Splicho]

I am not entirely sure if that is achieveable with only CSS/JS or whatever.
Pretty sure a custom addon is needed for that, since XenForo applies text +css by defult to prefixes no matter what.

 

[UltraPyromane]

I simply want to convert the prefixes to an image instead of text.
I once had a description, but I can't find it. It's about XenForo 2.2.