Why items could not be enclosed within items in WordPress?

You need a shortcode to deal with the removal of the <i> from the editor.

You’ll have to add this to your functions.php of your theme/child theme.

function dd_fontawesome_shortcode ($atts) {
    $args = shortcode_atts( array(
        'icon' => '',
        'size' => '14',
        'color' => '#000',
        'type' => 'fa'
    ), $atts ) ;

    $output="<i class="".$args['type'].' '. $args['icon'] .'" style="font-size:  '. $args['size'] .'px; color: '. $args['color'] .';"></i>';

    return $output;
    }
add_shortcode ('dd-icon' , 'dd_fontawesome_shortcode');

Usage is like [dd-icon icon=”fa-star”] or [dd-icon icon=”fa-star” size=”18″ color=”#eee”]