Use Font Awesome icon on toolbar

[Oka Sugandi]

Hi,

I'm using EJ2 ES5,

I use EJ2 Toolbar, and I have successfully changed the icon using list of EJ icons. But the list of icons is limited, and I want to use Font Awesome or something else.. How to do that?

And also I want to make the toolbar icon size bigger. How to do that?

Thank you very much.

[Hareesh Balasubramanian]

Hi Oka, 

Greetings from Syncfusion Support. 

Based on your requirement we have prepared a sample, which can be viewed from the following link, 

https://stackblitz.com/edit/ieyk6e-bylgux?file=index.html 

Kindly try the above sample, if you have any concerns please revert us back for further assistance. 

Regards, 

Hareesh 

[Copleston]

If anyone is looking for this (like I was), the best way I have found to use Font Awesome / Pro is to ensure the correct styles are used by adding this CSS somewhere:

// Support Font Awesome icons (https://fontawesome.com) in e-icons

.fa,

.fas {

font-family: 'Font Awesome 5 Pro' !important;

font-weight: 900 !important;

}

.far {

font-family: 'Font Awesome 5 Pro' !important;

font-weight: 400 !important;

}

.fal {

font-family: 'Font Awesome 5 Pro' !important;

font-weight: 300 !important;

}

.fad {

position: relative;

font-family: 'Font Awesome 5 Duotone' !important;

font-weight: 900 !important;

}

.fab {

font-family: 'Font Awesome 5 Brands' !important;

font-weight: 400 !important;

}

Now you can add toolbar items with Font Awesome / Pro icons like this...

     [

'Add',

'Edit',

'Delete',

{ text: 'Refresh', tooltipText: 'Refresh the data', prefixIcon: 'fad fa-sync-alt' }

]

I hope it helps someone.

[Hareesh Balasubramanian]

Hi Copleston, 

Thanks for your solution😊. It may really help someone who using Font Awesome icons. 

Regards, 

Hareesh 

[Oka Sugandi]

Hi Copleston,

Thank you very much for the simple solution!

Regards,

Oka Sugandi.

[Vengatesh Maniraj]

Hi Copleston,

Thank you very much for the simple solution!

Regards,

Oka Sugandi.

Hi Oka,

Please get in touch with us if you need any further assistance.

Regards,

Vengatesh