• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 2.0 Thread Prefix using only an icon (i.e. no title)?

RobParker

Well-known member
#1
What's the best way to create a thread prefix that only contains an icon (fontawesome in this case) and doesn't show the title? We can't set blank titles obviously, is just hiding the text with CSS the solution?
 

Chris D

XenForo developer
Staff member
#2
That's the correct approach, although hiding the text can be difficult as FontAwesome is text itself.

I'd recommend setting a custom CSS class for each prefix (e.g. label label--rocket), and then you'd add something similar to the following in extra.less:
Less:
.label
{
    &.label--rocket
    {
        .m-labelVariation(white, #e20000);
        font-size: 0;

        &::before
        {
            .m-faBase();
            .m-faContent(@fa-var-rocket);
            font-size: @xf-fontSizeNormal;
            padding: @xf-paddingMedium;
        }
    }
}
Note that there's a few helper methods here. .m-labelVariation sets the label style to be white text on a red background, .m-faBase sets up the Font Awesome bits and .m-faContent accepts an icon name (rocket is the icon name you will see on the FA website).

The trick to hiding the text is to set its size to 0 and then override it with the icon stuff.
 

RobParker

Well-known member
#3
Cheers

The only issue I'm running into is that the text should still display in the prefix selector.

i.e. menuPrefix should still show the text
 

Chris D

XenForo developer
Staff member
#4
Something like this should work:
Less:
.label
{
    &.label--rocket
    {
        .m-labelVariation(white, #e20000);
        
        .label:not(.menuPrefix)&
        {
            font-size: 0;    
        }

        &::before
        {
            .m-faBase();
            content: @fa-var-rocket " ";
            
            .label:not(.menuPrefix)&
            {
                font-size: @xf-fontSizeNormal;
                margin: @xf-paddingLarge;    
            }
        }
    }
}
It only hides the text and unhides it if it's not a child of the .menuPrefix element.