jquery ui アイコンの改行回避

jQuery UIのアイコンが便利。ただ、アイコンの後ろに文字を続けたくても、改行されてしまうので調べたメモ。

こんな感じに記述すると

<span class="ui-icon ui-icon-play"></span>再生
<span class="ui-icon ui-icon-pause"></span>一時停止

こう表示される。
再生 一時停止

firebugで見てみるとdisplay:blockのために改行されるよう。 styleを「display: inline-block」設定してやると、

<span style="display: inline-block" class="ui-icon ui-icon-play"></span>再生
<span style="display: inline-blcok" class="ui-icon ui-icon-pause"></span>一時停止

改行されずに上手く表示されました。
再生 一時停止

ちなみに、「display: inline」だとアイコンがどこかに逝ってしまった。。cssはむずかしい。
再生 一時停止

※FirefoxとChromeでしか確認してない。