jQuery Mobile的提供了一组图标，这将使你的按钮看起来更可取。
添加图标到jQuery Mobile的按钮
要将图标添加到您的按钮，使用ui-icon类和图标，图标位置的阶级立场(ui-btn-icon - pos )
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left" >Search</a>
注意：对于其他按键，就像在列表视图和表单按钮，你必须使用数据图标属性。 这将在后面的章节来解释。
下面我们列出了一些可用的图标jQuery Mobile的提供：
| Icon类 | 描述 | 图标 | 例 |
|---|---|---|---|
| ui-icon-arrow-l | 左箭头 | 尝试一下 | |
| ui-icon-arrow-r | 右箭头 | 尝试一下 | |
| ui-icon-info | 信息 | 尝试一下 | |
| ui-icon-delete | 删除 | 尝试一下 | |
| ui-icon-back | 背部 | 尝试一下 | |
| ui-icon-audio | 音箱 | 尝试一下 | |
| ui-icon-lock | 挂锁 | 尝试一下 | |
| ui-icon-search | 搜索 | 尝试一下 | |
| ui-icon-alert | 警报 | 尝试一下 | |
| ui-icon-grid | 格 | 尝试一下 | |
| ui-icon-home | 家 | 尝试一下 |
对于所有的jQuery Mobile的按钮图标的完整参考，请访问我们的jQuery Mobile的图标参考 。
定位图标
您可以指定其中的图标应该定位在按钮四个值之一： top, right, bottom或left 。
使用ui-btn-icon类来指定位置：
图标位置的链接按钮
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top" >Top</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-right" >Right</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-bottom" >Bottom</a>
<a href="#anylink"
class="ui-btn ui-icon-search ui-btn-icon-left" >Left</a>
试一试» 如果不指定链接按钮图标的位置，图标将不显示。
只显示图标
要只显示图标，使用"notext"作为图标位置值：
卸下圈
默认情况下，所有的图标会带有灰色圆圈（光盘）。 要删除这个圈子，加上"ui-nodisc-icon"类元素或其容器：
例
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">With circle (default)</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-nodisc-icon" >Without circle</a>
试一试» 黑色或白色图标
默认情况下，所有的图标都是白色的。 若要更改图标颜色为黑色，添加"ui-alt-icon"的元素或它的容器：
例
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left">White</a>
<a href="#anylink" class="ui-btn ui-icon-search
ui-btn-icon-left ui-alt-icon" >Black</a>
试一试» 更多示例
添加"ui-nodisc-icon"类的容器
的一个例子"ui-nodisc-icon"添加到容器类。
添加"ui-alt-icon"类的容器
的一个例子"ui-alt-icon"添加到容器类。