Add custom markup to category html

(Pehrlich) #1


I’m looking to give each category its own font-awesome icon, with the aid of custom javascript. I can write the javascript which will add the icons to the page, but I haven’t been able to find any simple “after render” hook documented either for ember.js or discourse.

How do I have a snippet of code rendered every time /categories page is displayed?


(Pehrlich) #2

solved. ended up using these CSS rows in conjunction with the existing font-awesome:

#topic-list tr td.category::before {
    /* fa default ruleset: */
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;

    /* custom: */
    margin-right: 20px;
    font-size: 24px;
    position: absolute;
    left: 10px;

/* announcements */
#topic-list tr[data-category_id="14"] .badge-category.bigger::before {
    content: "\f0a1"; /* bullhorn */


PS current FA is 4.0.3, it would be nice if 4.1 was used for the fa-live-saver and other icons.

(Jeff Atwood) #3

I thought we updated Font Awesome recently? Should we update it again @sam?

(Sam Saffron) #4

Yes we are even beyond 4.1.0 as my wonderful badge attests

(Pehrlich) #5

Coolio! not sure what this version number indicates then, d’oh… discourse/font-awesome.scss at master · discourse/discourse · GitHub

(Sam Saffron) #6

I updated the icon fonts and key scss files, skipped a few, when the next major version of font awesome comes out I will clean this up.