Glyphish图标显示在jQuery Mobile中 [英] Glyphish Icons display in jQuery Mobile

问题描述

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

To start let me just say that I am new to jQuery as well as jQuery Mobile.

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

I'm using the following CSS in the header.

.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图标对于导航栏：

I'm using the glyphish icons in a jQuery Mobile project using the following code for a navbar:

<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页，其中一些页面链接自导航栏头。

The project has about 8 total pages in one index.html page with some pages linked from navbars in the header.

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

When I visit the start page the navbar looks fine. However, once I visit one of the pages linked from the navbar all the icons change to the icon for that page. Some of these pages have buttons in the content div linked to additonal pages. If I click any of the linked buttons from the content div the icons in the navbar reset to the correct ones.

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

I'd really appreciate some insight into this. My first thought was that that a refresh is needed on the page since a click on a content div link sets the icon set back to its proper display. Does that sound right?

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

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

推荐答案

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

Your problem is probably related to using relative paths on the CSS. For instance, the rule:

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

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

Will append to the current URL in the browser, so it will be /content/glyphish-icons/media.png when you are at / (home page), but /mypage/content/glyphish-icons/media.png when you are at /mypage/. Use absolute paths, like:

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

这篇关于Glyphish图标显示在jQuery Mobile中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！