jQuery UI のアイコンセットについてのメモ(改行される罠)


jQuery UIは、激しく便利なんですが、最近アイコン周りの仕様で
若干はまったので、備忘録メモ。

アイコンを表示するときには、
<span class="ui-icon ui-icon-cart"></span>これがアイコンです
と書いて表示するんですが、実際に表示すると、

これがアイコンです

となり、spanでくくってるのに改行が入ってしまいます。
なんのことはなく、jQuery UIのCSSが、display: block;
と指定しているので、改行が入ってしまう。

というわけで、
<div style="float:left"><span class="ui-icon ui-icon-cart"></span></div>これがアイコンです
とfloat: left; と指定することにより、

これがアイコンです

と改行なしで表示できるようになるけど、
1行の中にアイコンをいれたいときとかは、かなり面倒になる。

日本人がメールの文章の間に絵文字を入れる感覚で
アイコンを文中に自由に入れることを想定してない作りになってる。

なおこの話は、1.8.4で動作確認しました。