Displaying Glyphish icons in jQuery Mobile

To get started, let me just say that I am new to jQuery as well as jQuery Mobile.

I am using the following CSS in the title.

.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 am using glyph icons in a jQuery Mobile project using the following code for the navigator:

<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 contains about 8 pages on a single index.html page with some navbars related pages in the header.

When I visit the start page, the navbar looks great. However, as soon as I am on one of the pages related to the navbar, all icons change to that page's icon. Some of these pages have buttons in the content div associated with the sub pages. If I click on any of the related buttons from the content div the icons in the navbar are reset to the correct ones.

I would really like to understand this. My first thought was that refresh is needed on the page, since clicking on the content div link sets the icon set to its correct display. Does this sound right?

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