jQuery Mobile 图标

我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标，并对图标进行定位，如下所示：

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</a> 55面试教程网

<button class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</button> 55面试教程网

在 <input> 按钮中添加图标，可以使用 data-icon 属性:

<a href="#anylink" data-icon="refresh">刷新页面</a> 55面试教程网

我们可以使用 data-icon 属性在导航按钮上添加图标:

<a href="#anylink" data-icon="refresh">刷新页面</a> 55面试教程网

如果要在列表按钮中添加图标，可以在 <li> 中使用 data-icon 属性：

<li data-icon="refresh"><a href="#">点我</a></li> 55面试教程网

下面我们列出了 jQuery Mobile 提供的所有可用图标：

值	描述	实例
action	动作	55面试教程网
alert	警告	55面试教程网
audio	视频 / 音频 / 扬声器	55面试教程网
arrow-d-l	左下角	55面试教程网
arrow-d-r	右下角	55面试教程网
arrow-u-l	左上角	55面试教程网
arrow-u-r	右上角	55面试教程网
arrow-l	左箭头	55面试教程网
arrow-r	右箭头	55面试教程网
arrow-u	上箭头	55面试教程网
arrow-d	下箭头	55面试教程网
back	返回	55面试教程网
bars	栏目	55面试教程网
bullets	栅栏	55面试教程网
calendar	日历	55面试教程网
camera	照相机	55面试教程网
carat-d	向下	55面试教程网
carat-l	向左	55面试教程网
carat-r	向右	55面试教程网
carat-u	向上	55面试教程网
check	验证标记	55面试教程网
clock	时钟	55面试教程网
cloud	云	55面试教程网
comment	评论	55面试教程网
delete	删除 (X)	55面试教程网
edit	编辑 / 铅笔	55面试教程网
eye	眼睛	55面试教程网
forbidden	静止标记	55面试教程网
forward	前进	55面试教程网
gear	齿轮	55面试教程网
grid	网格	55面试教程网
heart	心 / 爱标志	55面试教程网
home	家（主页）	55面试教程网
info	信息	55面试教程网
location	定位 / GPS	55面试教程网
lock	锁 / 挂锁	55面试教程网
mail	邮件 / 信封	55面试教程网
minus	符号、减号	55面试教程网
navigation	导航	55面试教程网
phone	电话	55面试教程网
power	开关 (On/off)	55面试教程网
plus	加号	55面试教程网
recycle	回收	55面试教程网
refresh	刷新	55面试教程网
search	搜索	55面试教程网
shop	商店、钱包、手提袋	55面试教程网
star	星号	55面试教程网
tag	标签	55面试教程网
user	用户	55面试教程网
video	摄像机	55面试教程网