jQuery Mobile 1.4.5（2025 年仍在大量企业内网/工业平板使用的最后一个稳定版）自带 18 个经典图标 + 黑白双色自动适配，完全不用引入 Font Awesome 或任何字体包，体积小、加载快、永不失真。
一、官方 18 个内置图标（记不住就收藏这张表）
| 图标名称 | data-icon 值 | 实际样子（白色版） | 常见用途 |
|---|---|---|---|
| 首页 | home | Home | 底部导航「首页」 |
| 删除 | delete | Delete | 列表右滑删除、垃圾桶 |
| 加号 | plus | Plus | 新增、展开 |
| 减号 | minus | Minus | 收起、删除 |
| 箭头左 | arrow-l | Arrow Left | 返回、后退 |
| 箭头右 | arrow-r | Arrow Right | 前进、下一页 |
| 箭头上 | arrow-u | Arrow Up | 回到顶部、上传 |
| 箭头下 | arrow-d | Arrow Down | 下拉刷新、更多 |
| 后退 | back | Back | 返回按钮（比 arrow-l 更明显） |
| 前进 | forward | Forward | 前进 |
| 网格 | grid | Grid | 九宫格、分类 |
| 星标 | star | Star | 收藏、评分 |
| 齿轮 | gear | Gear | 设置 |
| 刷新 | refresh | Refresh | 重新加载 |
| 信息 | info | Info | 提示、详情 |
| 搜索 | search | Search | 搜索按钮 |
| 检查 | check | Check | 完成、对勾 |
| 警告 | alert | Alert | 错误、警告 |
| （无文字只图标） | （任意图标+notext） | Only Icon | 极简风格 |
二、2025 年最常用的 6 种写法（直接复制）
<!-- 1. 标准带文字+图标（最常见） -->
<a href="#" data-role="button" data-icon="plus">新增任务</a>
<!-- 2. 图标在右边 -->
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">下一步</a>
<!-- 3. 只显示图标不显示文字（底部导航必备） -->
<a href="#home" data-icon="home" class="ui-btn-active">首页</a>
<!-- 4. 超小图标按钮（工具栏常用） -->
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-mini="true"></a>
<!-- 5. 列表右侧小图标按钮（删除/详情） -->
<ul data-role="listview" data-split-icon="gear">
<li>
<a href="#">查看详情</a>
<a href="#" data-icon="gear">设置</a> <!-- 右侧小按钮 -->
</li>
</ul>
<!-- 6. 自定义图标位置（顶部右上角常见） -->
<div data-role="header">
<h1>我的应用</h1>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext"
class="ui-btn-right">设置</a>
</div>三、黑白双色自动适配（jQuery Mobile 最聪明的地方）
<!-- 在 data-theme="a"（深色背景）上自动变白 -->
<div data-role="header" data-theme="a">
<a href="#" data-icon="plus" data-iconpos="notext" class="ui-btn-right"></a>
</div>
<!-- 在 data-theme="b"（浅色背景）上自动变黑 -->
<div data-role="footer" data-theme="b">
<a href="#" data-icon="home" class="ui-btn-active"></a>
</div>完全不用写一行 CSS，jQM 自动判断背景深浅切换黑白图标！
四、2025 年实战最爱的 8 个组合（直接复制到项目）
<!-- 1. 经典底部导航栏（99% 项目都在用） -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home" class="ui-btn-active">首页</a></li>
<li><a href="#list" data-icon="grid">列表</a></li>
<li><a href="#add" data-icon="plus">发布</a></li>
<li><a href="#message" data-icon="info">消息</a></li>
<li><a href="#my" data-icon="user">我的</a></li>
</ul>
</div>
</div>
<!-- 2. 返回 + 设置（经典 header） -->
<div data-role="header" data-position="fixed">
<a href="#" data-icon="back" data-iconpos="notext" class="ui-btn-left">返回</a>
<h1>任务详情</h1>
<a href="#setting" data-icon="gear" data-iconpos="notext" class="ui-btn-right">设置</a>
</div>
<!-- 3. 列表右滑删除（最常用） -->
<li class="list-item">
<a href="#detail"><h2>开会讨论</h2><p>2025-03-15</p></a>
<a href="#" data-icon="delete" data-iconpos="notext">删除</a>
</li>五、如果你想要更多图标（2025 年推荐的两种方案）
方案 1（推荐）：继续用 jQM 原生 18 个，够用一辈子
方案 2（想多一点）：直接用 Font Awesome 5 免费版（和 jQM 完美兼容）
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<a href="#" class="ui-btn ui-icon-fa fa-heart ui-btn-icon-left">收藏</a>
<style>
.ui-icon-fa:after {
background: none !important;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
}
.ui-icon-fa.fa-heart:after { content: "\f004"; }
.ui-icon-fa.fa-weixin:after { content: "\f1d7"; }
</style>2025 年还在用 jQuery Mobile 的同学：
记住上面 18 个图标 + 6 种写法，你就再也不用为图标发愁了！
需要我给你一个 「jQuery Mobile 图标一页纸速查表（PDF/图片版）」 或者 「所有图标完整 Demo 页面」，直接说一声，我立刻打包发你！
