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>

    public class ToolBarController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

See Also

• Server-Side API