JqueryMobile Custom button icon _ jquery

Many of my friends have responded that the built-in icons of jquerymobile are really few. In addition, I also think the icons are too small (the built-in icons are 18*18 ), so I thought about how to customize Button icons. The following small series will share my methods on the script home platform for everyone to learn from. Many of my friends have reflected that jquery mobile comes with fewer icons, in addition, I also think that the icon is too small (the system comes with 18*18), so I wondered how to customize the button icon. The following small series will share my method with you.

When I first came into contact with the Jquery Mobile framework, I encountered a very real problem, that is, how to customize Button icons. I think there are too few icons in jquery mobile, in addition, I think the icons are also too small (the system should contain 18*18). below is my method. I hope you can make a lot of bricks.

1. The first method is relatively simple, but there is a premise that the size of your custom icon should be consistent with that built in the system, so that no problem occurs in the layout. The specific method is as follows:

First define the css file

.ui-icon-email{  background:url('./images/email.png') no-repeat 0px 0px;}data-icon="email"

You can.

2. Method 2: This method is applicable when the size of the custom icon is inconsistent with that of the system,

3. The Code is as follows:

[Css Code]

/** Icon size **/. user-ui-btn. ui-icon {width: 36px; height: 36px;}/** set the font size. As the icon increases, the text size is adjusted as appropriate **/. user-ui-btn. ui-btn-text {line-height: 36px; font-size: 20px;}/** no text button **/. user-ui-btn. ui-btn-icon-notext {width: 42px; height: 42px; webkit-border-radius: 2em; border-radius: 2em;}/** icon left **/. user-ui-btn. ui-btn-icon-left. ui-btn-inner {padding-left: 50px ;}. user-ui-btn. ui-btn-icon-left. ui-icon {left: 10px; margin-top:-18px;}/** the icon is on the right **/. user-ui-btn. ui-btn-icon-right. ui-btn-inner {padding-right: 50px ;}. user-ui-btn. ui-btn-icon-right. ui-icon {right: 10px; margin-top:-18px;}/** icon on top **/. user-ui-btn. ui-btn-icon-top. ui-btn-inner {padding-top: 50px ;}. user-ui-btn. ui-btn-icon-top. ui-icon {top: 10px; margin-left:-18px;}/** icon below **/. user-ui-btn. ui-btn-icon-bottom. ui-btn-inner {padding-bottom: 50px ;}. user-ui-btn. ui-btn-icon-bottom. ui-icon {bottom: 10px; margin-left:-18px;}/** define your own icon **/. user-ui-btn. ui-icon-demo1 {background: url ('. /images/gentleface_full.png ') no-repeat-pixel PX 0px ;}. user-ui-btn. ui-icon-demo2 {background: url ('. /images/gentleface_full.png ') no-repeat-180px-180px ;}. user-ui-btn. ui-icon-demo3 {background: url ('. /images/gentleface_full.png ') no-repeat-252px-360px ;}. user-ui-btn. ui-icon-demo4 {background: url ('. /images/gentleface_full.png ') no-repeat-36px-180px ;}. user-ui-btn. ui-icon-demo5 {background: url ('. /images/gentleface_full.png ') no-repeat-504px-612px ;}