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