Add custom markup to category html


(Pehrlich) #1

hi,

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?

Thanks,
–Peter


(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 */
}

Cheers,
–Peter

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

https://meta.discourse.org/badges/112/waffles


(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.