tinymce - Fontawesome icon vanishes in editor while switching text and visual mode

admin管理员组

文章数量:1430143

While switching between text editor mode or updating post fontawesome icon vanishes.Please do not refer to use any plugin.I think i tag is stripped by editor,how can I overcome this? My code in editor text mode

<span><i class="fa fa-user"></i></span>

or

<i class="fa fa-user"></i>

As long as I am in text mode everything is well but when I switch to visual mode all of my code gets vanish.

While switching between text editor mode or updating post fontawesome icon vanishes.Please do not refer to use any plugin.I think i tag is stripped by editor,how can I overcome this? My code in editor text mode

<span><i class="fa fa-user"></i></span>

or

<i class="fa fa-user"></i>

As long as I am in text mode everything is well but when I switch to visual mode all of my code gets vanish.

• tinymce

Share Improve this question edited Mar 31, 2014 at 2:07 Sadia Mehjabin asked Mar 30, 2014 at 16:46 Sadia MehjabinSadia Mehjabin 7788 bronze badges 4

• 1 Plugin recommendations are off-topic, what have you tried to do so far, maybe hook into tiny_mce_before_init ? – Wyck Commented Mar 30, 2014 at 16:59
• Does this question concern a third party plugin? For example, this one? – s_ha_dum Commented Mar 30, 2014 at 17:07
• Can't I just skip the plugin.In wp 3.8 and chrome browser vanishes the icon while switching .I have used two plugin.Is there any filter to do without plugin? – Sadia Mehjabin Commented Mar 30, 2014 at 17:11
• Please provide example of markup that vanishes. Also add more involved details (like code) by editing your question, comments don't handle it well. – Rarst Commented Mar 30, 2014 at 21:48

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

I think you should first enable i tags.Then you should enable class id or span whatever you like.To do so add this code.

function add_mce_markup( $initArray ) {
    $ext = 'i[id|name|class|style]';
    if ( isset( $initArray['extended_valid_elements'] ) ) {
        $initArray['extended_valid_elements'] .= ',' . $ext;
    } else {
        $initArray['extended_valid_elements'] = $ext;
    }
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'add_mce_markup' );

This help me to fix this issue Try to inser blank spave   or comment code <!--ex--> in between i tag like <i class="fa fa-linkedin-square" aria-hidden="true"><!--tr--></i> So that wordpress did not recognize it as empty tag.

本文标签： tinymceFontawesome icon vanishes in editor while switching text and visual mode