在jQuery Mobile中显示的Glyphish图标

Question

首先让我说我是jQuery和jQuery Mobile的新手。

我在标题中使用了以下CSS。

.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; 
} 

我使用一个jQuery Mobile的项目glyphish图标使用下面的代码的导航栏：

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

该项目是在一个index.html页面约8总页数一些网页从标题中的navbars链接。

当我访问开始页面时，导航栏看起来很好。但是，一旦我访问其中一个从导航栏链接的页面，所有图标都会变为该页面的图标。其中一些页面的内容div中包含与其他页面链接的按钮。如果我点击内容div中的任何链接按钮，导航栏中的图标将重置为正确的图标。

我真的很感谢这方面的一些见解。我首先想到的是，页面需要刷新，因为点击内容div链接会将图标设置回适当的显示。这听起来是对的吗？

另一个奇怪的行为是，当我把CSS放在一个文件中，我没有任何图标显示。

Answer 1

你的问题可能与在CSS上使用相对路径有关。例如，规则：

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

将追加到浏览器当前的URL，所以这将是/content/glyphish-icons/media.png当你在/（主页），但/mypage/content/glyphish-icons/media.png当你在/mypage/。使用绝对路径，如：

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