Jump to content

Customizing Member Groups Icons/Color


Recommended Posts

  • Administrators

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 icons
    • We'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)


  • 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.


  • 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'>


  • 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.



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


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...