Tag Icons

Theme component
,
104

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;
}
107

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
108

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
109

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

Screenshot

photo_2022-07-23_21-03-10
photo_2022-07-23_21-03-101080×1198 153 KB

111

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.

Screenshot 2022-08-27 at 18-57-23 Tags - TZM Community Forum
Screenshot 2022-08-27 at 18-57-23 Tags - TZM Community Forum1090×159 5.01 KB

Screenshot 2022-08-27 at 18-57-56 Admin - TZM Community Forum
Screenshot 2022-08-27 at 18-57-56 Admin - TZM Community Forum741×399 24.5 KB

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
112

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
115

Hi! :wave:t2:

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

116

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?

1 Like
117

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?

119

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.

image
image815×215 15.2 KB

120

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

2 Likes
121

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

image
image1372×425 45.7 KB

122

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
123

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
124

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
125

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:

image
image1111×192 20.5 KB

discourse-landing-pages

docker_manager

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

3 Likes
126

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
127

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

128

There is a setting for this in the admin panel:

image
image723×143 7.04 KB

1 Like
129

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

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

3 Likes