Custom TabStrip Icons Don't Show On iPhone

[Tom]

I am new to AppBuilder - and can't get custom icons to show on tabstrip on the iPhons - they show in Android.

Here is my code:

index.html

        <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>

main.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