如何使用没有按钮的jQuery UI图标？

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

You can use the icons with any element by adding the ui-icon and the appropriate class for the icon you want to the element.

<a href="#" class="ui-icon ui-icon-plusthick"></a>

If you want to add text to the link as well as an icon you'll need to set the icon on a separate element from the text. For example:

<a href="#"><span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span></a>

To change the icon on hover, you'll need to use some javascript. The following requires jQuery:

$(".MySelector").hover(function() { 
    $(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() { 
    $(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});

Answer 2

This is not "good", but at least this works. Please specify your question further, what should happen on click and hover.

Sample

http://jsfiddle.net/gZQzt/2/

HTML

<a href="#" class="img-link">
    <span class="ui-icon ui-icon-plusthick" style="display:inline-block;"></span>
    <span class="link-text">Link</span>
</a>

CSS

.img-link {
    text-decoration: none;
}

.link-text {
    text-decoration: underline;
}

Answer 3

Try this:

<a>
  <span class="ui-icon ui-icon-plusthick"></span>
</a>

and:

$('a').hover(function(){$(this).toggleClass('ui-state-highlight')});

You can see it here: http://jsfiddle.net/gZQzt/4/

Answer 4

Since I can't reply to answers yet, here's what I did using Kyle Traubermann's code:

<div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>

Basically, you have to put the state in a separate div. This changes the image to the right colour but it also adds a border and gloss to it so I had to disable that with nones. You might need a color: none; in there as well.

There's probably a simpler way to do this but I don't really know much about CSS yet.

Answer 5

UI icon as anchor (no text):

Works for me:

<a href="http://wow.com"><span class="ui-state-default ui-corner-all ui-icon ui-icon-extlink"></span></a>

Relevant: order of ui class names.

Answer 6

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;
}