Category and sub-category icons - should we bother?

Meta
1

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)

1028×958 152 KB

A category with an icon (screenshot 2)

982×568 98.6 KB

A category without on icon (screenshot 3)

880×538 63 KB

2

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
3

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.

1020×420 81.7 KB

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?

4

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
5

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