Author Topic: How to use Font Awesome with Render cells  (Read 2764 times)

Hidehiro Ishii

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 44
    • View Profile
How to use Font Awesome with Render cells
« on: June 11, 2018, 07:29:49 am »
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

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 44
    • View Profile
Re: How to use Font Awesome with Render cells
« Reply #1 on: June 25, 2018, 02:15:00 pm »
Hi Team,

Please reply this question.
Is it difficult ?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6310
    • View Profile
Re: How to use Font Awesome with Render cells
« Reply #2 on: June 25, 2018, 10:48:42 pm »
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

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 44
    • View Profile
Re: How to use Font Awesome with Render cells
« Reply #3 on: July 07, 2018, 07:43:22 pm »
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