data-icon fail in device

[ReadAthon]

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>

[Tsvetina]

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