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>