如何在 jQuery Mobile 框架中使用图标（不使用按钮）答案

【问题标题】：How to use icons in jQuery Mobile Framework (without using a button)如何在 jQuery Mobile 框架中使用图标（不使用按钮）
【发布时间】：2012-09-19 22:08:13
【问题描述】：

我希望使用 jQuery Mobile 内置的删除图标。

我知道如何使用按钮，您只需使用 data-role - 但我想在普通的旧 span 或 div 中使用它。

有没有办法做到这一点？

谢谢

【问题讨论】：

到目前为止你尝试过什么？您是否尝试将<a /> 标记更改为<span /> 标记？ jsfiddle.net/rUPxQ/1

标签： jquery jquery-mobile

【解决方案1】：

刚刚升级到 JQuery Mobile 1.4.0 -- 呃！...没有任何效果，直到以下解决方法：

<span class="ui-icon-delete ui-btn-icon-left " style="position:relative;" />

注意ui-btn-icon-left 类（你可以使用其他类-right、-top、-bottom、-notext，但这个似乎效果最好）。最重要的是，style="position:relative" 终于把它放到了我的容器中。

编码愉快...

【讨论】：

谢谢！我也在使用 1.4.0 并且无法解决这个问题。

【解决方案2】：

例如，您可以将div 与指定的类一起使用

<div class="ui-icon ui-icon-delete"></div>

更新：

自从首次发布以来，JQM 的样式表已经改变，您可以通过将ui-btn-icon-notext 类添加到您的元素来获得相同的效果（至少从 JQM 1.4.5 开始）。此外，您可能需要添加 position:relative; 才能正确定位。

例如

  <span class="ui-btn-icon-notext ui-icon-delete" style="position:relative" />

Here's a link to the relevant API

【讨论】：

@Haseeb 我为早期版本的 JQM 发布了这个，我用当前版本的示例更新了我的答案。
style='position:relative' 很重要，因为 Roman 在下面回答
@ehrhardt 也许，但当时我想没有必要。我在 2012 年回答了这个问题。
@ehrhardt 无论如何，我已经更新了我的答案以包含该信息。感谢您指出。

【解决方案3】：

如何使用<span class="ui-icon ui-icon-delete ui-icon-shadow" style="display:block" /> 或简单地在您的标记中引用ui-icon-delete 类？

【讨论】：

谢谢，但这似乎没有任何作用。我知道在常规 jquery 中你可以做到这一点，但它在移动设备上不起作用

【解决方案4】：

添加 data-iconpos="notext"

图标定位：

http://demos.jquerymobile.com/1.1.2/docs/buttons/buttons-icons.html

【讨论】：