 |
Summary | Tag Icons allows tags to have an icon next to the tag label. |
 |
Repository Link | https://github.com/discourse/discourse-tag-icons |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
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 is pretty straightforward:
See also the Category Icons component, which does the same thing for categories.
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.
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)
At this time, no, it can’t work with tag groups because the component doesn’t have access to the makeup of tag groups.
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.
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.
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.
I just merged a fix for this in core, you would need to rebuild your site to see the changes.
Can someone explain how to set this? I have them displaying as icons fine but I want the box around them.
Search for tag style in your site settings
Bloody hell…that simple. Thanks mate.
Hi @pmusaraj ,
I’ve installed the Tag icons theme component. These are my current settings:
I’ve defined three tags that are attached to a Font Awesome icon:
bug-showstopper attached to skull-crossbone
bug-major attached to exclamation-triangle
bug-minor attached to exclamation-circle
This works just fine. However, I try to attach the fourth tag beetle to my uploaded svg-file beetle-face.svg. Unfortunately, this doesn’t work.
How do I attach my own svg-file to a tag properly? Please help me step-by-step. I’m really a beginner here on discourse (just started today) and I have limited background in web technology.
Thank you very much 
Hi @kristof_mulier, welcome to Discourse!
Here is how you can add a custom icon:
Basically, you need to add the SVG icon to a sprite, give it an ID and then add the sprite to the theme and set the var name for it to icons-sprite. Once that’s done, you can use the ID of the icon like the FA icon ids (and don’t use the $ symbol).
