the reason why some folks may think it does not work is they may be looking at the administrator account and seeing it not display..., perhaps because this needs to be added to the css to make it display.
.star_7:before {
content: "\f005\f005\f005\f005\f005\f005\f005";
}
Because here is why: Fyi, by default there are actually 7 stars not 6 and this tutorial is only setup for 6 so not only does the 7th need to be added but each of the original six need to be modified to support 7 stars.
So for me to get it working correctly with FA 4.7 I merely modified the CSS for example as follows:
/** Usergroup star rating - FontAwesome 4.7 **/
.userstar {
font-family: "FontAwesome";
font-size: 13px;
color: #D5CA3C;
line-height: 13px;
display: inline-block;
letter-spacing: 2px;
}
.star_0:before {
content: "\f006\f006\f006\f006\f006\f006\f006";
}
.star_1:before {
content: "\f005\f006\f006\f006\f006\f006\f006";
}
.star_2:before {
content: "\f005\f005\f006\f006\f006\f006\f006";
}
.star_3:before {
content: "\f005\f005\f005\f006\f006\f006\f006";
}
.star_4:before {
content: "\f005\f005\f005\f005\f006\f006\f006";
}
.star_5:before {
content: "\f005\f005\f005\f005\f005\f006\f006";
}
.star_6:before {
content: "\f005\f005\f005\f005\f005\f005\f006";
}
.star_7:before {
content: "\f005\f005\f005\f005\f005\f005\f005";
}
Note: FA5 version will also need to be updated to reflect the 7 actual stars as opposed to the existing 6 currently in the fa5 css version.
For example modified css fo Font Awesome 5:
/** Usergroup star rating - FontAwesome 5 **/
.userstar {
font-family: "Font Awesome 5 Free";
font-size: 13px;
color: #D5CA3C;
line-height: 13px;
display: inline-block;
letter-spacing: 2px;
font-weight: 900;
}
.star_0:before {
content: "\f005\f005\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_1:before {
content: "\f005";
}
.star_1:after {
content: "\f005\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_2:before {
content: "\f005\f005";
}
.star_2:after {
content: "\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_3:before {
content: "\f005\f005\f005";
}
.star_3:after {
content: "\f005\f005\f005\f005";
font-weight: 400;
}
.star_4:before {
content: "\f005\f005\f005\f005";
}
.star_4:after {
content: "\f005\f005\f005";
font-weight: 400;
}
.star_5:before {
content: "\f005\f005\f005\f005\f005";
}
.star_5:after {
content: "\f005\f005";
font-weight: 400;
}
.star_6:before {
content: "\f005\f005\f005\f005\f005\f005";
}
.star_6:after {
content: "\f005";
font-weight: 400;
}
.star_7:before {
content: "\f005\f005\f005\f005\f005\f005\f005";
}
So now let us just for proof of it working with 4.7 or 5 and for this to be successfully setup walk through the steps again with the modified css and adding the fontawesome include:
For Font Awesome 4.7 :
In headerinclude add:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
For Font Awesome 5:
In headerinclude add:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
In posbit and postbit_classic find:
{$post['userstars']}
Replace with:
<span style="text-align: center;" class="userstar star_{$post['stars']}" title="{$post['usertitle']}"></span>
In memberlist_user find:
{$user['userstars']}
Replace with:
<span style="text-align: center;" class="userstar star_{$user['stars']}" title="{$user['usertitle']}"></span>
In member_ profile find:
{$userstars}
Replace with:
<span style="text-align: center;" class="userstar star_{$stars}" title="{$usertitle}"></span>
For Font Awesome 4.7:
Add to global.css:
/** Usergroup star rating - FontAwesome 4.7 **/
.userstar {
font-family: "FontAwesome";
font-size: 13px;
color: #D5CA3C;
line-height: 13px;
display: inline-block;
letter-spacing: 2px;
}
.star_0:before {
content: "\f006\f006\f006\f006\f006\f006\f006";
}
.star_1:before {
content: "\f005\f006\f006\f006\f006\f006\f006";
}
.star_2:before {
content: "\f005\f005\f006\f006\f006\f006\f006";
}
.star_3:before {
content: "\f005\f005\f005\f006\f006\f006\f006";
}
.star_4:before {
content: "\f005\f005\f005\f005\f006\f006\f006";
}
.star_5:before {
content: "\f005\f005\f005\f005\f005\f006\f006";
}
.star_6:before {
content: "\f005\f005\f005\f005\f005\f005\f006";
}
.star_7:before {
content: "\f005\f005\f005\f005\f005\f005\f005";
}
For Font Awesome 5:
Add to global.css:
/** Usergroup star rating - FontAwesome 5 **/
.userstar {
font-family: "Font Awesome 5 Free";
font-size: 13px;
color: #D5CA3C;
line-height: 13px;
display: inline-block;
letter-spacing: 2px;
font-weight: 900;
}
.star_0:before {
content: "\f005\f005\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_1:before {
content: "\f005";
}
.star_1:after {
content: "\f005\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_2:before {
content: "\f005\f005";
}
.star_2:after {
content: "\f005\f005\f005\f005\f005";
font-weight: 400;
}
.star_3:before {
content: "\f005\f005\f005";
}
.star_3:after {
content: "\f005\f005\f005\f005";
font-weight: 400;
}
.star_4:before {
content: "\f005\f005\f005\f005";
}
.star_4:after {
content: "\f005\f005\f005";
font-weight: 400;
}
.star_5:before {
content: "\f005\f005\f005\f005\f005";
}
.star_5:after {
content: "\f005\f005";
font-weight: 400;
}
.star_6:before {
content: "\f005\f005\f005\f005\f005\f005";
}
.star_6:after {
content: "\f005";
font-weight: 400;
}
.star_7:before {
content: "\f005\f005\f005\f005\f005\f005\f005";
}