XF 2.3 Add fontawesome after username?

[beerForo]

What is the best way to add an icon here for a group. Already have the color and bold in the CSS section of the group, can I add it there? So the username would look like:

username (icon here)

Thanks

 

[Mr Lucky]

In the CSS rule block add a random neutral rule e.g. font: inherit;

This creates a class for the username in that group.

Then use your browser inspect to find the class, e.g. .username--style18

(Or just use the above class with the usergroup id number)

Then in extra less add you icon

.username--style18:after
{
 
    .m-faContent(@fa-var-sparkles);

}

Then voila:

 

[beerForo]

I'm trying to add the icon to a group that does not have top priority. This is because of the order I want the banners stacked. So let's say the 2 groups they are in are 1000 and 2000. That means the styling shown is for the 2000 group, which is fine (color), but I want the icon shown for the 1000 group and it won't show unless I change priority.

 

[beerForo]

It's a verified badge. Want it to show for a certain group. The members in that group are also in a group with higher priority for username styling. I can't change the priority order due to the way the banners stack. Just need the icon to show after the username for a group no matter the XF priority setting.

 

[nocte]

A workaround might be to create a 3rd user group with a priority of 3000, use this one for the icon definition and the user name styling.

You can assign users of the user group with display priority of 1000 to that 3rd user group automatically with user group promotions.

Should work. Not the most elegant solution, but easy, I guess.

 

[Brad P]

Instead of relying on priority, target the group directly and append the icon manually.

Add this in extra.less:
CSS

/* Verified badge (group 1000 example) */

.username--styleX:after {

    content: "\f005"; /* change icon */

    font-weight: 900;

    margin-left: 4px;

}

Replace styleX with the actual class for your group (e.g. style3, style5, etc.)

Let priority control colour (2000 group)

Use CSS :after (or :before) to force the icon regardless of priority

 

[beerForo]

That doesn't work. I got that answer from ai and a few others, still doesn't show.

 

[beerForo]

Also 2.3 changed the way FA icons are called.

 

[Brad P]

That doesn't work. I got that answer from ai and a few others, still doesn't show.

I just used an ai client and its saying to try this?

Edit the template that renders the username link (look for username_link or search for username--style in templates). Add an extra class for each secondary group:

<xf:set var="$extraGroupClass">

    <xf:foreach loop="$user.secondary_group_ids" value="$gId">

        username--secondary-{$gId}

    </xf:foreach>

</xf:set>

<a class="username username--style{$user.display_style_group_id} {$extraGroupClass}">

Then in extra.less:

.username--secondary-[1000_group_id]:after {

    .m-faContent(@fa-var-circle-check);

    font-family: 'Font Awesome 6 Free';

    font-weight: 900;

    margin-left: 4px;

}