We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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
loading
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.

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, 

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

Regards, 
Hareesh 


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.

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 


Oka Sugandi
Replied On May 28, 2020 09:32 AM UTC

Hi Copleston,
Thank you very much for the simple solution!

Regards,
Oka Sugandi.

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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon