[cXF] Thread prefix icons

[BassMan]

BassMan submitted a new resource:

Thread prefix icons - DIY tutorial on how to add thread prefix icons and customize it.

Would you like to customize your prefixes?

Here's a simple DIY tutorial as an example. Of course you can extended it for your own needs as you wish.


So, read this tutorial to achieve something like this:

View attachment 194664



1. Create your custom prefix

In admin CP go to Forums > Thread prefixes and click on button Add prefix on the right top side.

Fill the form like this:

View attachment 194665

* dont'...

Read more about this resource...

 

[BassMan]

BassMan updated Thread prefix icons with a new update entry:

Code for icons of a specific style

• update the overview page with code for icons of a specific style (Pro light, sold, regular, Brands)

Read the rest of this update entry...

 

[ssj4gogita4]

I'm assuming you can add like a logo or something in place of it? Or add a specific font?

 

[BassMan]

Yes, you can add almost whatever you want.

 

[BassMan]

BassMan updated Thread prefix icons with a new update entry:

Code clean up

• code clean up, LESS structure

Read the rest of this update entry...

 

[Agentos]

Bassman boss

 

[TCG2007]

I'm trying to change "cogs" to youtube and it isnt working. Your how-to (which is great by the way), is says to simply replace cogs with whatever icon name is on FA's site.

 

[TCG2007]

Nvm. Learned how to read and figured it out lol.

 

[Wesker]

This available in XF1?

 

[BassMan]

This available in XF1?

Check PM, please.

 

[Tom McIntyre]

I am trying to use this to create symbolic prefixes to use with multi-prefix. I can't seem to get my head around what to do to not show the label text, just the icon.

display: none makes it all disappear, of course. I can use a single character for the prefix, but that seems awkward

 

[BassMan]

Try with this approach:

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

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?

xenforo.com

 

[BassMan]

And here's a working example code for your request:

/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;

    .label:not(.menuPrefix)& {
        font-size: 0;   
    }

    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-cogs);
        padding-right: 5px;
        font-size: @xf-fontSizeNormal;
        padding-left: 5px;

        .label:not(.menuPrefix)& {
            font-size: @xf-fontSizeNormal;
        }
    }
}
/**********/

 

[BassMan]

BassMan updated [cXF] Thread prefix icons with a new update entry:

New example code added

• new example code to show only icon without text in thread prefix

Read the rest of this update entry...

 

[Tom McIntyre]

The names of the fontawesome symbols are not all available to extra.less. I could not find the reference in a quick search in the admin cp.

I seem to recall a reference but I cannot find it now. I was using the fontawesome cheat sheet. to find appropriate symbols.

 

[Tom McIntyre]

I implemented the simple replacement FA bb Code that someone nicely provided here, but it is not implemented on this site [fa]money-bill-wave[/fa]. <i style="font-size:24px" class="fas fa-{text}"></i>

It is fetching all the available icons in the Font Awesome Cheat Sheet that I have looked for.

However, when I try to use arbitrary symbol names, it breaks extra.less on my site.

The symbol names that can be used with this approach are apparently those in fa.less where the variables are defined.

I am not sure where the more common i tag is handled. I would guess that it requires extra run time overhead, if it fetches from fontawesome.com

 

[BassMan]

Not sure if I understand you right, but I can get that icon easily:




With this code:

/*** Prefix Pack A ***/
.label.label--pack-a {
    background: #CD7F32;
    color: #fafafa;

    .label:not(.menuPrefix)& {
        font-size: 0;   
    }

    &:hover {
        background: #4A4E51;
        color: #fafafa;
    }
    &:before {
        .m-faBase();
        .m-faContent(@fa-var-money-bill-wave);
        padding-right: 5px;
        font-size: @xf-fontSizeNormal;
        padding-left: 5px;

        .label:not(.menuPrefix)& {
            font-size: @xf-fontSizeNormal;
        }
    }
}
/**********/

 

[BigPete7978]

Is it possible to only have the icon in the selection of the prefix as well (the drop down menu when selecting)? It is still showing text there as well.

EDIT: Nvm. Figured it out.

 

[jul]

Any idea how I can do an icon only with the whole prefix being a circle?
I tried using: border-radius: 50%;
But it just ends up being ovals with the FA not centering.

 

[BassMan]

You'll achieve that hardly. Remove both paddings in the code, change font-size, add width… Something in this way.