jQuery Mobile 按钮图标

jQuery Mobile 提供了一套让按钮看起来更称心如意的图标。

添加图标到 jQuery Mobile 按钮

我们可以使用 ui-icon 类将图标添加到按钮上，并可以使用指定类来设置按钮位置。

Search

注意： 如果是其他场景下的按钮，比如列表里的按钮或表单中的按钮，就需要用到 data-icon 属性。后面的章节会专门展开说明。

下面我们列出一些 jQuery Mobile 提供的可用图标：

如需查看所有 jQuery Mobile 按钮图标的完整参考手册，请访问我们的 jQuery Mobile 图标参考手册。

定位图标

图标放在哪儿，其实也可以直接指定：按钮上方（top）、右侧（right）、下方（bottom）、左侧（left）。

请使用 ui-btn-icon 属性来指定位置：

图标的位置：

	顶部
右侧
底部
左侧

只显示图标

如果你只想显示图标，可以使用 "notext":

实例：

 
搜索

移除圆圈

默认情况下，所有的图标都有一个灰色的圆圈。如果你不需要它，可以在元素中使用 "ui-nodisc-icon" 类：

实例

  使用圆圈 (默认)
去掉圆圈

黑色、白色按钮

默认情况下，所有图标都是白色的。 如果需要改变图标颜色为黑色，可以在元素添加 "ui-alt-icon"：

实例

  白色
黑色

更多实例

向容器添加 "ui-nodisc-icon" 类
使用 "ui-nodisc-icon" 类的实例。

向容器添加 "ui-alt-icon" 类
使用 "ui-alt-icon" 类的实例。