Jquery UI Framework Icons

Question

Auf der Themeroller Seite zeigt der Autor von jQuery UI, dass Icons verfügbar sind, wenn Sie bestimmte Schlüsselwörter verwenden. Beispiel:

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

So entsteht ein hübsches kleines X in der Mitte eines Kreises, umrahmt von einem Kasten mit abgerundeten Ecken und einem Rand.

Was aber, wenn meine Symbole nicht in einer Liste sind? Was ist, wenn sie sich zum Beispiel in einer Tabellenzelle befinden?

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

Das funktioniert, obwohl es technisch nicht korrekt ist, weil ich kein öffnendes und schließendes < ul>-Element habe.

Benutze ich

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

Wenn ja, was sollte das css sein, um die ui-corner-all das gleiche wie das Themeroller Beispiel zu definieren?

Answer 1

Verwenden Sie anstelle von span <div> hier, etwa so

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