-
刚刚接触jQuery Mobile框架中，有一个非常现实的问题是，如何自定义按钮图标，我认为这是太小的jQuery移动自己的图标，我觉得图标很小（车载系统应该是18×18）这是我的方法，希望大家踊跃拍砖。
1，第一种方法比较简单，但有一个前提。前提是自定义图标的大小应该与内置系统一致，这样排版就不会有问题了。
首先定义CSS文件
UI图标电子邮件{
背景：url（'。 /图像/电子邮件。png）没有重复0px 0px；
}
数据图标电子邮件
没关系
2，第二种方法，这种方法适用于自定义图标的大小和系统的不一致性。
三.代码如下：
{ CSS代码}
图标大小***
用户界面按钮。UI图标{
宽度：36px；
身高：36px；
}
*设置字体大小，图标变大，所以文本适当大。
用户界面UI按钮，按钮，文本{
行高：36px；
字体大小：20px；
}
没有文本按钮***
用户界面UI按钮，按钮，图标notext {
宽度：42px；
身高：42px；
WebKit的边界半径：2em；
边界半径：2em；
}
*左侧的图标*
user-ui-btn.ui-btn-icon-left.ui-btn-inner {。
左：50px填充；
}
用户界面UI按钮，按钮，图标UI图标{左。
左：10px；
边距：- 18px；
}
右边的图标***
user-ui-btn.ui-btn-icon-right.ui-btn-inner {。
填充右：50px；
}
用户界面UI按钮，按钮，图标的权利。UI图标{
右：10px；
边距：- 18px；
}
顶部的图标***
user-ui-btn.ui-btn-icon-top.ui-btn-inner {。
50px垫上；
}
用户界面UI按钮，按钮，图标上方。UI图标{
上图：10px；
margin-left: - 18px；
}
底部的图标***
user-ui-btn.ui-btn-icon-bottom.ui-btn-inner {。
座垫：50px；
}
用户界面UI按钮，按钮，图标底部。UI图标{
底部：10px；
margin-left: - 18px；
}
定义你自己的图标***
用户界面按钮。ui-icon-demo1 {
背景：url（'。 / / gentleface_full PNG图像。）没有重复108px 0px；
}
用户界面按钮。ui-icon-demo2 {
背景：url（'。 / / gentleface_full PNG图像。）没有重复180px - 180px；
}
用户界面按钮。ui-icon-demo3 {
背景：url（'。 / / gentleface_full PNG图像。）没有重复252px - 360px；
}
用户界面按钮。ui-icon-demo4 {
背景：url（'。 / / gentleface_full PNG图像。）没有重复36px - 180px；
}
用户界面按钮。ui-icon-demo5 {
背景：url（'。 / / gentleface_full PNG图像。）没有重复504px - 612px；
}
移动定制按钮
原始风格的例子
演示
演示
演示
演示
演示
自定义风格的例子
1）普通按钮
演示
演示
演示
演示
演示
2）按钮组
js
CSS
HTML
PS
js
CSS
HTML
PS
3）原始图标
著作权法
这是本文的内容，讲解了关于jQuery移动定制按钮图标的实现方法，希望大家喜欢它。