我们可以使用图标类在 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锁 / 挂锁
尝试一下
mail邮件 / 信封
尝试一下
minus符号、减号
尝试一下
navigation导航
尝试一下
phone电话
尝试一下
power开关 (On/off)
尝试一下
plus加号
尝试一下
recycle回收
尝试一下
refresh刷新
尝试一下
search搜索
尝试一下
shop商店、钱包、手提袋
尝试一下
star星号
尝试一下
tag标签
尝试一下
user用户
尝试一下
video摄像机
尝试一下