Custom TabStrip Icons Don't Show On iPhone

2 posts, 0 answers
  1. Tom
    Tom avatar
    5 posts
    Member since:
    Feb 2015

    Posted 25 Feb 2015 Link to this post

    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;       
    }
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 02 Mar 2015 Link to this post

    Hi Tom,

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

    Regards,
    Petyo
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top