Hover color doesn't change for Font Awesome icons

[Scott Peal]

When I use the below Font Awesome icons, they do not change color when hovered over with the mouse. The e-icons do this fine. How do we make the fa icons work the same way?  

```

    List<ToolbarItemModel> toolbarItems = new List<ToolbarItemModel>

    {

        new ToolbarItemModel { PrefixIcon = "fa-solid fa-objects-column", TooltipText = "Export", Text = "Export" },

        new ToolbarItemModel { PrefixIcon = "fa-solid fa-grip-vertical", TooltipText = "Export", Text = "Export" },

        new ToolbarItemModel { PrefixIcon = "fa-light fa-ellipsis-vertical", TooltipText = "Export", Text = "Export" }

    };

```

[Scott Peal]

Never mind, found it in the documentation. Though, I would consider this a minor bug as we shouldn't have to do this to get Font Awesome icons to work like the e-icons. 

.e-toolbar .e-tbar-btn:hover {

        color: white;

}

[Satheesh Kumar Balasubramanian]

Hi Scott,

 

Greetings from Syncfusion support.

You can customize the hover color for font awesome icons using the below customized style.

 

Index.razor:

<SfToolbar CssClass="font-icon-customize">

....................

</SfToolbar>

 

<style>

    .font-icon-customize.e-toolbar .e-tbar-btn:hover {

        background: red;

        border: 1px solid red;

        border-color: red;

        border-radius: 4px;

        color: blue;

    }

</style>

 

Kindly try the attached sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B

Attachment: CustomIcon_8962929f.zip