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).

5 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