Текстовые редакторы движков перекраивают HTML код

[Sorokin Vladimir]

Я говорю про иконки в шаблоне сайта, а не редактора.
Шаблон типа Лендпейдж  -  одна длинная страница и править все очень легко именно из админки в текстовом (визуальном) редакторе.
В админке заходите в «начало» и справа кнопочки, возле каждой страницы «редактировать».
И для того, что бы редактор сделал свое «черное дело» не надо лезть в исходный код, достаточно изменить одно слово и нажать внизу кнопочку «Изменить».
Что мой клиент и сделал.....
А редактор кода открывается кнопочкой «источник»

[nvs-vovan]

А редактор кода открывается кнопочкой «источник»

Точно, я не додумался ... ну что же, теперь буду знать, может пригодится когда.

А в вашем случае, как вы уже упоминали остается тег <span class=""></span> раз он работает, тем более, что в и мануале по Bootstrap 3 иконки рекомендуют делать именно в теге span, а не в i.
Поэтому, раз span не режет редактор не вижу никаких проблем и поводов менять редактор из-за такой мелочи ... на мой конечно скромный взгляд )

[Sorokin Vladimir]

В недрах интернета нашел решение, как прекратить самовольное редактирование (удаление) тегов при работе с редактором СКЕ.
В штатный файл «config.js» прописываем (меняем) такой код:

/**
* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/

CKEDITOR.editorConfig = function( config ) {
   // Define changes to default configuration here. For example:
   // config.language = 'fr';
   // config.uiColor = '#AADC6E';
    config.enterMode = CKEDITOR.ENTER_BR;
    config.shiftEnterMode = CKEDITOR.ENTER_P;
    config.allowedContent = true;
    config.protectedSource.push(/<(style)[^>]*>.*<\/style>/ig);
   config.protectedSource.push(/<(script)[^>]*>.*<\/script>/ig);// разрешить теги <script>
   config.protectedSource.push(/<(i)[^>]*>.*<\/i>/ig);// разрешить теги <i>
   config.protectedSource.push(/<\?[\s\S]*?\?>/g);// разрешить php-код
   config.protectedSource.push(/<!--dev-->[\s\S]*<!--\/dev-->/g);
    config.indentClasses = ["ul-grey", "ul-red", "text-red", "ul-content-red", "circle", "style-none", "decimal", "paragraph-portfolio-top", "ul-portfolio-top", "url-portfolio-top", "text-grey"];
    //config.contentsCss = ["/css/bootstrap.css", "/css/styles.css"];
   config.contentsCss = ["/css/styles.css"];
    config.disableNativeSpellChecker = false;
   customConfig: '/js/bootstrap.min.js';
   config.bodyClass = 'mystyle';
    config.fontawesomePath = '/js/ckeditor/plugins/fontawesome/font-awesome/css/font-awesome.min.css';
    config.codeSnippet_languages = {
    javascript: 'JavaScript',
    php: 'PHP',
      html: 'HTML',
      css: 'CSS',
      mysql: 'MYSQL'
   };
};

После чего 99% тегов остаются без изменения.

[Виктор4324]

Попробуй ContentTools или Markdown-редакторы с поддержкой HTML. Но лучше писать код вручную или использовать более надежные инструменты, такие как VS Code с плагинами для предпросмотра. В конечном итоге, это сэкономит кучу времени и нервов.