Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  

Customizing Member Groups Icons/Color

Recommended Posts

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

  • Hidden Content

      Reply to this topic to see the hidden content.
    • We'll be using Font Awesome icons.
  • Hidden Content

      Reply to this topic to see the hidden content.
    • 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 

    Hidden Content

      Reply to this topic to see the hidden content.
     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


Share this post

Link to post
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.

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.

Sign in to follow this  

  • Create New...