Add a custom fontawesome icon and color to your tag

(Chris Beach) #1

Just found I can change tag bullets to font-awesome icons. Awesome!


.tag-announcement.bullet::before {
    color: #a76350;

.tag-announcement.bullet::before {
    content: "\f0a1"; 

Use the font-awesome search page to find an icon, then look for the unicode here:

Share your custom CSS?
Configure tag color
Using discourse as ticket system, so no balls are dropped :woman_juggling:
Set order of tags on topics/messages and in lists
Display tags by tag group
(Chris Beach) #2

This mixin makes tag customisation less repetitive:

@mixin fAwesome ($fa, $col) {
    &:link, &:visited, &.bullet::before {
        color: $col;
    &.bullet::before {
        content: $fa;

Applied to some tags:

.tag-sci-fi { @include fAwesome("\f135", #A2C785); }
.tag-meetup { @include fAwesome("\f0c0", #C2A785); }
.tag-history { @include fAwesome("\f1da", #c7a5C2); }
.tag-election-2017 { @include fAwesome("\f19c", #A785C2); }
.tag-brexit { @include fAwesome("\f154", #C2A785); }
.tag-humour { @include fAwesome("\f118", #C2A785); }
.tag-free { @include fAwesome("\f06b", #85A785); }
.tag-allotments { @include fAwesome("\f06c", #85A785); }
.tag-street-art { @include fAwesome("\f1fc", #a76350); }
.tag-suspended { @include fAwesome("\f05e", #bf4444); }
.tag-blocked { @include fAwesome("\f05e", #bf4444); }
.tag-news { @include fAwesome("\f0a1", #a76350); }
.tag-member-discount { @include fAwesome("\f295", #a76350); }
.tag-new-features { @include fAwesome("\f005", #a7a320); }
.tag-recommendations { @include fAwesome("\f05a", #c793a0); }
.tag-how-to { @include fAwesome("\f059", #a7a3e0); }
.tag-under-observation { @include fAwesome("\f071", #F7941D); }

(Chris Beach) #3

And for image bullets:

@mixin withImage ($col, $image) {
    &.bullet {
        background-image: url($image);
        background-size: 16px 16px;
        background-repeat: no-repeat;
        opacity: 0.4;
        padding: 1px 0 1px 18px;
    &:link, &:visited {
        color: $col;
    &.bullet::before {
        display: none;

.tag-trump {
    @include withImage(#823755, '');

(Jeremy M) #4

Very nice! I am assuming that these go into the Embedded CSS?

(Chris Beach) #5

I put mine in “Common” CSS - unsure if that is best practice, mind you.

(Blu McCormick) #6

This is fantastic, Chris. Thanks.

I am using a font awesome graduation cap icon to indicated tags for assigning particular authors to generate a blog:


So, you see the graduation cap bullet point and you know the name next to it is for the person assigned to blogging that topic.

(Blu McCormick) #7

A non-coder question for clarification. Is this code for if you want to use an uploaded image (link) as the icon for a particular tag? I want to use an image I’ve uploaded for a particular tag due to fontawesome not having an appropriate image for a particular tag I am using.

(Chris Beach) #8

Yes. You’ll need to substitute your image URL in here:

(Blu McCormick) #9

Just did it. That example icon you used cracked me up. A v. tiny head in a humungous screen. Thank you so much for sharing this code.