This is a migrated thread and some comments may be shown as answers.

Use FontAwesome Icons as Icons in drawer mini mode

3 Answers 90 Views
Drawer
This is a migrated thread and some comments may be shown as answers.
erwin
Top achievements
Rank 1
Veteran
erwin asked on 06 Jun 2019, 02:23 PM

I tried to use fa icons in the drawer but it did not seem to resize / pad (in mini mode) properly. So some of the text was visible.

What am I missing?

Regards

Erwin

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 10 Jun 2019, 11:48 AM
Hello Erwin,

The drawer has a certain size and the icons must fit that. This is defined through the Template of the drawer. I would encourage you to inspect the rendering in our demo and to mimic the CSS rules that create the desired layout. The easiest way to do that is to use the "k-icon" CSS class that defines 1em width for the span that holds the icon.

I am attaching here the layout, view and controller I used to test this, together with a screenshot of the expected result so you can use them as a reference. I used the latest FA assets from their site, but I expect that this should work with other versions as well, since their font icons should scale to their container anyway.


Regards,
Marin Bratanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Michael
Top achievements
Rank 1
answered on 01 Mar 2021, 11:47 PM
Is there an example on  how to do thin using the Angular version of the KendoDrawer?
0
Tsvetomir
Telerik team
answered on 03 Mar 2021, 10:58 AM

Hi Michael,

The example that has been provided by my colleague Marin is tailored according to the first user's queries. Hence, the example is not readily available for Angular. With that said, the approach should be merely the same for Angular, is there an obstacle that you have encountered along the way?

Also, could you specify whether you are using the AngularJS implementation of the Kendo UI for jQuery widgets, or you are using the standalone Kendo UI for Angular components?

 

Best regards,
Tsvetomir
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/.

Tags
Drawer
Asked by
erwin
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Michael
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or