Labels as images

[homogenix]

Hello, I was wondering if it is possible to have the thread labels as images instead of text.

So, instead of looking like this:


It would look like these:
 

However, I still need the labels links to work for searching purposes. Is that possible? Thanks in advance.

[Chris]

Replace Thread Labels With Images

Edit:

---

Aug 4, 2017 15:32:03 GMT -8 Chris said:

You can employ CSS to replace the labels with icons but you will first need to determine the class of the label you are wishing to replace. On your News&Reviews (board-42) board I see a label for technology (label-2) and also one for gaming (label-1) and I determined that by simply right clicking each label and choosing the inspect option in the resulting right-click menu. You could also just click on a label and see the id in the URL once the page loaded (e.g. http://gametek.boards.net/board/42/news-reviews?filters[]=label_id:eq:1) then construct the class by appending that number to ".label-".

Once I knew the class of the labels we wanted to change then it was just a matter of plugging in the class, url and size of the desired image we want for each label

<style>
/* Start Iconify Technology Label (label-2) */
.o-label-anchor .label-2 {
    font-size: 0;
}

.o-label-anchor .label-2::after {
    background-image: url("//cdn4.iconfinder.com/data/icons/it-communication-line/614/2858_-_Connected_Devices-512.png");
    content: " ";
    background-size: 40px;
    display: inline-block;
    width: 40px;
    height: 40px;
}
/* End Iconify Technology Label */



/* Start Iconify Gaming Label (label-1) */
.o-label-anchor .label-1 {
    font-size: 0;
}

.o-label-anchor .label-1::after {
    background-image: url("//cdn3.iconfinder.com/data/icons/black-easy/512/535112-game_512x512.png");
    content: " ";
    background-size: 22px;
    display: inline-block;
    width: 22px;
    height: 22px;
}
/* End Iconify Gaming Label */
</style>

Since these labels were defined in board-42("News & Reviews") then the most logical place to put the style would be in the header for board-42 but if you wanted it to be changeable with each theme then the bottom of the theme's style sheet (minus the "<style>" and "</style>") would make more sense.

I am not familiar with the iconfinder.com domain but I would think they may not look too kindly on hotlinking their icons (or maybe they may just encourage it) so you should also look into that and perhaps use the images area of your themes to host the images if they are against paying for bandwidth use that does not directly support their site and has no other value to them.

[homogenix]

Thank you Chris, couldn't find this thread so I made my own