This guide is for anyone, who wants to customize their Member Groups.
It's great if you're willing to distinguish between Staff, Members, Donators or other Member Groups.
I'll add some default codes within this guide, which you can easily implement on your website.
Useful Links
Link to all FA iconsWe'll be using Font Awesome icons.
Link to HTML Color Names
There are many colors that may suite your needs or color tastes, that's why this is handy.
You don't want to have your Members to have cyan color on a Light Skin and so forth.
Step by Step
ACP > Members > Groups > Edit (Pencil Icon)
Admins
Group Formatting Field is what we're going to be working with:
I will be using the fa-fa-user icon as default for both Admins, Members and Mods.
<i class="fa fa-user" style="color: red;"></i> <span style='color:#ffff'>
Group Name Remains in all cases: </span>
What you see above, is customized color/icon that I use on my boards for admins.
fa fa-user means icon used, all FA icon codes are found in useful links.
"color: red;" means the user icon will be red (so it's distinguished from other Members)
span style='color:#ffff' means the color of the Admin's username.
Members
The code remains the same, but it won't be red, but it will have the same color as the username, so in this case it will look like this:
<i class="fa fa-user" style="color: ffff;"></i> <span style='color:#ffff'>
Moderators
The same icon, but green color.
<i class="fa fa-user" style="color: green;"></i> <span style='color:#ffff'>
This is all how it looks like in the end.
Customization
Let's say i want to create a Donator Group with a specific icon/color. I want the icon to be a green dollar bill.
<i class="fa fa-usd" style="color: green;"></i> <span style='color:fffff'>
This is how it looks like