jQuery Mobile 图标
jQuery Mobile图标
我们可以使用图标类在 jQuery Mobile 中 <a> 和 <button> 元素上添加图标，并对图标进行定位，如下所示：
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</a>
<button class="ui-btn ui-icon-refresh ui-btn-icon-left">刷新页面</button>
在 <input> 按钮中添加图标，可以使用 data-icon 属性:
<a href="#anylink" data-icon="refresh">刷新页面</a>
我们可以使用 data-icon 属性在导航按钮上添加图标:
<a href="#anylink" data-icon="refresh">刷新页面</a>
如果要在列表按钮中添加图标，可以在 <li> 中使用 data-icon 属性：
<li data-icon="refresh"><a href="#">点我</a></li>
下面我们列出了 jQuery Mobile 提供的所有可用图标：
| 值 | 描述 | 图标 |
|---|---|---|
| action | 动作 |
|
| alert | 警告 |
|
| audio | 视频 / 音频 / 扬声器 |
|
| arrow-d-l | 左下角 |
|
| arrow-d-r | 右下角 |
|
| arrow-u-l | 左上角 |
|
| arrow-u-r | 右上角 |
|
| arrow-l | 左箭头 |
|
| arrow-r | 右箭头 |
|
| arrow-u | 上箭头 |
|
| arrow-d | 下箭头 |
|
| back | 返回 |
|
| bars | 栏目 |
|
| bullets | 栅栏 |
|
| calendar | 日历 |
|
| camera | 照相机 |
|
| carat-d | 向下 |
|
| carat-l | 向左 |
|
| carat-r | 向右 |
|
| carat-u | 向上 |
|
| check | 验证标记 |
|
| clock | 时钟 |
|
| cloud | 云 |
|
| comment | 评论 |
|
| delete | 删除 (X) |
|
| edit | 编辑 / 铅笔 |
|
| eye | 眼睛 |
|
| forbidden | 静止标记 |
|
| forward | 前进 |
|
| gear | 齿轮 |
|
| grid | 网格 |
|
| heart | 心 / 爱 标志 |
|
| home | 家（主页） |
|
| info | 信息 |
|
| location | 定位 / GPS |
|
| lock | 锁 / 挂锁 |
|
| 邮件 / 信封 |
|
|
| minus | 符号、减号 |
|
| navigation | 导航 |
|
| phone | 电话 |
|
| power | 开关 (On/off) |
|
| plus | 加号 |
|
| recycle | 回收 |
|
| refresh | 刷新 |
|
| search | 搜索 |
|
| shop | 商店、钱包、手提袋 |
|
| star | 星号 |
|
| tag | 标签 |
|
| user | 用户 |
|
| video | 摄像机 |
|