在 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 个页面，其中一些页面从标题中的导航栏链接。

当我访问起始页时，导航栏看起来不错。但是，一旦我访问从导航栏链接的页面之一，所有图标都会更改为该页面的图标。其中一些页面在内容 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/ 时它将是 /mypage/content/glyphish-icons/media.png。使用绝对路径，例如：

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