Toggle navigation

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 属性:


<lidata-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 摄像机
试一试