1. Home
  2. Forum
  3. Blazor
  4. How to use Font-Awesome icons

How to use Font-Awesome icons

Client build #3
Hello,

I would like to use fontawesome icons in toasts. But it turns out that I can't use them, because the ICON part of the TOAST systematically has the CSS e-icons class that overloads the font and prevents the font fontawesome from being taken into account.

                var toastModel = new ToastModel
                {
                    Title = "Mot de passe",
                    Content = "Votre nouveau mot de passe a été enregistré avec succès.",
                    CssClass="e-toast-success",
                    Icon = "fad fa-check",
                    ShowCloseButton = true,
                    Timeout = 0
                };




4 Replies
VJ Vinitha Jeyakumar Syncfusion Team March 2, 2022 07:10 AM UTC

Hi Frederic,


To use the third-party icons, you need to refer the font-awesome library in Host.cshtml page as shown below.

Code snippet:
Host.cshtml
<head>  
    <link rel="stylesheet" rel='nofollow' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
</head>  

Index.razor
<SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="fa fa-check">  
        <ToastPosition X="@ToastPosition"></ToastPosition>  
</SfToast>  



Regards,
Vinitha



FF Frederic FOURGEOT March 2, 2022 01:18 PM UTC

If you look closely at the screenshot I shared, you will see that fontawesome is referenced correctly and that is not the problem.

As I indicated in my thread the problem is the systematic presence of the CSS class "e-icons" in the "ICON" part which systematically overloads the font used with that of Syncfusion.

I found a solution for now. But I don't think it's elegant and it's just a patch to cover up a problem that shouldn't be there.


<SfToast @ref="Application.Toast">
    <ToastPosition X="@PositionX" Y="@PositionY"></ToastPosition>
</SfToast>

<script>
    .fa-duotone, .fad {
        position: relative;
        font-family: "Font Awesome 6 Duotone" !important;
        font-weight: 900;
        letter-spacing: normal;
    }
</script>


By adding this information in the page that instantiates SfToast, I manage to overload e-icons and allow the icon to be displayed.

In my  case, I added these lines of code in MainLayout.razor in my BLAZOR application.

But once again, it's an inelegant patch that forces style elements directly into the pages, thus making application maintenance less efficient.


BS Buvana Sathasivam Syncfusion Team March 4, 2022 04:08 AM UTC

Hi Frederic, 
Currently, we are validating your reported query with high priority. We will update you with further details on March 7, 2022. 
  
Regards, 
Buvana S 


BS Buvana Sathasivam Syncfusion Team March 8, 2022 11:41 AM UTC

Hi Frederic, 

Thank you for your patience. 
We suspect that our Syncfusion icons overloaded font-awesome icons. We suggest using the Syncfusion themes before the font-awesome styles reference. Please find the below code fo your reference. 
<head> 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 
</head> 

Please let us know if you have any concerns. 

Regards, 
Buvana S 


Loader.
Up arrow icon