Category Icons

[Ant_Vincent]

Hi all - I have installed the plugin but I can’t seem to find where I can configure it?

Is this compatible with 2.6.0.beta2?

here is my app.yml

hooks:
  after_code:
    - exec:
	cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
  ##        - git clone https://github.com/discourse/discourse-adplugin.git
  ##        - git clone https://github.com/discourse/discourse-solved.git
  ##        - git clone https://github.com/discourse/discourse-akismet.git
  ##        - git clone https://github.com/discourse/discourse-bbcode.git
  ##        - git clone https://github.com/discourse/Discourse-Tiles-image-gallery.git
  ##        - git clone https://github.com/tshenry/discourse-versatile-banner.git
          - git clone https://github.com/discourse/discourse-category-icons.git

## Any custom commands to run after building

I have rebuild but can see anything anywhere on the admin panel to config?

Please help

[Don]

Hello this is not a plugin! This is a theme component.

Please read how to install a theme component: How do I install a Theme or Theme Component?

Edit: These are also theme components so install this way

- git clone https://github.com/discourse/Discourse-Tiles-image-gallery.git
- git clone https://github.com/tshenry/discourse-versatile-banner.git

[Ant_Vincent]

Thank you Don you’re a star - as you can tell brand-new to this platform

Ant

[rogerco]

Hi, I’ve just created a PR to add a new option to specify the colour for the icon as “catcol” which will cause it to pickup the colour of the category (as seen in the category stripe and set under edit category|general|background colour
eg “test,hands-helping,catcol,partial”

Most useful with the partial name match so that, in the example, the same icon can be used for all categories with “test” in their slug but they will each pick up their own category colour rather than all using the same. Also provides a quick alternative to having to select a colour for a one-off icon (exact match) - simply use the category colour.

This will also be useful with a proposed further new option to have the icon replace the category stripe whilst maintaining the category colour hint - to be subject of a future PR

RogerCO

[pmusaraj (Penar Musaraj)]

@rogerco’s PR is now merged, you can use the category colour now by adding the special keyword “categoryColour” where the icon color should go. Thanks Roger!

[md-misko]

@pmusaraj

special keyword “categoryColour”

Color is not applied on icons in /categories wiew?

[pmusaraj (Penar Musaraj)]

Ah, sorry about that, should be fixed now.

[REALITY (Jon)]

Hi, does this component require FontAwesome or can I use my own icons?

[renato (Renato Atilio)]

I don’t know if it may be useful for anyone else, but I’ve submitted a pull request for discourse-category-banners to show the discourse-category-icons icon beside the banner title. I’m using it in production here.

[pmusaraj (Penar Musaraj)]

Thanks @renato, your PR is now merged.

[md-misko]

This is a nice addition, but it doesn’t work as expected if the category icon color is set to the same color as the category (you use default black for your category icons in your example, and they get inverted to white, same as the title).

The icon color in the title should probably be set explicitly to the same color as the title, so that any color icons could be used?

[renato (Renato Atilio)]

@md-misko

This is a nice addition, but it doesn’t work as expected if the category icon color is set to the same color as the category (you use default black for your category icons in your example, and they get inverted to white, same as the title).

I had this same issue on my instance, but I realized that by omitting the color of the category icon it takes the appropriate color, being white when on the category renderer: and on the banner title, but black when the background is white: .

However, if you don’t use the box category style and the category icon color is set to the same color as the category background, you’re right, the icon becomes “invisible”.

We could explicitly set it to something else, sure. The banner title uses the category color, maybe this is the safest bet, as you suggested. @pmusaraj what do you think?

[pmusaraj (Penar Musaraj)]

@renato

The banner title uses the category color, maybe this is the safest bet, as you suggested.

Yes, that works for me.

[Doug_White]

Hi. This is a great component. Is it possible to turn off the category icons when they appear in category lists? In our case we want to use the category icons everywhere else they appear but not in the category list drop-down.

[pmusaraj (Penar Musaraj)]

Yes you can add some CSS to hide the icons in the specific lists.

[Doug_White]

Hi Penar. Note that we want to keep the icons for all categories but we want to disable the display of the icon only in the category list control drop-down. I’ve tried working with the “fa d-icon d-icon-lock svg-icon svg-string” and 'category-name" classes but had no luck. Where should I apply the CSS settings? Can you give me a suggestion of settings to try?

Thanks,
Doug

[pmusaraj (Penar Musaraj)]

Sure, I can help. Can you post a screenshot of the UI element where you would like to hide the icons? I’m not 100% sure I understand exactly, with a screenshot I should be able to send you the CSS needed to hide the icons in that specific context only.

[Doug_White]

Hi Penar,

Great. Attached is the screenshot of a test example where we would like to not have the icon display.

. This screenshot shows an arrow icon displaying in the category list drop-down control. We do want the icon to display in other locations on the site (see the second screen shot) Screen Shot 2021-02-08 at 9.59.36 AM|690x356 such as where posts appear. A few users here have requested having something like this back arrow icon so they can easily navigate back to the top of a category after looking at a post. I’ve suggested other ways to do this using the Discourse web interface, but they still would like this request implemented.

Thank you,
Doug White
Carolina Health Informatics Program
University of North Carolina at Chapel Hill

[pmusaraj (Penar Musaraj)]

Hmm, the CSS to do this is this:

.select-kit-row .category-badge-icon {
    display: none;
}

You will run into issues elsewhere though, the category badge is shown in lots of places and that arrow will be confusing more often than it will be helpful.

[Doug_White]

Yes, I know. I told them that, but was requested to do it anyway. Is there a way to remove the icon from appearing in the control itself. It’s still showing up at the top on the list control.

.