How to use a custom icon in card

[mdykstra]

Has anyone figured out a way to use a custom icon on a card?

Thanks!

[moe]

Can you give me an example of what you want to achieve?

You didn’t ask for this, but I’ve seen users do progress bars? is that helpful?

I’ll paste the code here if this is also what you have in mind.

Let me know.

[mdykstra]

I have a few static images (like below) that I converted to icons. I would like to use these custom icons on a few cards vs the font awesome.

[Chem]

Here’s some JavaScript code you may use to do this.

TB.render('component_3',function(data){
    setTimeout(function(){
        if(!data.ele.find('.custom-icon').length){
            data.ele.find('.af-card-component .con').prepend('<img class="custom-icon" src="https://community.tadabase.io/uploads/default/original/2X/f/f21ff3d03ee2bfaa679e94b5bf2299f47a8f82cc.png">');    
        }
    },100);
});

Two things to note

1. You will need to change component_3 to the card component ID
2. You will need to change IMAGE_SRC to the image source. For example, https://community.tadabase.io/uploads/default/original/2X/f/f21ff3d03ee2bfaa679e94b5bf2299f47a8f82cc.png

Do let me know if you have any further questions about this. I’ll be more than happy to help!

[mdykstra]

This does work, however, when I leave the page and go back to it, it adds an additional image.

[Chem]

@mdykstra Good point! I’ve updated the code in the above post to fix that.