Category-symbols for all categories?


(Ali) #1

The category-list shows for the default “Staff” and “VIP” categories a nice little symbol before the category-name.

I mean this symbol “\f0c0” from the FontAwesome. (Can’t post pictures because I’m a new user).

How about making it possible to assign images to all the categories? While it is quite some work to create matching graphics for all categories the navigation would be easier.

Would it otherwise be possible to accomplish this via CSS?


(Kane York) #2

Yep, possible with CSS. Here’s a template for you:

.badge-category {
  &:before {
    // fa styles
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  &[href="/c/ux"]:before {
    content: "\f0c0\a0";
  }
  &[href="/c/meta"]:before {
    content: "\f0c1\a0";
  }
  &[href="/c/extensibility"]:before {
    content: "\f0c2\a0";
  }
}

EDIT: Also going to need something for badge-wrapper.


(Ali) #3

It works like a charm.
I also added a few image-symbols like this:

&[href="/c/dj-software"]:before {
content: url(“http://djdiscourse.com/uploads/default/15/5fda85c4f4e97f43.png”);
margin-right: 3px;
}

They don’t adapt to the text-color of the category but it won’t change much so it’s ok.

Also which FontAwesome-version will be used/is included in Discourse?


(Kane York) #4

I think it’s 4.1 right now, but it may be updated periodically.