Verified user icon

support
#1

I need to mark some popular users as verified by staff.
Some icon like admins have but with other fontawesome ID.
Ideally every member of a group “Verified” will have this icon.
I’d like to have something like on youtube, twitter etc.

How can I do that? Do I need some plugin for this?

2 Likes
2020: The Year in Review
#2

You could do this with site-wide CSS (bad), not 100% sure but there should be the framework for this based off the moderators and admins having the shield icon. I’m not sure how to make that apply to other groups though as I haven’t messed around with it in a year. I would be interested in knowing how this could be done if possible.

#3

I think that CSS as temporary solution will be ok.
Can you give example how to do it?
I tried this for test but without luck :frowning:

.username[data-user-card='SomeFamousNick']{
  color: green;
}
2 Likes
#4

I think it needs to be .username[data-user-card='SomeFamousNick'] a for that to work, but in any case.

I didn’t see a more direct way to use the widgets to add an icon for now, but you can use this (mildly clumsy) workaround (your users will need to have ‘Verified’ set as their primary group, or you can just target them individually via the data-user-card property if you wanted, although that seems tedious):

edit: just go with @DeanMarkTaylor’s solution below

In </head>:

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('poster-name:after', helper => {
    return helper.h('i.fa#poster-name-icon');
});
</script>

In CSS:

.group-Verified {
    #poster-name-icon:before {
        content: "\f0e7";
    }
}

Replace "\f0e7" with whatever FA icon you want, and you’ll need to fiddle with the CSS to get it positioned right, but it’s a start.

Edit - ah, this will show up after titles/names though (instead of right after the username, like the moderator shield), which might not be exactly what you want.

Ah and if instead (or in addition), you just want to do things like color the username of your verified users, put em all in a ‘Verified’ group, make it their primary group, and do something like this:

.group-Verified {
    .names .username a {
        color: green;
     }
}

And there’s already a .poster-avatar-extra div sitting below each avatar, so you could put stuff below the verified users’ avatars as well, if you wanted.

1 Like
#5

You may / may not want the drop shadow depending on your theme colours:

The following will add this icon for users “DeanMarkTaylor” and “SystemZ”.

You will have to test and fix any cross-browser issues, this has only been tested in Google Chrome.

span.username a[data-user-card="DeanMarkTaylor"],
span.username a[data-user-card="SystemZ"] {
    display: inline-block;
    font-style: normal;
    vertical-align: baseline;
    position: relative;

    &:after,
   &:before {
        position: relative;
        line-height: 1;
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-align: center;
        -webkit-font-smoothing: antialiased;
        text-shadow: 0 0 1px #000;
    }
    
    &:after {
        color: #fff;
        content: "\f00c";
        font-size: 0.8em;
        display: inline-block;
        margin-left: 1em;
        margin-right: 0.4em;
        
    }
    
    
    &:before {
        color: #77c7f7;
        content: "\f0a3";
        font-size: 1.7em;
        display: block;
        float: right;
        margin-left: -1em;
    }
}
16 Likes
#6

Oh! Yeah, that’s a much better fix. Do that instead.

Learn something new everyday. :slight_smile:

1 Like
#7

This is awesome :heart_eyes:
Thanks!

3 Likes
#8

It’s possible to insert icon for one personal member by fontawesome?

#9

You can also add a badge on the user avatar like the Twitter Developer Community does.

To do that, put your verified users in a group and then you can use CSS to style all those users instead of mentioning them all by username in your CSS.

.group-verified .poster-avatar-extra {
    display: block;
    width: 24px;
    content: url(https://cdn.example.com/.../bd8ecfb.png);
    position: absolute;
    top: 36px;
    right: -8px;
}
17 Likes
#10

For whatever reason I had trouble targeting poster-avatar-extra
But I got this to work

div.group-Royals div.topic-avatar::after {
    content: "\1F451";
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 2.5em;
    font-weight: bold;
    color: rgba(238,185,32,.8);
    z-index: -1;
}

11 Likes
#11

For the single member?

#12

@DeanMarkTaylor share the code for a single member

1 Like
#13

Thanks @Trash… And for the change icon? (A personal icon by fontawesome or link url)

#14

@DeanMarkTaylor use fontawesome (two icons to create a twitter icon)

content: "\f00c";

where f00c is the unicode

@neil use an URL

content: url(https://cdn.example.com/.../bd8ecfb.png);

1 Like
#15

For add two icon, how to change css?

#16

hello where can i edit and put these codes

#17

The easiest way to do this these days (4 years later) is to use “avatar flair” feature of a group. Add your desired users to a group, and set that group up options to use a certain icon of your choice. There’s more information here on meta to guide you if necessary.

1 Like
#18
5 Likes
#19

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.