Tag Icons

Theme component
,
61

Yes, that’s the issue with tag groups.

Yes, I just had a look and this seems like a fairly simple fix, core needs to use the tag renderer in the filter dropdown (it would match the tag picker in the composer). I will look into it shortly.

3 Likes
62

I just noticed that the category renderer is also replaced on the dropdown shown when #mentioning on the composer, showing the category icon from the theme component, but the tag renderer shows a renderer different from all other places, with a tag icon beside the tag name:
image

@pmusaraj do you think it’s possible to make this renderer use the one replaced by the theme component too?

Thanks.

2 Likes
63

I think standardising this would make sense, yes. Are you interested in working on a PR for this @renato?

(FYI, a PR is up for the filter dropdown, will be merged probably sometime next week.)

4 Likes
64

I’ve begun using this component to visually alert users when applying a tag will trigger a chat integration.

Would it be possible to optionally color the tag text as well directly from this component? I see a manual option on the forum here. Thanks for the great component!

edit: It’d also be useful to add multiple icons to a tag. Thanks for considering!

1 Like
65

This can be done with SCSS in your theme, we don’t have plans to add this functionality to the component.

No plans to allow multiple icons per tag, either.

2 Likes
66

Hey @pmusaraj

Is there any workaround to set a fallback icon per tag-group yet?

67

Is it possible to change icons on all tags? Instead of bullets to smth else? This component is only for listed tags if I got it right.

Answer found:

.discourse-tags .bullet:before { 
    background: transparent;
    content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 467 856.25" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">.fil0 {fill:black}</style></defs><g><path class="fil0" d="M234 0c129,0 233,105 233,234 0,64 -26,122 -68,165l-165 286 -166 -286c-42,-43 -68,-101 -68,-165 0,-129 105,-234 234,-234zm0 125c50,0 90,40 90,90 0,50 -40,91 -90,91 -50,0 -91,-41 -91,-91 0,-50 41,-90 91,-90z"/></g></svg>'); 
    vertical-align:baseline;
}

SVG icon images can be freely downloaded from sites such as https://thenounproject.com/

1 Like
68

Bullet tags + tag-color

If you’re using bullet-style tags and

  • you want to have the same tag icon and tag text colors
  • you want to show the bullet only if there’s no tag icon set

here’s how i did it for the tags books and science-fiction:

End result:

image
image938×111 13.3 KB

  1. Setup of Tag icons component (this component)

image
image1466×799 70.1 KB

  1. Setup of a secondary component that must be kept in sync with Tag Icons
    In this component we’re doing 2 things:
    1. Hide the bullet for specific tags
    2. Color the tag text with the same color as the icon

For this to work, we create a new theme component: Tag Icons extra.
In the Common/CSS section:

  1. Add the following mixin (needed only once):
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}
  1. For every tag you want to edit, paste the following and replace REPLACEMETAG with the tag name and REPLACEMECOLOR with the same color as the icon:
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

image
image1554×621 41.4 KB

7 Likes
69

Bug report: in the tag selector of a post, the icons are not colored:

Here, the icons should have the same color as the text (text is my own custom css):
image

My config:

image
image955×146 9.98 KB

2 Likes
83

@pmusaraj I have 50 or so tags that I put icons next to about two weeks ago. I check my list of tags now, and five of them don’t have icons anymore… And even if I delete them and re-enter them in, no cigar. I might try deleting all 50 of them and then re-entering them all in to see if that helps, but I wish I didn’t have to, since that’s a pain…

84

Can you post a screenshot of your settings pointing out the tags whose icons are no longer working?

2 Likes
85

tags_1
tags_11920×1080 266 KB

tags_2
tags_21920×1080 281 KB

86

Hmm, it’s curious that the last five entries are not working. Can you try flipping an entry in the last 5 with another one above and see what happens? It looks like the setting value is getting truncated at some point…

3 Likes
88

Just so you know, it wasn’t originally the last five that started not to show up. It was five seemingly random ones, and then I went and deleted them and then re-entered them in to see if they would show up (which they didn’t), and that’s why it seems like they might not be showing up because they are the last few.

With that said, I deleted the proof-verification tag, and re-entered it so that it’s at the front of the line. Was orange, and is still orange and showing up fine. Still seems to be just those five…

97

Is there any way to use those color variables for the tag icon colors?

98

You can use every color for the tag icons.
tagicons
Or what do you mean?

99

Good question, yes, it looks like you can use CSS custom properties, this worked for me:

image
image1508×330 28.4 KB

2 Likes
100

Ah my mistake. Just found my error and it’s working just fine.
Awesome that it’s possible!

1 Like
102

any way to use a png for the icon? I have all my images I want to use as png images and converting them to svg just ruins them and when I do convert I can’t get the icons to load anyways.

Iv got over 400+ images that I would need to convert and seeing that I can’t even get one conversion to work it would be nice to be able to just use the pngs I already have.

103

This component isn’t meant to be used with pngs. You can probably just use css in your case.

2 Likes