MyBB Community Forums

In this tutorial I will show you how you can easily replace img stars by FontAwesome icons. 

Note: FontAwesome library is needed. Compatible with FontAwesome 4.7, may require modification for upgraded versions of FontAwesome.

1) In ACP open "postbit_classic" template.
2) Find and select this code:

{$post['userstars']}

3) Replace the code above by this one and save.

<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span>

4) Open "memberlist_user" template.
5) Find and select this code:

{$user['userstars']}

6) Replace the code above by this one and save.

<span style="text-align: center;" class="userstar star_{$user['stars']}" title="{$user['usertitle']}"></span>

7) Open "member_profile" template.
8) Find and select this code:

{$userstars}

9) Replace the code above by this one and save.

<span style="text-align: center;" class="userstar star_{$stars}" title="{$usertitle}"></span>

10) Open "global.css" and add at the end this code:

/** Usergroup star rating - FontAwesome **/
.userstar {
	font-family: FontAwesome;
	font-size: 13px;
	color: #969696;
	line-height: 13px;
	display: inline-block;
	letter-spacing: 2px;
}
.star_0 :before {
	content: "\f006\f006\f006\f006\f006\f006";
}
.star_1 :before {
	content: "\f005\f006\f006\f006\f006\f006";
}
.star_2 :before {
	content: "\f005\f005\f006\f006\f006\f006";
}
.star_3 :before {
	content: "\f005\f005\f005\f006\f006\f006";
}
.star_4 :before {
	content: "\f005\f005\f005\f005\f006\f006";
}
.star_5 :before {
	content: "\f005\f005\f005\f005\f005\f006";
}
.star_6 :before {
	content: "\f005\f005\f005\f005\f005\f005";
}

11) You can fully customise the output via this CSS. Letter "X" in .star_X represents the number of stars set in the usergroup settings. Save changes and go to User&Groups tab and continue to "Groups" settings in ACP.
12) Open any of you usergroup (for example "Administrators") and find "User Stars" settings. 
13) Here you can set any number - in our case 0-6 (you can add more, just edit your CSS code mentioned above). 
14) After that leave blank URL for User Star image on the right and save the changes.

Here you can see the output. 



You can change color, icons, size and whatever you need. 

Thank you @effone for your hints and support! Really appreciate it!

Great tut elden, You just Rock!!!

Simplified CSS, first post edited

Nice tutorial, Eldenroot .... Thx

This is a really nice tutorial Eldenroot, FA stars are very nice replacements for images.

I will add updated tutorial for FontAwesome 5 soon

EDIT:
For FontAwesome 5 users - template changes are same as in the first post, just use different CSS code (you can find it below) and put it in "global.css". Save and hard refresh your web browser (Ctrl+F5).

.userstar {
	font-family: Font Awesome\ 5 Free;
	font-size: 13px;
	color: #969696;
	line-height: 13px;
	display: inline-block;
	letter-spacing: 2px;
	font-weight: 900;
}
.star_0 :before {
	content: "\f005\f005\f005\f005\f005\f005";
	font-weight: 400;
}
.star_1 :before {
	content: "\f005";
}
.star_1 :after {
	content: "\f005\f005\f005\f005\f005";
	font-weight: 400;
}
.star_2 :before {
	content: "\f005\f005";
}
.star_2 :after {
	content: "\f005\f005\f005\f005";
	font-weight: 400;
}
.star_3 :before {
	content: "\f005\f005\f005";
}
.star_3 :after {
	content: "\f005\f005\f005";
	font-weight: 400;
}
.star_4 :before {
	content: "\f005\f005\f005\f005";
}
.star_4 :after {
	content: "\f005\f005";
	font-weight: 400;
}
.star_5 :before {
	content: "\f005\f005\f005\f005\f005";
}
.star_5 :after {
	content: "\f005";
	font-weight: 400;
}
.star_6 :before {
	content: "\f005\f005\f005\f005\f005\f005";
}

Unfortunately FontAwesome 5 doesn't support "f006" symbol code for regular star anymore, so it must be fixed by using :after tag.

About time someone made a tutorial for this lol even though a while back I needed this and couldn't find a tutorial but here it is now.

Good work Elden.

This doesn't seem to work for me

Error log + did you upload the correct FontAwesome version and library?

Hi!

I have done all the modifications,but i don't know anything about Fontawesome version and library.

How to add that library?

I visited their website but no clue of what to look for..

Really sorry for the trouble but i am able to do it.