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 >