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

[RobParker]

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]

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:

.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]

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]

Something like this should work:

.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.

 

[RobParker]

Thanks! Was looking for some kind of "not" statement.

 

[Tom McIntyre]

I think this is exactly what I wanted for a compact way to describe the question implicit in a thread.

I found a problem with my extra.less file having the line

{{include('nawcc.less')}}

.

While I was entering my collection of 5 symbolic prefixes, I apparently did something wrong.

I can go more slowly and try this on my test site,but I was really startled with the result. The nawcc.less contains the media queries and a number of fontawesome icons to manage navigation across our WP and Xf site.

I have been searching for the rules regarding the include that I found to try to understand what blew up.