1. Home
  2. Forum
  3. Blazor
  4. Font Awesome in Toolbar and Button

Font Awesome in Toolbar and Button

Hi! I have this in my _host.cshtml:
<link rel="stylesheet" rel='nofollow' href="css/fontawesome/all.min.css" />
I'm able to generate a duo-tone icon by this:
<i class="fad fa-acorn"></i>

Here is my toolbar setup:
private readonly List<object> _gridToolbarItems = new List<object>
{
    new ItemModel { Id = "Add-NRP", Text = "Add NRP", PrefixIcon = "e-add", TooltipText = "Non-Rad Project" },
    new ItemModel { Id = "Merge-Projects", Text = "Merge", PrefixIcon = "e-merge", TooltipText = "Merge selected projects to Rad Project" }
};
How do I use Font Awesome icons?

5 Replies
RS Renjith Singh Rajendran Syncfusion Team May 6, 2020 09:31 AM UTC

Hi Hassan,  

Greetings from Syncfusion support.  

As per your requirement we have prepared a sample to show font awesome icon in Grid toolbar by referring the font awesome all min file. You can add your icon in the PrefixIcon property as like the below code. For your convenience we have prepared a sample which can be downloaded from below   

Please refer the below code example.  

 
<SfGrid DataSource="@Orders" @ref="Grid" AllowGrouping="true" AllowPaging="true" Height="200" Toolbar="_gridToolbarItems"> 
    ... 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    public List<Order> Orders { get; set; } 
    ... 
   private readonly List<object> _gridToolbarItems = new List<object> 
    { 
        new ItemModel { Id = "Add-NRP", Text = "Add NRP", PrefixIcon = "fa fa-download", TooltipText = "Non-Rad Project" }, 
        new ItemModel { Id = "Merge-Projects", Text = "Merge", PrefixIcon = "fa fa-binoculars", TooltipText = "Merge selected projects to Rad Project" } 
    };  
} 


[_Host.cshtml] 

<head>    ...    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />    <link rel='nofollow' href="css/site.css" rel="stylesheet" />    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" />    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script></head>

Please get back to us f you have further queries.  

Regards,
Renjith Singh Rajendran 


AD Adriano May 27, 2021 09:40 AM UTC

Dear Support,
in my specific case i have to include fontawesome as  a local reference.
I have it as  

<link rel="stylesheet" rel='nofollow' href="~/plugins/font-awesome/css/all.min.css">

inside _hosts.cshtml
And in this case it doesn't work... :-(
Any chance to get it?
Regards
     Daniele


RS Renjith Singh Rajendran Syncfusion Team May 28, 2021 07:12 AM UTC

Hi Daniele, 

We checked this scenario by creating a sample with our latest version 19.1.0.65, and referring local font-awesome files. But we could not face the reported problem from our side, please download the sample from the link below, 
 
So kindly refer the above attached sample, and check this case from your side. And if you are still facing difficulties then share with us a issue reproducing sample for us to validate this further based on your scenario. 

Regards, 
Renjith R 


SL Stefan Limpert December 6, 2021 03:32 PM UTC

Hi there

i faced some similar issues around the Font Awesome in ToolbarItems, and i found the cause

The reason why some Font awesome icons work and some don't is the e-icons class.

if you add a icon css class to toolbaritmes like your expamles above, follwing code will created:

<span class="fa fa-binoculars e-icons e-btn-icon e-icon-left"></span>

so theres no problem but if you try this for example: PrefixIcon="fa fa-sign-in", the result will be rubbish.

Html: <span class="fa fa-sign-in e-icons e-btn-icon e-icon-left"></span>

Because of e-icons class is priorise their own font-family "e-icons" and in this font-family the "fa-sign-in" doesnt exist.

the only chance to workaround this behavior is to set the font awesome classes as important like this.

.fad { font-family: "Font Awesome 5 Duotone" !important;}

.fa, .fas, .fal {font-family: 'Font Awesome 5 Pro' !important;}

.fal {font-weight: 300 !important;}

.fa, .fas, .fad {font-weight: 900 !important;}

Now Font Awesome has the higher priority. Its not perfect, but it works.

FWY: my theme is tailwind-dark, i tested no other themes to this behavior.

I hope this helped on other issues or queries about Font Awesome.

Regards

Stefan


RS Renjith Singh Rajendran Syncfusion Team December 7, 2021 11:46 AM UTC

Hi Stefan, 
 
Thanks for your update. We are glad to hear that you have overcome this reported behavior from your side.  
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


Loader.
Up arrow icon