Would you like to customize your prefixes?
Here's a simple DIY tutorial as an example. Of course, you can extend it for your own needs as you wish.
So, read this tutorial to achieve something like this:
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:
You can choose any prefix name you want, just change pack-a with your desired name.
* dont' forget to select applicable forums at the bottom
2. Add code to your extra.less template
Open you extra.less template and add the code:
For different prefix name just change pack-a in the code.
To edit prefix when hover check class &:hover.
To edit prefix icon check class &:before. To change the Font Awesome icon eidt the word cogs (in above example) with any other icon name.
Want a Pro icon of a specific style?
Edit .m-faBase(); and change it to .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); or .m-faBase('Pro', @faWeight-light);.
Want a Brand icon?
Edit .m-faBase(); and change it to .m-faBase('Brands');.
Want to show only icon without text in thread prefix?
That's basically it. To add more custom prefixes just go through the above procedure for each prefix.
Here's a simple DIY tutorial as an example. Of course, you can extend it for your own needs as you wish.
So, read this tutorial to achieve something like this:

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:

You can choose any prefix name you want, just change pack-a with your desired name.
* dont' forget to select applicable forums at the bottom
2. Add code to your extra.less template
Open you extra.less template and add the code:
Less:
/*** Prefix Pack A ***/
.label.label--pack-a {
background: #CD7F32;
color: #fafafa;
&:hover {
background: #4A4E51;
color: #fafafa;
}
&:before {
.m-faBase();
.m-faContent(@fa-var-cogs);
padding-right: 5px;
}
}
/**********/
To edit prefix when hover check class &:hover.
To edit prefix icon check class &:before. To change the Font Awesome icon eidt the word cogs (in above example) with any other icon name.
Want a Pro icon of a specific style?
Edit .m-faBase(); and change it to .m-faBase('Pro', @faWeight-solid);, .m-faBase('Pro', @faWeight-regular); or .m-faBase('Pro', @faWeight-light);.
Want a Brand icon?
Edit .m-faBase(); and change it to .m-faBase('Brands');.
Want to show only icon without text in thread prefix?
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;
}
}
}
/**********/