Question

jQuery UI comes with some good icons.
How can I use them without buttons? Let’s say how to create link with plus sign and to react on hover and click by changing icons?
Here is the demo just with icon added.

Upd 1:
On hover icon should change the color from grey to black (please see it here). In my demo it is black from the beginning.

Upd 2:
Here is almost what I need – http://jsfiddle.net/and7ey/gZQzt/6/ – but without that background rectangle, I need just plus sign.

Upd 3:
Looks like it would be better not to use standard jQuery UI styles, but to refer directly to the images, but I don’t know how use it.

Seems I need to define CSS like:

width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;

Positions can be easily found at jquery.ui.theme.css file.
But how should I:

1. define correct background-image url?
2. modify CSS to react on click, hover?

Answer 1

Finally, I’ve decided just to use jQuery UI’s image files – How to use one icon from different image files?:

a:link,a:visited { /* for regular non-hovered, non-active link styles */
    width: 16px;  
    height: 16px;
    background-image:
    url(images/defaultStateImage.png); 
    background-position: -32px -128px;
}

a:hover { /* for hover/mouse-over styles */
    url(images/hoverStateImage.png); 
    background-position: -32px -128px;
}

a:active { /* for click/mouse-down state styles */
    url(images/clickStateImage.png); 
    background-position: -32px -128px;
}