![[cXF] Thread prefix icons](https://warforever.com/data/attachments/4/4709-3352f6857f0bd7ae38fb3ba3620fc310.jpg){kind=small}
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 edit the word cogs (in above example) with any other icon name.
Want a Pro icon of a specific style?
Want a Brand icon?
Want to show only icon without text in thread prefix?
Use this example code :
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:
You must log in to view
(14 lines)
LESS:
You must log in to view
(15 lines)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 edit the word cogs (in above example) with any other icon name.
Want a Pro icon of a specific style?
If you want an icon with one of the Font Awesome 5 Pro styles -
light, solid or duotone - use the above code like this (example): .m-faContent(@fa-var-duotone-sign-in);. As you can see, you add the style name (in that case duotone) inside the code right after the var-.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?
In XenForo 2.3 you don't need to specify the Brands icon. Use the code as you would for any other icon.
Edit
.m-faBase(); and change it to .m-faBase('Brands');.Want to show only icon without text in thread prefix?
Use this example code :
LESS:
You must log in to view
(25 lines)
LESS:
You must log in to view
(26 lines)That's basically it. To add more custom prefixes just go through the above procedure for each prefix.
