New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Icons

The SplitButton provides options for visually enhancing its textual content by adding icons. You can specify them through the following configuration methods:

  • Icon()—This method displays the appropriate Kendo UI for jQuery font icon.

        @(Html.Kendo().SplitButton()
            .Name("splitButton")
            .Text("Plus")
            .Icon("plus")
        )
    
  • SpriteCssClass()—This method displays the icon as a background of a span element instead.

        @(Html.Kendo().SplitButton()
            .Name("splitButton")
            .Text("Plus")
            .SpriteCssClass("myPlusIcon")
        )
    
  • ImageUrl()—This method applies image icons.

        @(Html.Kendo().SplitButton()
                .Name("splitButton")
                .Text("Plus")
                .ImageUrl("url/to/myPlusIcon.png")
        )
    
    

Font Icons

You can integrate FontAwesome or other font icons by setting the required third-party CSS classes over the .SpriteCssClass() configuration method. However, this approach will render a k-sprite CSS class, which applies font and size styles that may interfere with the font icon styles.

    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
    <style>
        .k-button .fa {
            font-size: inherit;
            line-height: inherit;
            width: auto;
            height: auto;
            margin-left: 0;
        }
    </style>

    @(Html.Kendo().SplitButton()
        .Name("splitButton")
        .Text("Archive")
        .SpriteCssClass("fa fa-archive")
        .Items(items =>
        {
            items.Add().Text("Item 1");
            items.Add().Text("Item 2");
        })
    )

See Also

In this article