Use Font Awesome icon on toolbar

Thread ID:	Created:	Updated:	Platform:	Replies:
147482	Sep 12,2019 07:00 AM UTC	May 28,2020 09:36 AM UTC	JavaScript - EJ 2	5

Subscribe to this post

Tags: Toolbar

Oka Sugandi

Asked On September 12, 2019 07:00 AM UTC

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.

Reply | Reply with quote

Hareesh Balasubramanian [Syncfusion]

Replied On September 13, 2019 01:29 PM UTC

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

Reply | Reply with quote

Copleston

Replied On May 27, 2020 09:39 AM UTC

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.

Reply | Reply with quote

Hareesh Balasubramanian [Syncfusion]

Replied On May 28, 2020 08:36 AM UTC

Hi Copleston,

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

Regards,

Hareesh

Reply | Reply with quote

Oka Sugandi

Replied On May 28, 2020 09:32 AM UTC

Hi Copleston,

Thank you very much for the simple solution!

Regards,

Oka Sugandi.

Reply | Reply with quote

Vengatesh Maniraj [Syncfusion]

Replied On May 28, 2020 09:36 AM UTC

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

Reply | Reply with quote

CONTACT US

Use Font Awesome icon on toolbar

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US