jQuery Mobile 自定义导航条图标

1、jQuery Mobile 自定义导航条图标

/*------------------------------------------------   自定义图标       --------------------------------------------------------*/
 .ui-footer .ui-icon { /* 设置图标的大小，边框 */
  width: 40px;
  height: 40px;
  box-shadow:none;
  margin-top:0px;
}
 .ui-footer .ui-btn-icon-top .ui-icon { /* 设置图标距导航栏距离 */
  top: 0px;
}

 .ui-footer .ui-btn-icon-top .ui-btn-inner .ui-icon { /* 设置图标距左边距离 */
  position: absolute;
  left: 50%;
  margin-left: -18.6px;
}

 .ui-navbar li .ui-btn-icon-top .ui-btn-inner {  /* 设置文字距上边距离 */
  padding-top: 38px;
}

 .ui-footer .ui-btn-text {/* 设置文字大小，及其宽度 */
    font-size:14px;
    font-weight: 100;
}

/*  设置自定义图标  */
.ui-icon-custom_home_normal {  
    background: url(../image/home_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
}

.ui-icon-custom_message_normal {  
    background: url(../image/message_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
}

.ui-icon-custom_traffic_normal {  
    background: url(../image/traffic_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
}

.ui-icon-custom_find_normal {  
    background: url(../image/find_normal.png) no-repeat scroll 50% 50% / 40px 40px transparent;
}

/*   设置空白图标   */
.ui-icon-none {
    
    filter:alpha(opacity=0);  
    -moz-opacity:0;  
    -khtml-opacity: 0;  
    opacity: 0;
}

 

转载于:https://www.cnblogs.com/duke-cui/p/11099140.html