Tag Icons

Ok, iv gotten it to fit in the tag box how it looks nice but that’s for every tags box, iv found how to target specific tags but what would be the right way of selecting that tags box to put in the png icon?

trying to select one -

.tag-question::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

Selecting all -

a.discourse-tag.box::before {
    content: url(https://s2.coinmarketcap.com/static/img/coins/16x16/1.png);
    width: 8px;
    height: 4px;
    margin-right: 10px;
    margin-top: 3px;
    display:inline-block;
}

If you’re still looking, I found this site has lots of flag SVG icons and there may be a way to upload them as custom SVG icons on Discourse, not yet sure.

3 Likes

Working great! Here’s a few feature requests:

  1. Auto-suggest adding the svg-icons automatically by the tag icon list inputs
  2. Convert the tag icon list into a 3 column table, where there can be autocompletion on tags and font-awesome v5 icons
  3. Add a link to Search v5 Icons | Font Awesome as turns out I was searching the latest font awesome (current v6) and wondering why my inputs weren’t working.
  4. Adopt font awesome v6

Thank you for this.

1 Like

Any idea why I havent a space between tags? Only happens on mobile

Screenshot

2 created tags are not working for some reason, could this be a bug? I created the tag interview with the SVG logo microphone-stand and the tag lecture with the SVG logo camcorder. Both remain blank.


It does work when I set both tags to use the film SVG logo, which I already used for another tag. So for some reason the 2 initial logos I want to use don’t get accepted.

Can someone reproduce this issue? I could just reproduce it in a clean dev environment with just with this theme component installed. How can I see which version of FontAwesome is in use. Maybe I’m just selecting icons that aren’t included in the version on Discourse. I guess it’s version 5.15. Since these icons were included in 5.11 or 6.0, it should be included.

1 Like

I can’t get them to work either, so it may be a case of them not being included in the available set.

1 Like

Hi! :wave:t2:

I wonder Can I use some icons with images like nature?

Does this work with tags in tag groups?

I just ran a test in a private category with your tag1 and it works. However tags in a tag group seem to not work?

I am having a similar issue. It seems when a tag exceeds 10 chars the icons do not display.

Figured out tag group issue. seems needed to add tags from groups directly to category vs adding tag group?

I cant get the tag icons to appear anywhere but in the sidebar. Anyone has any idea why this is the case? Tried reinstalling the component, using only that component together with the default theme, still no joy.

Just to check, you added the icons to the svg icons setting in the theme component?

2 Likes

Yeah I did, you can see that the icons themselves appear to the left in the sidebar, but they do not appear anywhere else:

Hi, Darojax, welcome :wave:

I am unable to reproduce this on my side. :thinking:

Unless CSS is involved or templates are overwritten, the tags are rendered the same way everywhere.

If possible, can you share your forum URL?

1 Like

Hello, thanks for your reply. Unfortunately at this stage the forum is still in development and not open on internet. I’ll get back to you once we go public, or if the issue is resolved.

1 Like

Alright, it’s fine. Can you provide your current Discourse version strictly and list the active plugins/components? Maybe it could give us a hint.

I would try to enable only the Tag Icons component with the default theme without any CSS modifications to see if the issue appears. If not, from that, you can figure out what the culprit is.

1 Like

Of course:

Discourse Version Installed
3.2.0.beta2
(be04154838)

Latest
3.2.0.beta2

I’ve created a fresh Default theme and am only using the Tag icons component installed directly via github:

along with two plugins:

discourse-landing-pages

docker_manager

No other CSS or html or other customisations have been made.

2 Likes

OK I have found the issue. The plugin doesn’t seem able to handle tags that begin with capital letters. I changed the tag names to all lower case and now it works as intended. Tags starting with capital letters look more tidy in my opinion, would be great if this issue could be handled. : ) But still thanks for a great component.

1 Like

I’m glad it’s working now. However, how did you create those tags? They are normally forced to be lowercase.:thinking:

There is a setting for this in the admin panel:

1 Like

You’re right, my bad, I forgot about this setting. :smile:

I know where the issue is, I will propose a fix later. :+1:

2 Likes