How to use Font Awesome with Render cells

[Hidehiro Ishii]

Hi Team,

I want to use <i class="fas fa-arrow-up"></i> of Font Awesome with Render cells
instead of <img src="/content/images/arrow-up.gif>.
Please let me know a sample code which is how to use Font Awesome.

[Hidehiro Ishii]

Hi Team,

Please reply this question.
Is it difficult ?

[paramvir]

This css rule needs to be added to assert font-family of font-awesome.

Code: [Select]

.pq-grid .fa{
  font-family: FontAwesome !important; 
}

After that font awesome can be used as normal html in column rendering callback.

Code: [Select]

render: function(ui){             
        return '<i class="fa fa-car" style="font-size:20px;color:red;"></i>';
        //return "<b>"+ui.cellData+"</b>";
}
             

https://plnkr.co/edit/ZapxeACwNhXC4KyUd6JL?p=preview

[Hidehiro Ishii]

Hi Team,

I am sorry that my response is too late.
According to your sample code, I have understood how to use Font Awesome with Render cells.
Please close this case.
Thank you for your answer.

Best Regards,

Koichi Ida