Use FontAwesome Icons in the ToolBar
Environment
| Product | Progress® Kendo UI® ToolBar for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I use Fontawesome icons in the Kendo UI for jQuery ToolBar?
Solution
The example below demonstrates how to use FontAwesome icons as Kendo UI ToolBar sprite icons.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.fa.k-sprite,
.fa.k-sprite::before {
font-size: 12px;
line-height: 12px;
}
</style>
<div id="toolbar"></div>
<script>
$("#toolbar").kendoToolBar({
items: [
{ type: "button", spriteCssClass: "fa fa-paper-plane", text: "Paper plane" },
{ type: "button", spriteCssClass: "fa fa-plane", text: "Plane" },
{ type: "button", spriteCssClass: "fa fa-space-shuttle", text: "Space shuttle" }
]
})
</script>