# Avatar Flair (not Badges) for Groups

**URL:** https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576
**Category:** Feature
**Created:** [12. August 2016 um 21:14 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576 "2016-08-12T21:14:06Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![neil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neil/32/102150_2.png) [@neil](https://meta.discourse.org/u/neil)
#### Post date: [26. August 2016 um 15:23 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/21 "2016-08-26T15:23:21Z")

</div>

> [@tobiaseigen](#):
>
> not even sure actually what “automatically set as primary group” means. Does this mean that when the person is awarded the badge, their “primary group” is set to this group from whatever it was previously? Does primary group have any other purpose?

Groups are used to control access to categories, so it’s helpful to be able to put people into multiple groups. Primary group is used to give people a title, to show flair on their avatar, and a lot of customizations depend on primary group in CSS and plugins. Also, not sure what you mean by “awarded the badge” since this isn’t a badge. 😛

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [26. August 2016 um 16:40 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/22 "2016-08-26T16:40:46Z")

</div>

> [@neil](#):
>
> Also, not sure what you mean by “awarded the badge” since this isn’t a badge. 😛

Sorry, got mixed up in my haste. I have implemented a “core membership” badge and avatar flair. The badge is awarded based on group membership via a badge sql query. So in my head these are the same thing.

Thanks for explaining - this makes good sense to me. Getting there. 🙂

---

<div class="post-metadata">

### Author: ![Scott\_Salter](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/scott_salter/32/121576_2.png) [@Scott\_Salter](https://meta.discourse.org/u/Scott_Salter)
#### Post date: [26. August 2016 um 16:59 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/23 "2016-08-26T16:59:03Z")

</div>

Been wanting to do this for a while, love it.

It does, however, looks slightly off if you have category cards activated through CSS using @rewphus’s material design.

[https://meta.discourse.org/t/material-design-for-discourse/28864](https://meta.discourse.org/t/material-design-for-discourse/28864)

![](https://global.discourse-cdn.com/meta/original/3X/2/2/22aa0de3fb29801527289bd779c8e3100794adc0.png)

---

<div class="post-metadata">

### Author: ![rewphus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rewphus/32/115836_2.png) [@rewphus](https://meta.discourse.org/u/rewphus)
#### Post date: [26. August 2016 um 17:23 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/24 "2016-08-26T17:23:04Z")

</div>

I can make some adjustments for this in the stock them, when both that and this are released.

> [@Material Design Theme](https://meta.discourse.org/t/material-design-stock-theme/47142):
>
> discourse2Summary Material Design has been created to be easily customizable.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/material-design-theme)hammer_and_wrenchRepository Link [https://github.com/discourse/material-design-stock-theme](https://github.com/discourse/material-design-stock-theme)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme Features Color Options

I don’t think it should be too difficult.

---

<div class="post-metadata">

### Author: ![neil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neil/32/102150_2.png) [@neil](https://meta.discourse.org/u/neil)
#### Post date: [26. August 2016 um 21:48 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/25 "2016-08-26T21:48:16Z")

</div>

> [@tobiaseigen](#):
>
> I was expecting/hoping to find the ability to add font awesome class icons, similar to adding badges. Is there a particular reason this was not done for flair?

I added support for font awesome icons, with a colour field for them:

 ![](https://global.discourse-cdn.com/meta/original/3X/6/f/6f6c415bc1d654511b994bcf9dfbd00216fb89f1.png)

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [31. August 2016 um 02:06 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/26 "2016-08-31T02:06:16Z")

</div>

My community is loving flair, esp with the font awesome icons - many thanks, @neil! 🚀 🎆

Flair would be improved with a customizable helper text for mouseover of the flair image. Maybe not the best example, but instead of “team” the helper text could display “Member of the Discourse Team”.

Alternatively, use the text in the _Default title for all users in this group_ field in group settings if it exists. If not, show the group name as it does now.

It would even be nifty to be able to provide a link to let people learn more about that flair group and how to acquire it. In our case, “Core Member of the Global Legal Empowerment Network. Learn how you too can become a core member.”

---

<div class="post-metadata">

### Author: ![BenLeong](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/benleong/32/60951_2.png) [@BenLeong](https://meta.discourse.org/u/BenLeong)
#### Post date: [1. September 2016 um 00:22 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/27 "2016-09-01T00:22:09Z")

</div>

We’ve added flair to our Staff and Moderator groups, and it’s been well received so far - it gives a nice bit of extra visibility to those guys for their regular involvement in threads, as we only use the Staff highlight colour for major announcements and updates.

---

<div class="post-metadata">

### Author: ![kylejm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kylejm/32/121560_2.png) [@kylejm](https://meta.discourse.org/u/kylejm)
#### Post date: [2. September 2016 um 07:29 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/28 "2016-09-02T07:29:05Z")

</div>

I’ve set a flair for staff members of our community, but they’re not showing. Are there any obvious things I could have done wrong?

I’ve set the flair image and background colour for the group.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [2. September 2016 um 13:41 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/29 "2016-09-02T13:41:18Z")

</div>

Check this - perhaps you are having the same issue I had.

> [@tobiaseigen](#):
>
> Ah - I got it working on my site. @kuyashi.. the answer is that you have to select the “automatically set as primary group” for the flair to show up. I guess it has to know which one takes priority.

@neil if this is going to be a recurring theme, then some helper text for the flair settings would be a good idea. Something along the lines of “to display flair, automatically set as primary group must be selected above”.

---

<div class="post-metadata">

### Author: ![kylejm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kylejm/32/121560_2.png) [@kylejm](https://meta.discourse.org/u/kylejm)
#### Post date: [2. September 2016 um 14:12 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/30 "2016-09-02T14:12:51Z")

</div>

Worked a treat! Thanks!

What does `primary group` actually mean? o\_O

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [2. September 2016 um 14:14 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/31 "2016-09-02T14:14:35Z")

</div>

you might want to read the rest of this topic. 😉

---

<div class="post-metadata">

### Author: ![jesselperry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jesselperry/32/119501_2.png) [@jesselperry](https://meta.discourse.org/u/jesselperry)
#### Post date: [11. September 2016 um 17:49 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/32 "2016-09-11T17:49:46Z")

</div>

Good summary here too on what Primary Group does (basically nothing other than CSS and title):

> [@Setting a primary group for users](https://meta.discourse.org/t/what-does-selecting-primary-group-for-a-user-do/25857):
>
> bookmark This guide explains the concept of “Primary Group” in Discourse, detailing what it does and how to set it up. person_raising_hand Required user level: Administrator What is a primary group? A primary group is a custom group that can be assigned to a user as their main group affiliation. This assignment has several visual and functional implications within the Discourse platform. Setting a primary group To set a primary group for a user: Navigate to /admin/users Click on th…

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [13. September 2016 um 18:00 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/33 "2016-09-13T18:00:58Z")

</div>

A feature request - display flair on user cards and user profiles! In this screenshot, it would be meaningful and helpful to see the yellow star on Ope’s user card.

 ![](https://global.discourse-cdn.com/meta/original/3X/a/c/acb98ca942dcc9d14a6cbe35e8527f370b4644da.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [13. September 2016 um 21:49 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/34 "2016-09-13T21:49:38Z")

</div>

I agree with this for the group overlay images / glyphs @neil can you make it so?

---

<div class="post-metadata">

### Author: ![neil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neil/32/102150_2.png) [@neil](https://meta.discourse.org/u/neil)
#### Post date: [14. September 2016 um 20:27 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/35 "2016-09-14T20:27:50Z")

</div>

Sure, will look at adding that. I guess the flair will have to be bigger to match the size of the avatar on the card.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [15. September 2016 um 13:34 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/36 "2016-09-15T13:34:54Z")

</div>

> [@neil](#):
>
> Sure, will look at adding that. I guess the flair will have to be bigger to match the size of the avatar on the card.

Excited to see this in action - thanks! ☀

> [@tobiaseigen](#):
>
> @neil if this is going to be a recurring theme, then some helper text for the flair settings would be a good idea. Something along the lines of “to display flair, automatically set as primary group must be selected above”.

FYI it is indeed becoming a recurring theme. People don’t get the primary group requirement out of the box and keep getting tripped up by it.

> [@kuba-orlik](#):
>
> We’ve set up a few groups and added a Flair icon (using a font-awesome class). But flairs are not displayed for any user… Is there a switch somewhere to make them show up?

---

<div class="post-metadata">

### Author: ![neil](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/neil/32/102150_2.png) [@neil](https://meta.discourse.org/u/neil)
#### Post date: [15. September 2016 um 21:19 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/37 "2016-09-15T21:19:36Z")

</div>

Meta has the flair on user cards now.

 ![](https://global.discourse-cdn.com/meta/original/3X/7/7/772b9d420282756d8a48ad60e348fbb8d143ff76.png)

Next I’ll add some helper text about the primary group.

---

<div class="post-metadata">

### Author: ![growthmonk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/growthmonk/32/121593_2.png) [@growthmonk](https://meta.discourse.org/u/growthmonk)
#### Post date: [17. September 2016 um 09:06 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/38 "2016-09-17T09:06:53Z")

</div>

cool pic I must say, is this from friends?

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [17. September 2016 um 10:49 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/39 "2016-09-17T10:49:19Z")

</div>

No, that is from the movie Office Space.

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [18. September 2016 um 03:14 UTC](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576/40 "2016-09-18T03:14:32Z")

</div>

this looks great - thanks! just testing it now. can you also increase the size of the flair badge if it’s provided using a font awesome image?

also, could you not also display it on the latest list on the list of latest topics on the categories page?

 ![](https://global.discourse-cdn.com/meta/original/3X/e/d/ed391956f81b07f52901974a63fa23ad096490b0.png)

[Previous page](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576.md?page=1)

[Next page](https://meta.discourse.org/t/avatar-flair-not-badges-for-groups/48576.md?page=3)
