[cXF] Thread prefix icons

[cXF] Thread prefix icons

BassMan

Well-known member
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...
 
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.
 
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
 
And here's a working example code for your request:

Less:
/*** 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;
        }
    }
}
/**********/
 
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.
 
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
 
Last edited:
Not sure if I understand you right, but I can get that icon easily:

Screenshot 2021-05-24 at 9.47.54.webp


With this code:

Less:
/*** 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;
        }
    }
}
/**********/
 
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.
 
Last edited:
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.
 
You'll achieve that hardly. Remove both paddings in the code, change font-size, add width… Something in this way.
 
  • Like
Reactions: jul
Top Bottom