Custom data Icons not appearing in header...just get plus symbols

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:

  1. <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>

  2. /* 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;
        }
    }