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

搜外友链  |   维家  |   风淋室 >  |   明星排行  |   建筑规范文档  |   惠州保安公司  |   环保空调  |   咒术回战




意见反馈 ||  关于我们 ||  用户协议 ||  隐私保护 ||  商务合作

Copyright © 2020-2022 中华文学苑(华文苑) 京ICP备17037819号

Email:artype@163.com      QQ:262989474

加入华文苑qq群

Android下载