font awesome integration

2 Answers 1102 Views
Styling
n/a
Top achievements
Rank 1
Iron
Iron
Iron
n/a asked on 09 Mar 2022, 12:48 PM

Hello

Could Font Awesome be used with Telerik Blazor? And if so, how do I integrate and use it into the project?

Thank you.

Kind regards

2 Answers, 1 is accepted

Sort by
1
Dimo
Telerik team
answered on 11 Oct 2023, 03:34 PM

As of UI for Blazor 4.x, use FontAwesome with the Icon parameter of our components like this:

<TelerikButton Icon="@(" fa-solid fa-code ")" />

The main question is "how to set custom CSS classes" for icons and our documentation shows this:

evadyyc
Top achievements
Rank 2
commented on 11 Oct 2023, 04:14 PM

Yes thank you...

To be more clear it would be nice if you had a template/file (or even just a checkbox in themebuilder) to use that would replace all the button icons with fontawesome version also giving us strongly typed use of all their icons instead of just using strings.

Recalling the challenge with FontAwesomes' last upgrade where fas -> fa-solid and bar-chart -> chart-bar.  If we had  ButtonIcons.BarChart it would be an easy change

Doug
Top achievements
Rank 1
Iron
Iron
Veteran
commented on 17 Oct 2023, 09:06 PM

In the links above (Button, Menu, TreeView) the FontIcons don't work. I changed my code to use Svg which works but I found this after reading the upgrade notes for 4.0, and the FontIcons change didn't work in my code.
Dimo
Telerik team
commented on 18 Oct 2023, 06:28 AM

@Doug - since version 4.6.0 you need one more CSS file to use font icons. We haven't added it to the REPL tool by default yet. Sorry about the confusion.
0
Marin Bratanov
Telerik team
answered on 12 Mar 2022, 06:03 PM

Hello,

You can use the IconClass to set the desired custom classes from a third party solution, provided they set icon glyphs in the ::before element. You can find examples and more information here: https://docs.telerik.com/blazor-ui/common-features/font-icons. The same pattern that you see described there for the standalone icon component applies to all places we have icons.

Also, you can add custom classes like that to add more CSS overrides as necessary to put in third party icons.

Lastly, various templates likely let you replace some of the built-in rendering with custom code so that you can employ any approach you need/want.

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

evadyyc
Top achievements
Rank 2
commented on 10 Oct 2023, 04:03 PM

As FontAwesome is such a popular icon class... a specific code sample on this would be very helpful!
Tags
Styling
Asked by
n/a
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Dimo
Telerik team
Marin Bratanov
Telerik team
Share this question
or