Use FontAwesome Icons
The ToolBar enables you to use FontAwesome icons as its sprite icons.
To use FontAwesome icons as ToolBar sprite icons, add
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
to the_Layout.cshtml
file.
Open the example below in REPL
@(Html.Kendo().ToolBar()
.Name("toolbar")
.Items(items =>
{
items.Add().Type(CommandType.Button).Text("Paper plane").SpriteCssClass("fas fa-paper-plane");
items.Add().Type(CommandType.Button).Text("Plane").SpriteCssClass("fal fa-plane");
items.Add().Type(CommandType.Button).Text("Space shuttle").SpriteCssClass("fas fa-space-shuttle");
}
)
)
<style>
.fas.k-sprite,
.fas.k-sprite::before,
.fal.k-sprite,
.fal.k-sprite::before {
font-size: 14px;
line-height: 16px;
}
</style>
<kendo-toolbar name="toolBar">
<toolbar-items>
<item type="CommandType.Button" text="Paper plane" sprite-css-class="fas fa-paper-plane" />
<item type="CommandType.Button" text="Plane" sprite-css-class="fal fa-plane" />
<item type="CommandType.Button" text="Space shuttle" sprite-css-class="fas fa-space-shuttle" />
</toolbar-items>
</kendo-toolbar>
<style>
.fas.k-sprite,
.fas.k-sprite::before,
.fal.k-sprite,
.fal.k-sprite::before {
font-size: 14px;
line-height: 16px;
}
</style>
public class ToolBarController : Controller
{
public ActionResult Index()
{
return View();
}
}