jquery mobile 的navbar自定义图标

css：

 

<style type="text/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; }

  #chat .ui-icon { background:  url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }

  #email .ui-icon { background:  url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px;  }

  #login .ui-icon { background:  url(glyphish-icons/30-key.png) 50% 50% no-repeat;  background-size: 12px 26px; }

  #beer .ui-icon { background:  url(glyphish-icons/88-beermug.png) 50% 50% no-repeat;  background-size: 22px 27px; }

  #coffee .ui-icon { background:  url(glyphish-icons/100-coffee.png) 50% 50% no-repeat;  background-size: 20px 24px; }

  #skull .ui-icon { background:  url(glyphish-icons/21-skull.png) 50% 50% no-repeat;  background-size: 22px 24px; }

</style>

 

page：

 

<div data-role="footer" class="nav-glyphish-example">

  <div data-role="navbar" class="nav-glyphish-example" data-grid="d">

    <ul>

      <li><a href="#" id="chat" data-icon="custom">Chat</a></li>

      <li><a href="#" id="email" data-icon="custom">Email</a></li>

      <li><a href="#" id="skull" data-icon="custom">Danger</a></li>

      <li><a href="#" id="beer" data-icon="custom">Beer</a></li>

      <li><a href="#" id="coffee" data-icon="custom">Coffee</a></li>

   </ul>

  </div>

</div>