Fontawesome icon vanishes in editor while switching text and visual mode

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

Read More
<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.

Related posts

Leave a Reply

2 comments

  1. 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' );
    
  2. This help me to fix this issue
    Try to inser blank spave &nbsp; 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.