data-icon fail in device

2 posts, 1 answers
  1. ReadAthon
    ReadAthon avatar
    3 posts
    Member since:
    Sep 2015

    Posted 28 Nov 2015 Link to this post

    Hello, 

     

    I am trying to replace the data-icons in tabstrip, but it works in the simulator, however, it doesn't work in the device? 

    Can i know where is the problem? Thank you in advance.

     

    <div data-role="view" id="view-all-activities" data-layout="default" class="activities-view" data-model="app.Activities">
        <!--<div data-role="header">-->
            <div data-role="navbar">
                <a class="nav-button" data-align="left" data-role="backbutton" data-click="app.Activities.logout">Logout</a>
                <a class="nav-button" data-align="right" data-role="button" href="views/addActivityView.html">Add</a>
            </div>
         
        <!--</div>-->

        <ul id="activities-listview" data-style="inset" data-role="listview" data-template="activityTemplate"
            data-bind="source: activities"></ul>
        <p id="no-activities-span" hidden="hidden" class="no-items-msg">
            <b>You have no posts yet.</b><br><br>Tap on the plus sign and share what's on your mind.
        </p>
        <style>
            .km-home-icon {

                content: url("../images/icons/white/white_home2.png");
              
            }

            .km-challenge-icon {
                content: url("../images/icons/white/white_challenge2.png");
            }

            .km-me-icon {
                content: url("../images/icons/white/white_me2.png");
            }

            .km-noti-icon {
                content: url("../images/icons/white/white_notification2.png");
            }
            .km-explore-icon {
                content: url("../images/blue.png");
            }
        </style>
        <!--<div data-role="footer" >
            <div class="toolbar">
                <div class="toolbar-inner">
                    <ul class="toolbar_icons">
                        <li><a href="#" data-panel="left" class="open-panel"><img src="images/icons/blue/home2.png" alt="" title="" /></a></li>
                        <li><a href="views/Explore.html"><img src="images/icons/blue/cup1.png" alt="" title="" /></a></li>
                        <li class="menuicon"><a href="views/Challenge.html"><img src="../images/blue-boy.png" alt="" title="" /></a></li>
                        <li><a href="views/Notification.html"><img src="images/icons/blue/notification.png" alt="" title="" /></a></li>
                        <li><a href="views/Me.html"><img src="images/icons/blue/profile.png" alt="" title="" /></a></li>
                    </ul>
                </div>
            </div>
        </div>-->


     
        <div data-role="footer" >
                <div data-role="tabstrip">
                    <a href="views/activitiesView.html" data-icon="home-icon">Home</a>
                    <a href="views/Challenge.html" data-icon="challenge-icon">Challenge</a>
                    <!--<a href="views/Explore.html" data-icon="explore-icon"></a>-->
                    <a href="views/Notification.html" data-icon="noti-icon">Notification</a>
                    <a href="views/Me.html" data-icon="me-icon">Me</a>

            </div>
    </div>

    <!-- Activities ListView Template -->
    <script type="text/x-kendo-template" id="activityTemplate">
        <div data-role="touch" data-bind="events: { tap: activitySelected }" class="cf">
            <div class="user-avatar">
                <img data-bind="attr:{src: User().PictureUrl}" alt="#: User().DisplayName #">
            </div>
            <div class="activity-content">
                <h2 class="person-name">#: User().DisplayName #</h2>
                <div data-bind="visible: Picture">
                    <img id="picture" class="picture" data-bind="attr:{src: PictureUrl()}" width="100%">
                </div>
                <a class="user-share-txt">#: Text #</a>
                <span class="time-span">#: CreatedAtFormatted() #</span>
            </div>
        </div>
     
    </script>

  2. Answer
    Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 02 Dec 2015 Link to this post

    Hello,

    I tried changing the icon the same way you did and it worked as expected for me. I tested the scenario on an Android device and the icon was visible. 

    The CSS I used is available at the bottom of styles/main.css.

    Take a look at the sample and let me know what is different on your side. My guess would be some problem with the file path. Make sure that the casing of the file name is followed correctly in the file path in the CSS.

    Regards,
    Tsvetina
    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