Glyphish Icons display in jQuery Mobile

Question

To start let me just say that I am new to jQuery as well as jQuery Mobile.

I'm using the following CSS in the header.

.nav-glyphish-example .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav-glyphish-example .ui-btn .ui-icon {
width: 30px!important;
height: 30px!important;
margin-left: -15px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#feeling .ui-icon {
background:  url(content/glyphish-icons/home.png) 50% 50% no-repeat;
background-size: 22px 22px;
}
#review .ui-icon {
background:  url(content/glyphish-icons/review.png) 50% 50% no-repeat;
background-size: 22px 22px;
}
#media .ui-icon {
background:  url(content/glyphish-icons/media.png) 50% 50% no-repeat;
background-size: 18px 23px;
}
#settings .ui-icon {
background:  url(content/glyphish-icons/settings.png) 50% 50% no-repeat;
background-size: 20px 22px;
}

I'm using the glyphish icons in a jQuery Mobile project using the following code for a navbar:

<div data-role="header">
    <div data-role="navbar" class="nav-glyphish-example" data-theme="e" data-grid="c">
    <ul>
    <li><a href="#feeling" id="feeling" data-icon="custom" data-iconpos="top"  data-theme="b"><small>Record</small></a></li>
    <li><a href="#media" id="media" data-icon="custom" data-iconpos="top" data-theme="b"><small>Relax</small></a></li>
    <li><a href="#review" id="review" data-icon="custom" data-iconpos="top" data-theme="b"><small>Review</small></a></li>
    <li><a href="#settings" id="settings" data-icon="custom" data-iconpos="top" data-theme="b"><small>Settings</small></a></li>
  </ul>
    </div>
 </div>

The project has about 8 total pages in one index.html page with some pages linked from navbars in the header.

When I visit the start page the navbar looks fine. However, once I visit one of the pages linked from the navbar all the icons change to the icon for that page. Some of these pages have buttons in the content div linked to additonal pages. If I click any of the linked buttons from the content div the icons in the navbar reset to the correct ones.

I'd really appreciate some insight into this. My first thought was that that a refresh is needed on the page since a click on a content div link sets the icon set back to its proper display. Does that sound right?

Another strange behavior is that when I take the CSS and put it in a file that I call none of the icons display.

Answer 1

Your problem is probably related to using relative paths on the CSS. For instance, the rule:

background:  url(content/glyphish-icons/media.png) 50% 50% no-repeat;

Will append to the current URL in the browser, so it will be /content/glyphish-icons/media.png when you are at / (home page), but /mypage/content/glyphish-icons/media.png when you are at /mypage/. Use absolute paths, like:

background:  url("/content/glyphish-icons/media.png") 50% 50% no-repeat;