1. 引言jQuery Mobile 是一套基于 HTML5 的移动端 UI 框架内置了丰富的图标库可以方便地为按钮、列表、导航栏等组件添加图标。本文将从内置图标的使用、自定义图标的方法以及常见实战场景三个方面结合大量可运行的代码示例帮助你快速掌握 jQuery Mobile 图标的使用技巧。2. 内置图标基础用法jQuery Mobile 内置了 50 多个常用图标通过data-icon属性即可为按钮、列表项、导航栏等元素添加图标。图标默认显示在文本左侧可以通过data-iconpos属性调整位置。2.1 为按钮添加图标下面是一个最简单的按钮图标示例使用data-iconhome为按钮添加首页图标!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 link relstylesheet hrefhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script /head body div>div>ul>div>/* 自定义 home 图标 */ .ui-icon-home { background-image: url(images/my-home-icon.png); background-size: 18px 18px; background-position: center center; background-repeat: no-repeat; }6.2 新增自定义图标除了替换内置图标还可以通过 CSS 新增完全自定义的图标。下面演示如何新增一个名为myicon的图标/* 新增自定义图标 */ .ui-icon-myicon { background-image: url(images/my-custom-icon.png); background-size: 18px 18px; background-position: center center; background-repeat: no-repeat; }然后在 HTML 中通过data-iconmyicon使用该图标a href#>link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css/* 使用 Font Awesome 替换内置图标 */ .ui-icon-home { background: none; font-family: FontAwesome; text-align: center; line-height: 18px; } .ui-icon-home:before { content: \f015; /* fa-home 的 Unicode 编码 */ }7. 实战构建一个带图标的移动端设置页面下面综合运用以上知识构建一个完整的移动端设置页面包含分组列表、图标按钮和底部导航!DOCTYPE html html head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1 link relstylesheet hrefhttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css script srchttps://code.jquery.com/jquery-1.11.3.min.js/script script srchttps://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js/script /head body div data-rolepage idsettings div data-roleheader h1设置/h1 /div div data-rolecontent !-- 账户设置分组 -- ul data-rolelistview data-insettrue data-divider-themea li data-rolelist-divider账户/li li a href# img srcimages/icon-user.png classui-li-icon h2个人资料/h2 p修改头像、昵称和签名/p /a /li li a href# img srcimages/icon-lock.png classui-li-icon h2账号安全/h2 p修改密码、绑定手机/p /a /li /ul !-- 通用设置分组 -- ul data-rolelistview data-insettrue data-divider-themea li data-rolelist-divider通用/li li a href# img srcimages/icon-notice.png classui-li-icon h2消息通知/h2 p管理推送通知和提醒/p /a /li li a href# img srcimages/icon-clean.png classui-li-icon h2清理缓存/h2 p当前占用 128MB/p /a /li li a href# img srcimages/icon-about.png classui-li-icon h2关于我们/h2 p版本 1.0.0/p /a /li /ul !-- 退出登录按钮 -- a href# data-rolebutton data-icondelete data-themeb退出登录/a /div div data-rolefooter data-positionfixed div data-rolenavbar ul lia href# data-iconhome首页/a/li lia href# data-icongrid分类/a/li lia href# data-iconuser classui-btn-active我的/a/li /ul /div /div /div /body /html8. 常见问题与注意事项图标不显示请检查是否正确引入了 jQuery Mobile 的 CSS 文件图标依赖 CSS 中的背景图片定义。自定义图标不生效确认 CSS 选择器是否正确且自定义样式在 jQuery Mobile 样式之后加载以保证优先级。图标模糊建议使用 36px 或更高分辨率的图片作为图标源文件CSS 中通过background-size缩放至 18px 显示。兼容性jQuery Mobile 1.4.5 是最后一个稳定版本官方已停止维护生产环境建议评估迁移到其他现代框架。9. 总结jQuery Mobile 提供了开箱即用的图标系统通过data-icon和data-iconpos属性即可快速为按钮、列表、导航栏等组件添加图标。当内置图标不够用时可以通过 CSS 背景图片或图标字体进行扩展。希望本文的示例能帮助你快速上手 jQuery Mobile 图标的使用在实际项目中灵活运用。