Use FontAwesome Icons as Icons in drawer mini mode

[erwin]

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

[Marin Bratanov]

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

[Michael]

Is there an example on  how to do thin using the Angular version of the KendoDrawer?

[Tsvetomir]

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