Add a custom fontawesome icon to your tag


#1

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

Example:

.tag-announcement:link, 
.tag-announcement:visited, 
.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?
Using discourse as ticket system, so no balls are dropped :woman_juggling:
Display tags by tag group
Set order of tags on topics/messages and in lists
#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); }

#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, 'https://se23.life/uploads/default/original/2X/b/b784a22693d213ec5936051da30756c3765b06a1.png');
}


(Jeremy M (Jerdog)) #4

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


#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:

13%20PM

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.


#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.