Jquery UI Framework Icons

Question

On the Themeroller page, the author of jQuery UI shows that there are icons available if you use certain keywords. Example:

<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-circle-close">
</span>
</li>

This creates a nice little X in the middle of a circle, framed by a box with rounded corners and a border.

But what if my icons are not in a list? What if they're in a table cell for instance?

<td>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</li>
</td>

This works, although it's not technically correct, because I don't have an opening and closing < ul> element.

Do I use

<td class="showcities">
<span class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s">
</span>
</span>
</td>

If so, what should the css be to define the ui-corner-all the same as the Themeroller example?

Nick Craver · Accepted Answer · 2010-04-07 14:04:51Z

5

Instead of span, use <div> here, like this

<td class="showcities">
  <div class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
    <span class="ui-icon ui-icon-triangle-1-s"></span>
  </div>
</td>

answered Apr 7, 2010 at 14:04

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phillip Senn Over a year ago

Thanks Nick! They're a little bit wider than the example page, but I think I might be able to style them.

Collectives™ on Stack Overflow

Jquery UI Framework Icons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related