Label Images

[Former Member]

Is it possible to instead of labels add icon.

In my case I have labels "Gaming" and "Technology"

Instead of "Gaming" I would like to add 

Instead of "Technology" 

My forum : gametek.boards.net/

[Chris]

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 of the desired image and the size we wanted to get the icons to show in the appropriate spots

<style>
/* Technology Label */
.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;
}

/* Gaming Label */
.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;
}
</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.

[Former Member]

Thats it

Thank you so much

Ye I just need template for labels,later I will change those icons,I dont wanna trouble.