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



    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>

        <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.
            .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");
        <!--<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>

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


    <!-- 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 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%">
                <a class="user-share-txt">#: Text #</a>
                <span class="time-span">#: CreatedAtFormatted() #</span>

  2. Answer
    Tsvetina avatar
    1862 posts

    Posted 02 Dec 2015 Link to this post


    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.


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

Back to Top