is there anyway to reference jquery ui icons as regular images anywhere in my site?
Add a comment
|
3 Answers
If you've linked to the jquery CSS, you can get at the icons by applying the .ui-icon base class and the specific icon class (e.g - .ui-icon-close for close button) to your element (usually span)
The jquery wiki has a comprehensive list of icons and their classes, you can find it here : http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework
Just inspect the icon and get the class.
EDIT
Sample usage
<span class="ui-icon ui-icon-zoomin"></span> <!-- Shows a magnifying glass -->
<span class="ui-icon ui-icon-play"></span> <!-- Shows a play button -->
4 Comments
leora
can you give an example of referencing it as a regular image ??
JohnP
@ooo By regular image do you mean something like
<img src='path/to/image'>? If so, no. jQuery uses CSS sprites so you'd have to do it that way. Added sample usage.
Kodak
it also helps to overwrite ui-icon style from block to inline-block
Nick
You can also do
<span class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-circle-close"></span></span> - this gived the border/button look. You could then bind a jquery .hover() event to toggle the ui-hover-state class on the outer span, eg: jQuery('.ui-state-default').hover(function() { $(this).toggleClass('ui-state-hover'); })Take a look at this code snipplet: http://www.xinotes.org/notes/note/773/
Comments
you can use icon classes from jQueryUI Icons Cheatsheet
