How to Integrate RadDrawer with FontAwesome icons

This article explains how to create the items of the Drawer and use the FontAwesome icons

RadDrawer control receives a hierarchical structure of elements as explained in Getting Started article. For example, an unordered list where each <li> element is a separate item when the data-role attribute has value drawer-item. The element inside that contains text of the item should have the k-item-text class as demonstrated below:

<Template>
    <ul> 
        <li data-role='drawer-item' class='k-state-selected'>
            <span class='k-item-text'>Camera</span>
        </li> 
    </ul>
</Template>

In order to add some icons before the text, we can add an additional <span> element with class k-icon that would serve as a font-icon placeholder:

<Template>
    <ul> 
        <li data-role='drawer-item' class='k-state-selected'>
            <span class='k-icon'></span>
            <span class='k-item-text'>Camera</span>
        </li> 
    </ul>
</Template>

As the FontAwesome 5.* toolkit has some breaking changes compared to the previous FontAwesome 4 toolkit, there is a slight difference on the additional classes that should be added to the k-icon element.

Following are some examples for both the 4 and 5 versions of the FontAwesome toolkit.

FontAwesome 5

The default class for the 5.* version is fas and to add a specific icon, the fa-iconname class should be added also.

<script src="yourscriptslocation/fontawesome.js"></script>

<script>
    function OnItemClick(sender, args) {
        var itemtext = args.get_item().text();

        alert("You have clicked:" + itemtext);
    }
</script>

<telerik:RadDrawer runat="server" ID="RadDrawer1" Mode="push" Position="left" MinHeight="330" DrawerWidth="200" Mini="true" SwipeToOpen="true">
    <ClientEvents OnItemClick="OnItemClick" />
    <MiniSettings Width="48" />
    <ContentTemplate>
        <p>
            This is the content element containg the text
        </p>
    </ContentTemplate>
    <Template>
        <ul> 
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-icon fas fa-camera'></span>
                <span class='k-item-text'>Camera</span>
            </li> 
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-icon fas fa-address-book'></span>
                <span class='k-item-text'>Address Book</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-icon fas fa-address-card'></span>
                <span class='k-item-text'>Address Card</span>
            </li> 
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-icon fas fa-calendar-alt'></span>
                <span class='k-item-text'>Calendar</span>
            </li> 
        </ul>
    </Template>
</telerik:RadDrawer>

FontAwesome 4

The default class for the 4.* version is fa and to add a specific icon, the fa-iconname class should be added also.


<link href="yourstyleslocation/fontawesome.css">

<script>
    function OnItemClick(sender, args) {
        var itemtext = args.get_item().text();

        alert("You have clicked:" + itemtext);
    }
</script>

<telerik:RadDrawer runat="server" ID="RadDrawer1" Mode="push" Position="left" MinHeight="330" DrawerWidth="200" Mini="true" SwipeToOpen="true">
    <ClientEvents OnItemClick="OnItemClick" />
    <MiniSettings Width="48" />
    <ContentTemplate>
        <p>This is the content element containg the text</p>
    </ContentTemplate>
    <Template>
        <ul> 
            <li data-role='drawer-item' class='k-state-selected'>
                <span class='k-icon fa fa-camera'></span>
                <span class='k-item-text'>Camera</span>
            </li> 
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-icon fa fa-address-book'></span>
                <span class='k-item-text'>Address Book</span>
            </li> 
            <li data-role='drawer-item'>
                <span class='k-icon fa fa-address-card'></span>
                <span class='k-item-text'>Address Card</span>
            </li> 
            <li data-role='drawer-separator'></li> 
            <li data-role='drawer-item'>
                <span class='k-icon fa fa-calendar'></span>
                <span class='k-item-text'>Calendar</span>
            </li> 
        </ul>
    </Template>
</telerik:RadDrawer>

See Also

In this article
Not finding the help you need? Improve this article