suggestion: Making an icon editable

[bbfriend]

Now(v2.0.9)

            var content = '<span class="fa fa-' + id + '"></span>';

            if (editor.selection.getNode().textContent === '') {
                content += '&nbsp;';
            }

to　(use HTML tag i or em )

//            var content = '<span class="fa fa-' + id + '"></span>';

//            if (editor.selection.getNode().textContent === '') {
//                content += '&nbsp;';
//            }

            var content = '&nbsp;<i class="fa fa-' + id + '"><span style="color: transparent; display: none;">' + id + '</span></i>&nbsp;';

and ,Delate Line (tinymce.init)

noneditable_noneditable_class: 'fa',

Editors can change the size ,color, and add links.
It will add extra characters, It is not perfect, but is this fine?
I referred to WP Visual Icon Fonts

[josh18]

I think the issue with this is that you can type characters into it, like <span class="fa fa-flag">Text in here</span> which doesn't work.