jQueryUIのUI-ICONをインライン要素として使う。

jQueryのUI-ICONがブロックレベル要素なので、インラインで使おうとしても前後に改行が入ってしまう。float:leftでも行頭がせいぜいなので、インライン要素で使えるように考えてみた。
「ui-icon-inline」クラスを付けたものをインライン要素にする。

■HTML

まず最初に、UI-ICONを普通（ブロックレベル要素）<span class="ui-icon ui-icon-lightbulb"></span>として使う。

<p />

そして次に、UI-ICONをインライン要素<span class="ui-icon ui-icon-inline ui-icon-lightbulb"></span>として使う。

■jQuery

$(function(){
    var $icon = $('.ui-icon.ui-icon-inline');
    $icon.css({'display':'inline','position':'absolute'});
    $icon.wrap($('<span></span>').css({'overflow':'hidden'}));
    $icon.after($('<span></span>').css({'margin-left':'16px'}));
});

■結果

以上。