[Solved] Custom TabStrip Icons Don't Show On iPhone

[Tom]

New to AppBuilder - can't get custom icons to show on an iPhone but work on Android - here is code

index

    <div data-role="footer">
        <div data-role="tabstrip">
            <a href="views/home.html" data-icon="customHome">Home</a>
            <a href="views/sessionsManager.html" data-icon="customSession">Sessions</a>
            <a href="views/profile.html" data-icon="customProfile">Profile</a>
            <a href="views/settings.html" data-icon="customSettings">Settings</a>
        </div>
    </div>
</div>

css

.km-root .km-pane .km-view .km-customHome
{
    background-image: url("../img/icons/home.png");
    background-repeat: no-repeat;
    background-position: center center;

}
.km-root .km-pane .km-view .km-customSession
{
    background-image: url("../img/icons/sessions.png");
    background-repeat: no-repeat;
    background-position: center center;
}
.km-root .km-pane .km-view .km-customProfile
{
    background-image: url("../img/icons/profile.png");
    background-repeat: no-repeat;
    background-position: center center;
}
.km-root .km-pane .km-view .km-customSettings
{
    background-image: url("../img/icons/settings.png");
    background-repeat: no-repeat;
    background-position: center center;
}

[Petyo]

Hi Tom,

you will need one additional CSS property to be set - -webkit-background-clip. Please check this dojo.

Regards,
Petyo
Telerik