如何在我的网站上引用jQuery UI图标？

Question

有没有办法在我的网站的任何地方将jquery ui图标作为常规图像引用？

- leora

Answer 1

如果您已经链接了jquery CSS，您可以通过将.ui-icon基类和特定的图标类（例如- .ui-icon-close用于关闭按钮）应用于您的元素（通常是span）来获取图标。

jquery wiki有一个全面的图标列表及其类别，您可以在这里找到：http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework 只需检查图标并获取类即可。

编辑

样本使用

<span class="ui-icon ui-icon-zoomin"></span> <!-- Shows a magnifying glass -->
<span class="ui-icon ui-icon-play"></span> <!-- Shows a play button -->

- JohnP

---

你能举个例子将其作为常规图像引用吗？ - leora

@ooo 你说的常规图片是指像 <img src='path/to/image'> 这样的东西吗？如果是，不行。jQuery使用CSS精灵技术，所以你必须按照这种方式来做。已添加示例用法。 - JohnP

它还有助于将ui-icon样式从块级元素覆盖为内联块级元素。 - Kodak

你也可以使用 <span class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-close"></span></span> 来实现边框/按钮的外观。然后，你可以绑定一个 jQuery 的 .hover() 事件来切换外部 span 元素的 ui-hover-state 类，例如：jQuery('.ui-state-default').hover(function() { $(this).toggleClass('ui-state-hover'); })。 - Nick

Answer 2

看一下这段代码片段：http://www.xinotes.org/notes/note/773/

- Peeter

Answer 3

你可以使用来自jQueryUI图标速查表的图标类。

- ymakux