Question from another discourse forum

The question is:

Can you do me a favor and ask how they style individual span.username tags by injecting another class, like developers? Like here:

It depends on what your primary group is. Just create a custom CSS file and add something like this. For example, this adds a tag to people who have “Builders” as their primary group.

    .topic-meta-data .username.Builders:after {
      content:"Builder";
      background:#E98992;
      color:#fff;
      font-weight:700;
      font-size:.9em;
      line-height:1;
      display:inline-block;
      border-radius:3px;
      margin:0 0 0 5px;
      padding:2px 4px;
    }
```
1 Like

Sweet, thanks - didn’t know groups injected the class. Do you think it’s possible to work in a FontAwesome icon? I doubt it, but maybe you know some CSS magic I don’t :wink:

Yep, you can use FontAwesome icons using the same concept that @RobodudeMC posted. You just need to grab the Unicode value for the icon you want to use from FontAwesome’s website.

For example, if you wanted to display the user icon in a tag, you’d start off with something like this:

.topic-meta-data .username.Builders:after {
    content: '\f007';
    font-family: FontAwesome;
    /* All of the other styling... don't forget pants! */
}

Yeah, I know. I meant could you do both at the same time. Sorry if I wasn’t clear.

Yeah you can basically do anything I think that is possible with pure CSS, which is a LOT.