ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: Hidehiro Ishii on June 11, 2018, 07:29:49 am

Title: How to use Font Awesome with Render cells
Post by: Hidehiro Ishii 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.

Title: Re: How to use Font Awesome with Render cells
Post by: Hidehiro Ishii on June 25, 2018, 02:15:00 pm

Hi Team,

Please reply this question.
Is it difficult ?

Title: Re: How to use Font Awesome with Render cells
Post by: paramvir 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

Title: Re: How to use Font Awesome with Render cells
Post by: Hidehiro Ishii 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