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.

 

[xfield]

extra.less:

.m_addLabelPrefix(@className, @backgroundColor) {
    .label.label--@{className} {
        background: url<---HERE, eg. /styles/myforum/label-@{className}.png
        color: @textColor;
        border: 1px solid @backgroundColor;
        font-weight: bold;
        margin-right: 5px;
        padding: 1px .70em;
        line-height: 20px;
        &:hover {
            opacity: 0.8;
        }
/*
        &:before {
            .m-faBase();
            .m-faContent('@{faContent}');
            padding-right: 5px;
            vertical-align: middle;
        }
*/
    }
    .p-title .label.label--@{className} {
        line-height: 28px;
    }
}

/* create CSS styles with the function above */
.m_addLabelPrefix(coffee, #e3e3e3);
.m_addLabelPrefix(beer, #e3e3e3);

/* make sure to put /styles/myforum/label-coffee.png on server */

/* you can modify above code and add additional parameter for function eg. define width of this element 
.m_addLabelPrefix(@className, @backgroundColor, @width)
.m_addLabelPrefix(coffee, #e3e3e3, 120px);
*/