jQuery Mobile 按钮图标（Icons）大全
jQuery Mobile 1.4.5 内置 50+ 个矢量图标（CSS Sprite），无需额外图片，通过 ui-icon-* 类名使用。
图标大小固定为 18×18px，支持 白色/深色自动适配主题。
1. 使用方式（3 步）
<a href="#" class="ui-btn
ui-icon-图标名 <!-- 必须 -->
ui-btn-icon-left <!-- 图标位置：left/right/top/bottom/notext -->
ui-corner-all"> <!-- 可选：圆角 -->
文字
</a>| 类名 | 说明 |
|---|---|
ui-icon-xxx | 图标名称（必填） |
ui-btn-icon-left | 图标在左（默认） |
ui-btn-icon-right | 图标在右 |
ui-btn-icon-top | 图标在上 |
ui-btn-icon-bottom | 图标在下 |
ui-btn-icon-notext | 只显示图标（隐藏文字） |
2. 完整图标列表（50+）
复制下方代码可直接运行查看所有图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 图标大全</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
.icon-demo { margin: 10px 0; padding: 10px; border-bottom: 1px solid #ddd; }
.icon-btn { margin: 5px; display: inline-block; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>jQuery Mobile 图标大全（50+）</h1>
</div>
<div data-role="main" class="ui-content">
<!-- 所有图标 -->
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-action ui-icon-shadow icon-btn"></a>
<code>ui-icon-action</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-alert ui-icon-shadow icon-btn"></a>
<code>ui-icon-alert</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-audio ui-icon-shadow icon-btn"></a>
<code>ui-icon-audio</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-back ui-icon-shadow icon-btn"></a>
<code>ui-icon-back</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-bars ui-icon-shadow icon-btn"></a>
<code>ui-icon-bars</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-bullets ui-icon-shadow icon-btn"></a>
<code>ui-icon-bullets</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-calendar ui-icon-shadow icon-btn"></a>
<code>ui-icon-calendar</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-camera ui-icon-shadow icon-btn"></a>
<code>ui-icon-camera</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-d ui-icon-shadow icon-btn"></a>
<code>ui-icon-carat-d</code>（下箭头）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-l ui-icon-shadow icon-btn"></a>
<code>ui-icon-carat-l</code>（左）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-r ui-icon-shadow icon-btn"></a>
<code>ui-icon-carat-r</code>（右）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-carat-u ui-icon-shadow icon-btn"></a>
<code>ui-icon-carat-u</code>（上）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-check ui-icon-shadow icon-btn"></a>
<code>ui-icon-check</code>（对勾）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-clock ui-icon-shadow icon-btn"></a>
<code>ui-icon-clock</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-cloud ui-icon-shadow icon-btn"></a>
<code>ui-icon-cloud</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-comment ui-icon-shadow icon-btn"></a>
<code>ui-icon-comment</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete ui-icon-shadow icon-btn"></a>
<code>ui-icon-delete</code>（×）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-edit ui-icon-shadow icon-btn"></a>
<code>ui-icon-edit</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-eye ui-icon-shadow icon-btn"></a>
<code>ui-icon-eye</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-forbidden ui-icon-shadow icon-btn"></a>
<code>ui-icon-forbidden</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-forward ui-icon-shadow icon-btn"></a>
<code>ui-icon-forward</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-gear ui-icon-shadow icon-btn"></a>
<code>ui-icon-gear</code>（设置）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-grid ui-icon-shadow icon-btn"></a>
<code>ui-icon-grid</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-heart ui-icon-shadow icon-btn"></a>
<code>ui-icon-heart</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-home ui-icon-shadow icon-btn"></a>
<code>ui-icon-home</code>（首页）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-info ui-icon-shadow icon-btn"></a>
<code>ui-icon-info</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-location ui-icon-shadow icon-btn"></a>
<code>ui-icon-location</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-lock ui-icon-shadow icon-btn"></a>
<code>ui-icon-lock</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-mail ui-icon-shadow icon-btn"></a>
<code>ui-icon-mail</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-minus ui-icon-shadow icon-btn"></a>
<code>ui-icon-minus</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-navigation ui-icon-shadow icon-btn"></a>
<code>ui-icon-navigation</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-phone ui-icon-shadow icon-btn"></a>
<code>ui-icon-phone</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-plus ui-icon-shadow icon-btn"></a>
<code>ui-icon-plus</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-power ui-icon-shadow icon-btn"></a>
<code>ui-icon-power</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-recycle ui-icon-shadow icon-btn"></a>
<code>ui-icon-recycle</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-refresh ui-icon-shadow icon-btn"></a>
<code>ui-icon-refresh</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-search ui-icon-shadow icon-btn"></a>
<code>ui-icon-search</code>（搜索）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-shop ui-icon-shadow icon-btn"></a>
<code>ui-icon-shop</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-star ui-icon-shadow icon-btn"></a>
<code>ui-icon-star</code>（收藏）
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-tag ui-icon-shadow icon-btn"></a>
<code>ui-icon-tag</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-user ui-icon-shadow icon-btn"></a>
<code>ui-icon-user</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-video ui-icon-shadow icon-btn"></a>
<code>ui-icon-video</code>
</div>
<!-- 箭头系列 -->
<h3>箭头图标</h3>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-arrow-l ui-icon-shadow icon-btn"></a>
<code>ui-icon-arrow-l</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-arrow-r ui-icon-shadow icon-btn"></a>
<code>ui-icon-arrow-r</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-arrow-u ui-icon-shadow icon-btn"></a>
<code>ui-icon-arrow-u</code>
</div>
<div class="icon-demo">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-arrow-d ui-icon-shadow icon-btn"></a>
<code>ui-icon-arrow-d</code>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
</body>
</html>3. 常用图标速查表（推荐收藏）
| 图标 | 类名 | 用途 |
|---|---|---|
ui-icon-home | 首页 | |
ui-icon-back | 返回 | |
ui-icon-arrow-r | 下一页 | |
ui-icon-arrow-l | 上一页 | |
ui-icon-search | 搜索 | |
ui-icon-bars | 菜单 | |
ui-icon-gear | 设置 | |
ui-icon-delete | 删除 | |
ui-icon-star | 收藏 | |
ui-icon-plus | 添加 | |
ui-icon-minus | 减少 | |
ui-icon-check | 完成 | |
ui-icon-user | 个人中心 | |
ui-icon-phone | 电话 | |
ui-icon-mail | 邮件 |
4. 实用示例：底部导航栏（类似微信）
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
<li><a href="#search" class="ui-btn ui-icon-search ui-btn-icon-top">发现</a></li>
<li><a href="#cart" class="ui-btn ui-icon-shop ui-btn-icon-top">购物车</a></li>
<li><a href="#user" class="ui-btn ui-icon-user ui-btn-icon-top">我的</a></li>
</ul>
</div>
</div>5. 常见问题
| 问题 | 解决方案 |
|---|---|
| 图标不显示 | 确保使用 CDN 或本地 images/ 文件夹存在 |
| 图标模糊 | 正常（矢量 Sprite），不支持高清 |
| 想换颜色 | 无法直接改，用 ui-btn-b 切换深色主题 |
| 想用自定义图标 | 需覆盖 CSS Sprite（复杂） |
6. 官方文档
- 图标列表：https://api.jquerymobile.com/icons/
- Sprite 图片：
jquery.mobile-1.4.5/images/icons-png/*.png
总结：推荐写法
<!-- 带文字 + 图标在左 -->
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
<!-- 纯图标按钮 -->
<a href="tel:10086" class="ui-btn ui-btn-icon-notext ui-icon-phone ui-mini">拨号</a>
<!-- 导航栏图标在上 -->
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn ui-icon-home ui-btn-icon-top">首页</a></li>
</ul>
</div>需要我为你生成：
- 所有图标的 PNG 截图包？
- 可复制的图标选择器工具（HTML 页面）？
- 自定义 SVG 图标替换方案？
随时告诉我！
