Glyphish图标显示在jQuery Mobile中

首先让我说我是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图标，使用以下代码作为导航栏：

 
 
 
 
Record
 
Relax
 
Review
 
Settings
 
 
  

该项目在一个index.html页面中总共有大约8个页面，其中一些页面从标题中的导航栏链接。

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

我真的很感激对此有所了解。 我的第一个想法是，页面上需要刷新，因为单击内容div链接会将图标集设置回正确的显示。 听起来不错吗？

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

Answer 1

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

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

将附加到浏览器中的当前URL，因此当您在/ （主页）时它将是/content/glyphish-icons/media.png ，但是当您在/时，它将是/content/glyphish-icons/media.png at /mypage/ 。 使用绝对路径，如：

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