Category icons component

Another request would be having the icon next to the category name on the category page if it’s not a subcategory:

icon is not working.

Example: xbox

how to leave only the icon? icone

This component now supports icons in category lists thanks to @tshenry, thanks Taylor!

@davidkingham this should satisfy your request from May 15.

Note: this does not work for the “Boxes with Subcategories” layout (yet).

6 Likes

Thanks Penar, it doesn’t seem to work properly on my site with this update, there is a lot of space in front of the category name and below it, plus many icons don’t display now. I tried this with all other css disable with the same results.

Edit: I realized the space issue is caused by the category logo being made visible by this update which I have 1x1 transparent png to make the category description visible inside the category. Not sure why this update would change it?

Before:
image

After:
image

1 Like

I figured out the icons-sprite.svg file was deleted when the component was updated so I easily fixed the missing icons issue, is this normal behavior for uploads to be deleted when updated?

Here’s another example of the component affecting the layout

Before:
image

After:
image

Yes, that is normal, updates will reset everything but the theme settings. You should add the custom icons in a separate theme component.

For the layout changes: yes, there is some css in the component that could be conflicting with your theme. Probably easy to fix if you look at the source and see which css rule is causing the image to no longer float.

3 Likes

Thanks, I’ll add this into another component :+1:

I took a look at the css in your component and cannot figure out why it’s doing this on my site. As I said I have tried this with a theme that has zero css and only activated this component so it’s not an issue with a conflict, it’s an issue with having a category logo image, have you tested the component with a category logo image?

Ah, the category logos were an oversight. Sorry about that! I just submitted a PR for @pmusaraj to review. I’m pretty sure I have all scenarios covered now, but if you notice anything off with the category list section, please mention me and I’ll take a look.

3 Likes

Awesome, thanks @tshenry, the PR is now merged.

3 Likes

Thanks guys! One more tiny problem, on mobile the category title is being constrained to about 200px wide rather than full width, I’ve verified it is caused by this component.

image

Edit: One more little thing, the category icons push the category logo to the right and looks a bit sloppy

image

After the latest commit some (but not all) category names on mobile are truncated (the last one below is Staff):

If the component is disabled the category names are displayed in full. @tshenry can you help?

I just merged @tshenry’s latest PR, it should fix the 2-3 issues just above.

6 Likes

How do I remove the color bullet I tried erasing it from the category but then I cant save
38%20PM

You’ll want to change the site setting category_style to “none”

2 Likes

Is there a plan for this component to also work with subcategories within each category view?

I have subcategories inside a category with the settings

  • show subcategory list above topics in this category
  • subcategory list style: rows

and the icons are only displayed before the category and subcategories on the /categories page, but inside the category itself the subcategories’ icons are absent.

After updating discourse to latest today my custom svg’s no longer display, I haven’t changed anything else so there must be a conflict with a change in core

Are all custom icons missing for you or just some? I’m not aware of any recent core issues with custom icons.

Maybe try triggering a refresh of your SVG sprite (one way to do it is to add a new icon to the svg icon subset site setting.

1 Like

All the custom svgs are not displaying, only the free FA are showing up. I tried adding a new icon as suggested and it had no effect. I did a rebuild fyi and I don’t see anything in the logs that is pertinent. I also tried re-uploading the svg file to no avail.

Thanks all of you for this amazing component.

Do you think it could be adjusted to work with the Event Plugin calendar ? So it would display the colored icons instead of bullets inside the calendar (which would make it very neat and easy to read !)

1 Like

Another rebuild fixed the problem, quite odd! Thanks as always Penar!

3 Likes