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!

Example:

[data-tag-name="announcement"]:link, 
[data-tag-name="announcement"]:visited, 
[data-tag-name="announcement"].bullet::before {
    color: #a76350;
}

[data-tag-name="announcement"].bullet::before {
    content: "\f0a1"; 
}

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


Configure tag color
Using discourse as ticket system, so no balls are dropped :woman_juggling:
Share your custom CSS?
Display tags by tag group
Set order of tags on topics/messages and in lists
(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:

[data-tag-name="sci-fi"] { @include fAwesome("\f135", #A2C785); }
[data-tag-name="meetup"] { @include fAwesome("\f0c0", #C2A785); }
[data-tag-name="history"] { @include fAwesome("\f1da", #c7a5C2); }
[data-tag-name="election-2017"] { @include fAwesome("\f19c", #A785C2); }
[data-tag-name="brexit"] { @include fAwesome("\f154", #C2A785); }
[data-tag-name="humor"] { @include fAwesome("\f118", #C2A785); }
[data-tag-name="free"] { @include fAwesome("\f06b", #85A785); }
[data-tag-name="allottments"] { @include fAwesome("\f06c", #85A785); }
[data-tag-name="street-art"]{ @include fAwesome("\f1fc", #a76350); }
[data-tag-name="suspended"] { @include fAwesome("\f05e", #bf4444); }
[data-tag-name="blocked"] { @include fAwesome("\f05e", #bf4444); }
[data-tag-name="news"] { @include fAwesome("\f0a1", #a76350); }
[data-tag-name="member-discount"] { @include fAwesome("\f295", #a76350); }
[data-tag-name="new-features"] { @include fAwesome("\f005", #a7a320); }
[data-tag-name="recommendations"] { @include fAwesome("\f05a", #c793a0); }
[data-tag-name="how-to"] { @include fAwesome("\f059", #a7a3e0); }
[data-tag-name="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;
    }
}

[data-tag-name="trump"] {
    @include withImage(#823755, 'https://se23.life/uploads/default/original/2X/b/b784a22693d213ec5936051da30756c3765b06a1.png');
}


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

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.


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


(Kris) #10

FYI: we had to change tag classes due to some CSS collision issues so I’m updating the references in the topic above.

Now instead of a class it’s a data attribute.

[data-tag-name="yourtagname"] {
  // styles here
}

(Chris Beach) #11

Thanks for explaining the change and updating the examples in this topic.

I had quite a lot of CSS to update so I used the following replacement regexp in IntelliJ:

\.tag-([a-zA-Z0-9\-]*)
[data-tag-name="$1"]