Category and sub-category icons - should we bother?

I’ve been experimenting with adding Category Logo Images and would like people’s opinion on how they’d like this forum to look.

If you add an icon to a category, the icon appears:

  • in the category view. (screenshot 1 below)
  • at the top of the category and the makes the first sentence of the “About the xxxxx category” topic appear next to the icon. (screenshot 2 below)

Whilst I like the introduction text appearing at the top, challenges include:

  • determining an optimal size for the icon
  • the icon takes up a lot of space on mobile devices (can probably be solved with CSS changes)

I’ve also used small white images as an icon to bring the sentence to the top without the image size issues. (e.g. Open Economics). Care is needed with the height of the image otherwise text wrapping is not great.

Is it worth using icons or should we go without (screenshot 3 below)

Should we bother with category icons?


Category View (screenshot 1)

A category with an icon (screenshot 2)

A category without on icon (screenshot 3)

I like the icons and I think they’re better but I would just go organically with this. I imagine the people more interested in the category will make it prettier (I don’t know if discuss has granular permissions for that).

Cheers,

1 Like

If anyone wants to make a logo, here’s the raw materials.

The ideal category logo size seems to be around 32x32 pixels. The one below is 41x41.

Resizing the various logos provided in the link above doesn’t work great in the tools I have, so an SVG file for working/local group artwork would help so we could make clear small versions of icons like this…

Or perhaps CSS or a Discourse configuration could be used to constrain icon sizes - @nealbastek?

Sounds reasonable. If someone can produce the proper css I know how/where to change it in the admin here. @sam something you can help with?

1 Like

Those images have a maximum height applied to them, which is currently quite big (150px). This could be changed to 32px (for example), like so:

.category-logo {
    max-height: 32px;
}
1 Like