[REV] web: reverts update to fontawesome 5.11.2

This reverts commit ff1c35513aecef5fbc30f7c2f3834450e719714e.

closes odoo/odoo#41480

X-original-commit: 116057b26e71db4692280463669f3e80d813ddcc
Related: odoo/enterprise#7110
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

15 files changed, 50 insertions, 62 deletions

diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py
index 21471df1898..603509480f0 100644
--- a/addons/web_editor/controllers/main.py
+++ b/addons/web_editor/controllers/main.py
@@ -25,7 +25,7 @@ class Web_Editor(http.Controller):
         '/web_editor/font_to_img/<icon>/<color>/<int:size>',
         '/web_editor/font_to_img/<icon>/<color>/<int:size>/<int:alpha>',
         ], type='http', auth="none")
-    def export_icon_to_png(self, icon, color='#000', size=100, alpha=255, font='/web/static/lib/fontawesome/webfonts/fa-solid-900.ttf'):
+    def export_icon_to_png(self, icon, color='#000', size=100, alpha=255, font='/web/static/lib/fontawesome/fonts/fontawesome-webfont.ttf'):
         """ This method converts an unicode character to an image (using Font
             Awesome font by default) and is used only for mass mailing because
             custom fonts are not supported in mail.
diff --git a/addons/web_editor/static/lib/jQuery.transfo.js b/addons/web_editor/static/lib/jQuery.transfo.js
index c82efe81d7b..855d6f48560 100644
--- a/addons/web_editor/static/lib/jQuery.transfo.js
+++ b/addons/web_editor/static/lib/jQuery.transfo.js
@@ -135,8 +135,8 @@ OTHER DEALINGS IN THE SOFTWARE.
                 +  '<div class="transfo-controls">'
                 +   '<div style="cursor: crosshair; position: absolute; margin: -30px; top: 0; right: 0; padding: 1px 0 0 1px;" class="transfo-rotator">'
                 +    '<span class="fa-stack fa-lg">'
-                +    '<i class="far fa-circle fa-stack-2x"></i>'
-                +    '<i class="fas fa-redo fa-stack-1x fa-inverse"></i>'
+                +    '<i class="fa fa-circle fa-stack-2x"></i>'
+                +    '<i class="fa fa-repeat fa-stack-1x fa-inverse"></i>'
                 +    '</span>'
                 +   '</div>'
                 +   '<div style="' + css + 'top: 0%; left: 0%; cursor: nw-resize;" class="transfo-scaler-tl"></div>'
diff --git a/addons/web_editor/static/lib/summernote/src/js/defaults.js b/addons/web_editor/static/lib/summernote/src/js/defaults.js
index fa8de80e134..9d8e0bab661 100644
--- a/addons/web_editor/static/lib/summernote/src/js/defaults.js
+++ b/addons/web_editor/static/lib/summernote/src/js/defaults.js
@@ -70,15 +70,15 @@ define('summernote/defaults', function () {
           subscript: 'subscript'
         },
         image: {
-          image: 'image',
+          image: 'picture-o',
           floatLeft: 'align-left',
           floatRight: 'align-right',
           floatNone: 'align-justify',
           shapeRounded: 'square',
-          shapeCircle: 'circle',
-          shapeThumbnail: 'image',
+          shapeCircle: 'circle-o',
+          shapeThumbnail: 'picture-o',
           shapeNone: 'times',
-          remove: 'trash-alt'
+          remove: 'trash-o'
         },
         link: {
           link: 'link',
@@ -117,7 +117,7 @@ define('summernote/defaults', function () {
         },
         history: {
           undo: 'undo',
-          redo: 'redo'
+          redo: 'repeat'
         },
         misc: {
           check: 'check'
diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index 228aefb42e6..4482a8f67ba 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -190,7 +190,7 @@ function getMatchedCSSRules(a) {
 function fontToImg($editable) {
     var fonts = odoo.__DEBUG__.services["wysiwyg.fonts"];
 
-    $editable.find('.fa, .fas, .far').each(function () {
+    $editable.find('.fa').each(function () {
         var $font = $(this);
         var icon, content;
         _.find(fonts.fontIcons, function (font) {
diff --git a/addons/web_editor/static/src/js/common/ace.js b/addons/web_editor/static/src/js/common/ace.js
index 7055b9152b4..dc2d78a53c7 100644
--- a/addons/web_editor/static/src/js/common/ace.js
+++ b/addons/web_editor/static/src/js/common/ace.js
@@ -820,7 +820,7 @@ var ViewEditor = Widget.extend({
 
             if ($elem.data('dirty') || $elem.data('customized')) {
                 $div.prepend($('<span/>', {
-                    class: 'mr8 far fa-save ' + ($elem.data('dirty') ? 'text-warning' : 'text-success'),
+                    class: 'mr8 fa fa-floppy-o ' + ($elem.data('dirty') ? 'text-warning' : 'text-success'),
                 }));
             }
 
diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index befea94f328..1d8bcce4808 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -88,7 +88,7 @@ renderer.tplPopovers = function (lang, options) {
     //////////////// image popover
 
     // add center button for images
-    $(tplIconButton('fas fa-align-center', {
+    $(tplIconButton('fa fa-align-center', {
         title: _t('Center'),
         event: 'floatMe',
         value: 'center'
@@ -106,14 +106,14 @@ renderer.tplPopovers = function (lang, options) {
         '<li><a class="dropdown-item" data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>',
         '<li><a class="dropdown-item" data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>',
     ];
-    $(tplIconButton('far fa-plus-square', {
+    $(tplIconButton('fa fa-plus-square-o', {
         title: _t('Padding'),
         dropdown: tplDropdown(dropdown_content)
     })).appendTo($padding);
 
     // circle, boxed... options became toggled
     $imagePopover.find('[data-event="imageShape"]:not([data-value])').remove();
-    var $button = $(tplIconButton('far fa-sun', {
+    var $button = $(tplIconButton('fa fa-sun-o', {
         title: _t('Shadow'),
         event: 'imageShape',
         value: 'shadow'
@@ -121,7 +121,7 @@ renderer.tplPopovers = function (lang, options) {
 
     // add spin for fa
     var $spin = $('<div class="btn-group d-none only_fa"/>').insertAfter($button.parent());
-    $(tplIconButton('fas fa-sync', {
+    $(tplIconButton('fa fa-refresh', {
             title: _t('Spin'),
             event: 'imageShape',
             value: 'fa-spin'
@@ -144,16 +144,16 @@ renderer.tplPopovers = function (lang, options) {
     // show dialog box and delete
     var $imageprop = $('<div class="btn-group"/>');
     $imageprop.appendTo($imagePopover.find('.popover-body'));
-    $(tplIconButton('far fa-file-image', {
+    $(tplIconButton('fa fa-file-image-o', {
             title: _t('Edit'),
             event: 'showImageDialog'
         })).appendTo($imageprop);
-    $(tplIconButton('far fa-trash-alt', {
+    $(tplIconButton('fa fa-trash-o', {
             title: _t('Remove'),
             event: 'delete'
         })).appendTo($imageprop);
 
-    $(tplIconButton('fas fa-crop', {
+    $(tplIconButton('fa fa-crop', {
         title: _t('Crop Image'),
         event: 'cropImage',
     })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-thumbnail"]'));
@@ -170,7 +170,7 @@ renderer.tplPopovers = function (lang, options) {
 
     $linkPopover.find('.popover-body').append($airPopover.find(".note-history").clone());
 
-    $linkPopover.find('button[data-event="showLinkDialog"] i').attr("class", "fas fa-link");
+    $linkPopover.find('button[data-event="showLinkDialog"] i').attr("class", "fa fa-link");
     $linkPopover.find('button[data-event="unlink"]').before($airPopover.find('button[data-event="showImageDialog"]').clone());
 
     //////////////// text/air popover
diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js
index f6aa18a69f7..06a282d0076 100644
--- a/addons/web_editor/static/src/js/editor/summernote.js
+++ b/addons/web_editor/static/src/js/editor/summernote.js
@@ -2487,7 +2487,7 @@ eventHandler.detach = function (oLayoutInfo, options) {
     $('.o_table_handler').remove();
 };
 
-options.icons.image.image = "file-image";
+options.icons.image.image = "file-image-o";
 $.summernote.lang['en-US'].image.image = "File / Image";
 
 return $.summernote;
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 0d4b67ec9c0..361355c4cab 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -130,7 +130,7 @@ var Wysiwyg = Widget.extend({
         $editable.find('[title=""]').removeAttr('title');
         $editable.find('[alt=""]').removeAttr('alt');
         $editable.find('[data-original-title=""]').removeAttr('data-original-title');
-        $editable.find('a.o_image, span.fa, i.fa, span.far, i.far, span.fas, i.fas').html('');
+        $editable.find('a.o_image, span.fa, i.fa').html('');
         $editable.find('[aria-describedby]').removeAttr('aria-describedby').removeAttr('data-original-title');
         return $editable.html();
     },
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 2de7d389843..f07bc344764 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -186,11 +186,10 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
 
 // Fields
 address {
-    .fa.fa-mobile-alt,
-    .fas.fa-mobile-alt {
+    .fa.fa-mobile-phone {
         margin: 0 3px 0 2px;
     }
-    .far.fa-file-alt {
+    .fa.fa-file-text-o {
         margin-right: 1px;
     }
 }
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index ebd84429fa9..f47cb99b055 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -363,7 +363,6 @@ body .modal {
 
             input:checked + i::before {
                 content: "\f00c";
-                font-weight: 900;
                 @include o-position-absolute($top: 6px, $left: 5px);
             }
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index b981a613521..f2e97df762f 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -236,8 +236,7 @@ body.editor_enable.editor_has_snippets {
                 transform: translateY(-50%);
                 width: 1em;
                 text-align: center;
-                font-family: 'Font Awesome 5 Free';
-                font-weight: 900;
+                font-family: FontAwesome;
             }
         }
 
@@ -597,8 +596,7 @@ body.editor_enable.editor_has_snippets {
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    font-family: 'Font Awesome 5 Free' !important;
-                    font-weight: 900;
+                    font-family: FontAwesome !important;
                     color: $o-we-color-success;
                 }
 
@@ -762,8 +760,7 @@ body.editor_enable.editor_has_snippets {
                     border: solid 1px darken($o-we-handles-accent-color, 10%);
                     line-height: $o-we-handles-btn-size - 2;
                     font-size: 14px;
-                    font-family: 'Font Awesome 5 Free';
-                    font-weight: 900;
+                    font-family: FontAwesome;
                     background-color: darken($o-we-handles-accent-color, 20%);
                     color: white;
                 }
@@ -780,14 +777,12 @@ body.editor_enable.editor_has_snippets {
 
                 &.w:after,
                 &.e:after {
-                    content: "\f337";
-                    font-weight: 900;
+                    content: "\f07e";
                 }
 
                 &.s:after,
                 &.n:after {
-                    content: "\f338";
-                    font-weight: 900;
+                    content: "\f07d";
                 }
 
                 &.o_handle_start {
@@ -795,13 +790,11 @@ body.editor_enable.editor_has_snippets {
                     &.w:after,
                     &.e:after {
                         content: '\f061';
-                        font-weight: 900;
                     }
 
                     &.n:after,
                     &.s:after {
                         content: '\f063';
-                        font-weight: 900;
                     }
                 }
 
@@ -810,13 +803,11 @@ body.editor_enable.editor_has_snippets {
                     &.w:after,
                     &.e:after {
                         content: '\f060';
-                        font-weight: 900;
                     }
 
                     &.n:after,
                     &.s:after {
                         content: '\f062';
-                        font-weight: 900;
                     }
                 }
 
@@ -861,8 +852,7 @@ body.editor_enable.editor_has_snippets {
                 &::before, &::after {
                     content: '\f141';
                     display: block;
-                    font-family: 'Font Awesome 5 Free';
-                    font-weight: 900;
+                    font-family: FontAwesome;
                     font-size: 0.8em;
                     line-height: 0.35em;
                 }
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 2b0ba9f4589..3a17fc2bcf2 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -21,10 +21,10 @@
             <we-title>
                 <span t-esc="name"/>
                 <we-button-group>
-                    <we-button class="far fa-copy fa-fw oe_snippet_clone"
+                    <we-button class="fa fa-fw fa-clone oe_snippet_clone"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
-                    <we-button class="far fa-trash-alt fa-fw oe_snippet_remove"
+                    <we-button class="fa fa-fw fa-trash oe_snippet_remove"
                                 title="Remove Block"
                                 aria-label="Remove Block"/>
                 </we-button-group>
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index 55411846746..f48f2474672 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -151,7 +151,7 @@
                     </button>
                     <div class="ml-2">
                         <span class="o_we_url_success text-success d-none fa fa-lg fa-check" title="The URL seems valid."/>
-                        <span class="o_we_url_warning text-warning d-none fas fa-lg fa-exclamation-triangle" t-att-title="urlWarningTitle"/>
+                        <span class="o_we_url_warning text-warning d-none fa fa-lg fa-warning" t-att-title="urlWarningTitle"/>
                         <span class="o_we_url_error text-danger d-none fa fa-lg fa-times" title="The URL does not seem to work."/>
                     </div>
                 </div>
@@ -170,7 +170,7 @@
             <t t-set="urlWarningTitle">The URL does not contain any image. The file will be added in the document section.</t>
             <t t-if="widget.options.showQuickUpload" t-set="alternateUpload">
                 <button class="btn btn-primary o_we_quick_upload" type="button" title="Quick Upload">
-                    <i class="fas fa-fast-forward"/>
+                    <i class="fa fa-fast-forward"/>
                     <span class="sr-only">Quick Upload</span>
                 </button>
             </t>
@@ -194,7 +194,7 @@
                     <div class="form-group">
                         <label class="o_we_title_label" for="o_we_name_input">
                             Name
-                            <i class="far fa-question-circle" title="Give a relevant name to your file to optimize search engine results."/>
+                            <i class="fa fa-question-circle-o" title="Give a relevant name to your file to optimize search engine results."/>
                         </label>
                         <input type="text" class="form-control" id="o_we_name_input" name="filename" aria-describedby="nameHelp" t-att-value="widget.attachment.name" required="required"/>
                     </div>
@@ -205,7 +205,7 @@
                     <div t-else="1" class="form-group">
                         <label class="o_we_title_label" for="o_we_name_input">
                             Size
-                            <i class="far fa-question-circle" title="Reduce the size as much as possible to increase performance."/>
+                            <i class="fa fa-question-circle-o" title="Reduce the size as much as possible to increase performance."/>
                         </label>
                         <div class="form-row align-items-center">
                             <div class="col">
@@ -253,14 +253,14 @@
                                 <input type="checkbox" class="custom-control-input" id="o_we_optimize_quality" t-att-checked="widget.isExisting ? undefined : 'checked'" aria-describedby="toggleQualityHelp"/>
                                 <label class="custom-control-label" for="o_we_optimize_quality">
                                     Optimize
-                                    <i class="far fa-question-circle" title="This reduces the quality to increase performance."/>
+                                    <i class="fa fa-question-circle-o" title="This reduces the quality to increase performance."/>
                                 </label>
                             </div>
                         </t>
                         <t t-else="1">
                             <label class="o_we_title_label" for="o_we_quality_input">
                                 Quality
-                                <i class="far fa-question-circle" title="Reduce the quality as much as possible to increase performance."/>
+                                <i class="fa fa-question-circle-o" title="Reduce the quality as much as possible to increase performance."/>
                             </label>
                             <div class="form-row align-items-center">
                                 <div class="col-sm-10">
@@ -329,7 +329,7 @@
     <t t-name="wysiwyg.widgets.file.existing.remove">
         <t t-set="removeTitle" t-if="attachment.res_model === 'ir.ui.view'">This file is a public view attachment.</t>
         <t t-set="removeTitle" t-else="">This file is attached to the current record.</t>
-        <i class="far fa-trash-alt o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle"/>
+        <i class="fa fa-trash o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle"/>
     </t>
 
     <t t-name="wysiwyg.widgets.image.existing.error">
@@ -537,15 +537,15 @@
                    <button type="button" class="btn btn-secondary" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></button>
                </div>
                <div class="btn-group" role="group">
-                   <button type="button" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fas fa-undo"/></button>
-                   <button type="button" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fas fa-redo"/></button>
+                   <button type="button" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></button>
+                   <button type="button" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></button>
                </div>
                <div class="btn-group" role="group">
-                   <button type="button" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fas fa-arrows-alt-h"/></button>
-                   <button type="button" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fas fa-arrows-alt-v"/></button>
+                   <button type="button" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></button>
+                   <button type="button" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></button>
                </div>
                <div class="btn-group" role="group">
-                   <button type="button" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fas fa-sync"/> Reset Image</button>
+                   <button type="button" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</button>
                </div>
            </div>
        </t>
diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index 923bcf3415e..612277bcd08 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -236,7 +236,7 @@ QUnit.module('web_editor', {}, function () {
             var pText = $field.find('.note-editable p').first().contents()[0];
             Wysiwyg.setRange(pText, 1);
 
-            await testUtils.dom.click($field.find('.note-toolbar .note-insert button:has(.fa-file-image)'));
+            await testUtils.dom.click($field.find('.note-toolbar .note-insert button:has(.fa-file-image-o)'));
 
             // load static xml file (dialog, media dialog, unsplash image widget)
             await defMediaDialog;
@@ -287,19 +287,19 @@ QUnit.module('web_editor', {}, function () {
             var pText = $field.find('.note-editable p').first().contents()[0];
             Wysiwyg.setRange(pText, 1);
 
-            await testUtils.dom.click($field.find('.note-toolbar .note-insert button:has(.fa-file-image)'));
+            await testUtils.dom.click($field.find('.note-toolbar .note-insert button:has(.fa-file-image-o)'));
 
             // load static xml file (dialog, media dialog, unsplash image widget)
             await defMediaDialog;
             $('.modal .tab-content .tab-pane').removeClass('fade'); // to be sync in test
             await testUtils.dom.click($('.modal a[aria-controls="editor-media-icon"]'));
-            await testUtils.dom.click($('.modal #editor-media-icon .font-icons-icon.fa-glass-martini'));
+            await testUtils.dom.click($('.modal #editor-media-icon .font-icons-icon.fa-glass'));
             await testUtils.dom.click($('.modal .modal-footer button.btn-primary'));
 
             var $editable = form.$('.oe_form_field[name="body"] .note-editable');
 
             assert.strictEqual($editable.data('wysiwyg').getValue(),
-                '<p>t<span class="fa fa-glass-martini"></span>oto toto toto</p><p>tata</p>',
+                '<p>t<span class="fa fa-glass"></span>oto toto toto</p><p>tata</p>',
                 "should have the image in the dom");
 
             testUtils.mock.unpatch(MediaDialog);
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index a63a43d27c1..a4e814a0f68 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -31,7 +31,7 @@ MockServer.include({
                         '        <button data-color="delta"></button>' +
                         '        <button data-color="epsilon"></button>' +
                         '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="far fa-eye-slash">' +
+                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">' +
                         '        <button class="o_btn_transparent"></button>' +
                         '        <button data-color="black-25"></button>' +
                         '        <button data-color="black-50"></button>' +
@@ -82,7 +82,7 @@ MockServer.include({
                         '        <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>' +
                         '    </div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="far fa-image"/> Background Image</we-button>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
                         '        <we-select string="Alignment">' +
@@ -199,7 +199,7 @@ function wysiwygData(data) {
                         '        <button data-color="delta"></button>' +
                         '        <button data-color="epsilon"></button>' +
                         '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="far fa-eye-slash">' +
+                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">' +
                         '        <button class="o_btn_transparent"></button>' +
                         '        <button data-color="black-25"></button>' +
                         '        <button data-color="black-50"></button>' +
@@ -251,7 +251,7 @@ function wysiwygData(data) {
                         '        <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>' +
                         '    </div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="far fa-image"/> Background Image</we-button>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
                         '        <we-select string="Alignment">' +