# Verified user icon
**URL:** https://meta.discourse.org/t/verified-user-icon/43882
**Category:** Support
**Created:** [May 8, 2016, 3:02pm UTC](https://meta.discourse.org/t/verified-user-icon/43882 "2016-05-08T15:02:49Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@SystemZ](https://meta.discourse.org/u/SystemZ)
#### Post date: [May 8, 2016, 3:02pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/1 "2016-05-08T15:02:49Z")
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?
---
### Author:  [@Overmind](https://meta.discourse.org/u/Overmind)
#### Post date: [May 8, 2016, 3:17pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/2 "2016-05-08T15:17:04Z")
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.
---
### Author:  [@SystemZ](https://meta.discourse.org/u/SystemZ)
#### Post date: [May 8, 2016, 3:46pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/3 "2016-05-08T15:46:13Z")
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 ☹
```css
.username[data-user-card='SomeFamousNick']{
color: green;
}
```
---
### Author:  [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [May 8, 2016, 4:47pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/4 "2016-05-08T16:47:19Z")
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 ``:
```plaintext
```
In CSS:
```plaintext
.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:
```plaintext
.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.
---
### Author:  [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [May 8, 2016, 5:26pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/5 "2016-05-08T17:26:23Z")
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.
```SCSS
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;
}
}
```
---
### Author:  [@Yuun](https://meta.discourse.org/u/Yuun)
#### Post date: [May 8, 2016, 5:28pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/6 "2016-05-08T17:28:59Z")
Oh! Yeah, that’s a much better fix. Do that instead.
Learn something new everyday. 🙂
---
### Author:  [@SystemZ](https://meta.discourse.org/u/SystemZ)
#### Post date: [May 8, 2016, 5:41pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/7 "2016-05-08T17:41:44Z")
This is awesome 😍
Thanks!
---
### Author:  [@Roxelle](https://meta.discourse.org/u/Roxelle)
#### Post date: [May 9, 2016, 6:12pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/8 "2016-05-09T18:12:34Z")
It’s possible to insert icon for one personal member by fontawesome?
---
### Author:  [@neil](https://meta.discourse.org/u/neil)
#### Post date: [May 9, 2016, 6:52pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/9 "2016-05-09T18:52:51Z")
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.
```plaintext
.group-verified .poster-avatar-extra {
display: block;
width: 24px;
content: url(https://cdn.example.com/.../bd8ecfb.png);
position: absolute;
top: 36px;
right: -8px;
}
```
---
### Author:  [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [May 10, 2016, 4:28am UTC](https://meta.discourse.org/t/verified-user-icon/43882/10 "2016-05-10T04:28:03Z")
For whatever reason I had trouble targeting poster-avatar-extra
But I got this to work
```css
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;
}
```
---
### Author:  [@Roxelle](https://meta.discourse.org/u/Roxelle)
#### Post date: [May 10, 2016, 6:10pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/11 "2016-05-10T18:10:03Z")
For the single member?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [May 10, 2016, 6:44pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/12 "2016-05-10T18:44:15Z")
@DeanMarkTaylor share the code for a single member
> [@DeanMarkTaylor](#):
>
> span.username a[data-user-card=“DeanMarkTaylor”],
---
### Author:  [@Roxelle](https://meta.discourse.org/u/Roxelle)
#### Post date: [May 10, 2016, 8:05pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/13 "2016-05-10T20:05:32Z")
Thanks @Trash.. And for the change icon? (A personal icon by fontawesome or link url)
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [May 10, 2016, 8:55pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/14 "2016-05-10T20:55:29Z")
@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);`
---
### Author:  [@Roxelle](https://meta.discourse.org/u/Roxelle)
#### Post date: [May 11, 2016, 12:02pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/15 "2016-05-11T12:02:09Z")
For add two icon, how to change css?
---
### Author:  [@Walid\_Riachy](https://meta.discourse.org/u/Walid_Riachy)
#### Post date: [May 13, 2020, 9:57pm UTC](https://meta.discourse.org/t/verified-user-icon/43882/16 "2020-05-13T21:57:37Z")
hello where can i edit and put these codes
---
### Author:  [@downey](https://meta.discourse.org/u/downey)
#### Post date: [May 14, 2020, 1:35am UTC](https://meta.discourse.org/t/verified-user-icon/43882/17 "2020-05-14T01:35:29Z")
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.
---
### Author:  [@riking](https://meta.discourse.org/u/riking)
#### Post date: [May 14, 2020, 1:38am UTC](https://meta.discourse.org/t/verified-user-icon/43882/18 "2020-05-14T01:38:40Z")
> [@Add group flair on member avatars](https://meta.discourse.org/t/create-a-group-that-automatically-adds-associated-flair-to-its-members-avatars/82700):
>
> bookmark This is a guide for configuring automatic group flair on user avatars in Discourse. person_raising_hand Required user level: Administrator Automatically add group flair to members’ avatars Group avatar flair displays to the bottom-right of a user’s avatar, providing a stylish way to highlight a user’s group membership. When creating or configuring a group, an admin can choose an image or [Font Awesome](https://fontawesome.com) icon to use as group flair. Summary This guide cover…
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [June 13, 2020, 1:38am UTC](https://meta.discourse.org/t/verified-user-icon/43882/19 "2020-06-13T01:38:53Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.