Custom Icons

1 posts, 0 answers
  1. Steven
    Steven avatar
    29 posts
    Member since:
    Jul 2012

    Posted 04 Aug 2013 Link to this post

    I've seen some of the documentation regarding how to create custom icons for Kendo UI Mobile, but can someone please give me an example of how it is applied to the MobileTapStrip in ASP.NET MVC?

    Here's what I've tried so far:

    <style>
        .km-root .km-pane .km-view .km-home1
        {
            background-image: url("/Images/Icons/home1.png");
        }
    </style>

    @(Html.Kendo().MobileLayout()
        .Name("mobile-main")
        .Footer(
            @<text>
                @(Html.Kendo().MobileTabStrip()
                    .Items(items => {
                        items.Add().Icon("home1").Text("Home").Url("#view-home");
                        items.Add().Icon("cart").Text("Purchases").Url("#view-purchases");
                        items.Add().Icon("bookmarks").Text("Reports").Url("#view-reports");
                    })

                )
            </text>
        )
    )

    OK, I've figured it out:

    @(Html.Kendo().MobileLayout()
        .Name("mobile-main")
        .Footer(
            @<text>
                @(Html.Kendo().MobileTabStrip()
                    .Items(items => {
                        items.Add().Icon("home1").Text("Home").Url("#view-home");
                        items.Add().Icon("purchases").Text("Purchases").Url("#view-purchases");
                        items.Add().Icon("reports").Text("Reports").Url("#view-reports");
                    })

                )
            </text>
        )
    )

    CSS:

    .km-root .km-pane .km-view .km-icon {
        background-size: 100% 100%;
        -webkit-background-clip: border-box;
        background-color: currentcolor;
    }

    .km-home1 {
        -webkit-mask-box-image: url("/Images/Icons/home1.png");
        background-color: red;
    }

    .km-purchases {
        -webkit-mask-box-image: url("/Images/Icons/money.png");
        background-color: red;
    }

    .km-reports {
        -webkit-mask-box-image: url("/Images/Icons/documents.png");
        background-color: red;
    }
Back to Top