Custom data Icons not appearing in header...just get plus symbols
I'm working on
this JQuery Mobile site using 1.3.1 and JQuery 1.9.1 and my issue is I have a couple of custom icons in the header. One for the logo and one for a Share symbol. Neither are showing up. Instead, I get the generic + symbol. I've done this before so I'm puzzled why I'm not seeing the custom data icon. Here's the code I'm using:
- <header data-role="header" data-position="fixed" data-id="appHeader"> <a href="#" data-role="button" data-iconpos="notext" data-icon="logo">Back</a>
<h1>Designer Pearls</h1>
<a href="#" data-role="button" data-iconpos="notext" data-icon="share">Share</a> </header>
- /* custom icons */
.ui-icon-logo {
background-image: url("images/logo-18-white.png");
}
.ui-icon-share {
background-image: url("images/share-18-white.png");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-logo {
/*this image should be sized at 36 x 36 */
background-image: url("images/logo-36-white.png");
background-size: 18px 18px;
}
.ui-icon-share {
/*this image should be sized at 36 x 36 */
background-image: url("images/share-36-white.png");
background-size: 18px 18px;
}
}