I was creating a guide in WordPress with the Classic Editor. In the guide, I was about to create a separate section here,

/

I referred to some bootstrap snippets available on the internet. I pasted this code in the Text area

<ul class="list-inline small">
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star-half-alt text-success"></i></li>
</ul>

When I switch to the visual section, the i element gets removed. How to prevent elements from getting removed while switching to the visual section?

I was creating a guide in WordPress with the Classic Editor. In the guide, I was about to create a separate section here,

https://www.payuoc/home-furnishing-decor/best-mattress/

I referred to some bootstrap snippets available on the internet. I pasted this code in the Text area

<ul class="list-inline small">
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star text-success"></i></li>
              <li class="list-inline-item m-0"><i class="fa fa-star-half-alt text-success"></i></li>
</ul>

When I switch to the visual section, the i element gets removed. How to prevent elements from getting removed while switching to the visual section?

• twitter-bootstrap
• list

• Try adding   in between the span tags – RiddleMeThis Commented Mar 25, 2020 at 13:34

1 Answer 1

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"]