Tag icons component

Repository:

https://github.com/pmusaraj/discourse-tag-icons

Installation instructions: How do I install a Theme or Theme Component?

What this does?

This component allows tags to have an icon next to the tag label. Here is an example of how this would look, with tag style set to the default (simple):

Here is how this looks with tag style set to box:

Configuration

Configuration is pretty straightforward:

See also the Category Icons component, which does the same thing for categories.

31 Likes

Does this also work with custom svg?

Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons for details.

4 Likes

Wow, this is awesome!

Can this be expanded to work with tag groups? (All tags within a specific tag group would get a specific icon)

1 Like

At this time, no, it can’t work with tag groups because the component doesn’t have access to the makeup of tag groups.

1 Like

Okay. We have a large number of tags (over 200) but will only require 3 or 4 different icons.

Is there a way we could assign one icon for multiple tags, without having a separate row for each tag?

Let me know if this makes sense

Thanks!

No, there is no way of doing that right now.

1 Like

I love this idea, but for the life of me, I can’t get the icons to display. I’m on Discourse 2.2.1, and I’ve got the theme component installed and added under my main theme. But no icon shows up on the tags:

noicons

Here’s what things look like in settings:

For the component:


And for the theme:
maintheme

I know I must be missing something obvious, but I can’t for the life of me figure out what. Can someone help?

You need to be on the very latest tests-passed, I only added support for this in core yesterday. A rebuild should do it.

5 Likes

Ah, ok! That answers that question! Thank you!

1 Like

not working for me … what am I doing wrong ? :smiley:

You must be running latest tests-passed of Discourse. Upgrade Discourse to latest.

1 Like

Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?

Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.

3 Likes

Could the icon be added to the dropdown menu as well?

6 Likes

This is wonderful, thank you!

How do you set which style of an icon to choose? For example, the Font Awesome icon “copyright” has a solid and regular form. I’d like to use the solid one.

What do I do if an icon doesn’t show up? Right now everything works except for “cuttlefish”, for example.

I accidentally hit the reset button multiple times. Is there a way for us to save our settings so that if I accidentally hit reset, I don’t lose all those settings?

For most icons, you can use the far- prefix to pick the regular icon. By default, without a prefix, the icon style used will be solid. However, the copyright icon is a bit of an exception, because the old FA4 icon has been renamed to the FA5 regular version, and we have a mapping in core that essentially forces both copyright and far-copyright to use the regular style.

I think we can soon fix this, you’ll soon be able to correctly use the solid style for the copyright icon.

For “cuttlefish”, did you try adding “fab-cuttlefish”? This is a brand icon, hence the fab- prefix. Make sure you add this to both setting fields.

5 Likes

Thanks, @pmusaraj, this worked perfectly.

What are your thoughts on the question above?

I just merged a fix for this in core, you would need to rebuild your site to see the changes.

3 Likes