wordpress - tinymce エディターでのカスタム UL スタイル

Question

tinyMCE エディタの UL リストの構造を次のように変更したい:

<ul>
   <li>item 1</li>
   <li>item 2</li>
</ul>

に：

<ul>
   <li><i class="icon"></i> item 1</li>
   <li><i class="icon"></i> item 2</li>
</ul>

私はWordpressを使用していますが、スタイル形式を使用してこれを行うことができるかどうかを知りたい - > http://codex.wordpress.org/TinyMCE_Custom_Styles

私が試してみました：

function custom_mce_before_init_insert_formats($init_array) {
    $style_formats = array(
        array(
            'title' => 'arrow',
            'inline' => 'i',
            'classes' => 'icon',
            'wrapper' => false
        )
    );  
    $init_array['style_formats'] = json_encode($style_formats);

    return $init_array;  
}
add_filter('tiny_mce_before_init', 'custom_mce_before_init_insert_formats');

しかし、これは適切でないコードを生成します:

<ul>
   <li><i class="icon">item 1</i></li>
   <li><i class="icon">item 2</i></li>
</ul>

どんな解決策も非常に役に立ちます。

ありがとうございました。