Icon in category label: how can I add them?


(Roberto_Pezzali) #1

In my discourse installation I notice the lounge label with a small icon: how can I add icon to other categories?


Add icon in categories badge?
Topic List design experiments
(Jeff Atwood) #2

That icon means private. There is no support for glyphs in category badges right now. You could probably add it with css using the before attrib I bet though. Right @awesomerobot?


(songjiayang) #3

like this function, if it works well , thanks .


(NomNuggetNom ) #4

If this is possible @awesomerobot, could you explain how? :blush:


(Benjamin Kampmann) #5

@codinghorror it is possible indeed, but it is rather ugly as we don’t use nice identifier classes or attributes for category rendering at the moment, so the CSS has to match the “href”-attribute and that’s just kinda wrong. Maybe we could add those to make this less ugly? // cc @awesomerobot .


Anyhow, this code does work however and you can paste it into a new Admin->Customize->Stylesheet to make it happen:

a.badge-category[href="/category/discourse"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  content: "\f02e";
  margin-right: 3px
}

You need adapt the following though:

  • discourse in the top href-thing needs to be replaced with the slug of the category you want it to work on
  • content: "\f02e" needs to be replaced with the content of the font-awesome icon-key you want to use. This one is using the Bookmark glyph. In order to figure out which one to use, go to the details page of the icon you want to use and look for the “unicode” text in the description and prefix it with the escaping \ in front:

This works here on both badges in the drop-down as well as in the table list and the topic widget. Enjoy.


(NomNuggetNom ) #6

Amazing, thank you! Wouldn’t a.badge-category have to be changed for the drop-downs and other things?

EDIT: Figured it out! I did something yay :D. Thanks for your help!

EDIT 2: I can’t figure out this area :frowning:


(Benjamin Kampmann) #7

Did you know you can just directly post a link in Markdown here with a line break at the end like this:

https://meta.discourse.org//discourse-meta.s3-us-west-1.amazonaws.com/original/3X/1/9/1969939bacd9f0fb7032dcb6f1559716d1f314ac.png

and it gets rendered right here like this:

Which makes it much easier than having to open another tab just too look at a screenshot…


(NomNuggetNom ) #8

Old habits from before I used a forum as good as Discourse :wink:


(Benjamin Kampmann) #9

So. About that area, where do you want a icon? Because there is no “category label” (as in discourse terms). So maybe pin-point in the screenshot what you want to change and maybe right-click on it to “inspect” it and see what class-definition is in there and you want to have for your css selector.


(NomNuggetNom ) #10

For example, the “New” button (you can’t handle these paint skills)

Looks like this:

So, I tried this:

.ember-view[href="/new"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  content: "\f069";
  margin-right: 3px
}

With no luck. Probably because the <a> tag is completely separate from the class="ember-view".


(Benjamin Kampmann) #11

but you need to use the “a” tag. On the ember-view you don’t know which one it is and neither does it have the required href. Do this:

a[href="/new"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  content: "\f069";
  margin-right: 3px
}

(Also works here on meta :wink: )


(NomNuggetNom ) #12

Oh, dang it. I tried doing that, but I used .a[href="/new" instead of just a[href="/new". Whoopsies. Thanks for your patience :P.


(David García-Navas) #13

Thanks for the info, i think this should be an option when creating categories.

Meanwhile, is there any way to override the default icon with a custom one on a private category?


(Rikki Tooley) #14

This should do it:

a.badge-category.restricted i.fa-group {
    display: none;
}

(Kane York) #15

Even better, @DavidGNavas:

a.badge-category.restricted i.fa-group:before {
    content: "\f02e"; // fa-bookmark
}

(Double-slash comments are allowed - the admin panel uses SCSS.)


(David García-Navas) #16

Thanks for your help!

We have a forum with many private categories, so we would like to distinguish them with different icons (not only change one for another for every private categories).

Playing with the code you’ve shared here, i tried to hide the fa-users and then put the custom icon in a specific category:

a.badge-category.restricted i.fa-group:before {
    display: none;
}

a.badge-category[href="/category/staff"]:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
  content: "\f02e"; // fa-bookmark
  margin-right: 3px
}

But the result is strange:


(Kane York) #17

You’re overcomplicating things.

a.badge-category.restricted[href="/category/staff"] i.fa-group:before {
    content: "\f02e"; // fa-bookmark
}

Have one of these rules for each restricted category.

Unfortunately, it does not fix the category dropdown when that category is selected. It does, however, apply inside the dropdown.

This requires a JS change to fix, though - unless you want to match on the style attribute (I DO NOT RECOMMEND THAT).


(David García-Navas) #18

Thanks very much!

I tried and it works perfect in the topic list, but it seems that it doesn’t work in the editor, when we try to create a topic:

We don’t mind if it doesn’t show custom icons in the category dropdown at the moment, but yes we do on the editor.

Perhaps should we create a marketplace topic to get a plugin in order to see this changes on the editor too? Or is this easier to get?


(James Hayward) #19

You can actually simply this even more to:

.badge-category i.fa-group:before {
    content: "\f023"; // fa-lock
}

Which will hit all the places it might appear. (I’m using a lock icon rather than a bookmark).

This relies on the fact that the i.fa-group only exists within categories labels when they are restricted, so if this changes then this will break.

J