As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to use jquery to place the font awesome star icon next to the admin blogs. Out of the two displayed blogs, only the bottom one (with the blue Tumblr icon) belongs to an admin. View the member bar image here.
I made an initial coding attempt but feel a bit lost. I know this can be achieved because I've seen it on other Tumblr themes using jQuery classes and CSS. I'm just struggling to make it work as nothing is showing up so far.
Here's my somewhat flawed jQuery script:
<script>
$(document).ready(function(){
$("title").attr(".admins");
$(".actualmember").addClass(".admins");
});
</script>
The CSS:
<style type="text/css">
.actualmember {
display:block;
margin-top:15px;
text-transform:uppercase;
font-weight:bold;
margin-left:50px;
}
.admins {
position:relative;
}
.admins:before {
content: "\f005";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
</style>
The HTML: {block:GroupMembers}
<h2>Members</h2>
{block:GroupMember}<div class="members">
<img src="{GroupMemberPortraitURL-40}">
<a class="actualmember" href="{GroupMemberURL}" title="{GroupMemberTitle}">
{GroupMemberName}<i class="fas fa-star" title="admins"></i></a>
</div>
{/block:GroupMember}
</div>
{/block:GroupMembers}