[IMP] web: update to fontawesome 4.7.0 to 5.11.2

FontAwesome 5 introduced new names for some icons as described on
https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4#name-changes

This commit replaces the old names to the new ones.

closes odoo/odoo#35826

Taskid: 2050241
Related: odoo/enterprise#5180
Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>

15 files changed, 59 insertions, 50 deletions

diff --git a/addons/web_editor/controllers/main.py b/addons/web_editor/controllers/main.py
index 603509480f0..21471df1898 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/fonts/fontawesome-webfont.ttf'):
+    def export_icon_to_png(self, icon, color='#000', size=100, alpha=255, font='/web/static/lib/fontawesome/webfonts/fa-solid-900.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 855d6f48560..c82efe81d7b 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="fa fa-circle fa-stack-2x"></i>'
-                +    '<i class="fa fa-repeat fa-stack-1x fa-inverse"></i>'
+                +    '<i class="far fa-circle fa-stack-2x"></i>'
+                +    '<i class="fas fa-redo 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 9d8e0bab661..fa8de80e134 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: 'picture-o',
+          image: 'image',
           floatLeft: 'align-left',
           floatRight: 'align-right',
           floatNone: 'align-justify',
           shapeRounded: 'square',
-          shapeCircle: 'circle-o',
-          shapeThumbnail: 'picture-o',
+          shapeCircle: 'circle',
+          shapeThumbnail: 'image',
           shapeNone: 'times',
-          remove: 'trash-o'
+          remove: 'trash-alt'
         },
         link: {
           link: 'link',
@@ -117,7 +117,7 @@ define('summernote/defaults', function () {
         },
         history: {
           undo: 'undo',
-          redo: 'repeat'
+          redo: 'redo'
         },
         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 4482a8f67ba..228aefb42e6 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').each(function () {
+    $editable.find('.fa, .fas, .far').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 dc2d78a53c7..7055b9152b4 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 fa fa-floppy-o ' + ($elem.data('dirty') ? 'text-warning' : 'text-success'),
+                    class: 'mr8 far fa-save ' + ($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 913d35575ab..800cbf3829f 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -83,7 +83,7 @@ renderer.tplPopovers = function (lang, options) {
     //////////////// image popover
 
     // add center button for images
-    $(tplIconButton('fa fa-align-center', {
+    $(tplIconButton('fas fa-align-center', {
         title: _t('Center'),
         event: 'floatMe',
         value: 'center'
@@ -101,14 +101,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('fa fa-plus-square-o', {
+    $(tplIconButton('far fa-plus-square', {
         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('fa fa-sun-o', {
+    var $button = $(tplIconButton('far fa-sun', {
         title: _t('Shadow'),
         event: 'imageShape',
         value: 'shadow'
@@ -116,7 +116,7 @@ renderer.tplPopovers = function (lang, options) {
 
     // add spin for fa
     var $spin = $('<div class="btn-group d-none only_fa"/>').insertAfter($button.parent());
-    $(tplIconButton('fa fa-refresh', {
+    $(tplIconButton('fas fa-sync', {
             title: _t('Spin'),
             event: 'imageShape',
             value: 'fa-spin'
@@ -139,16 +139,16 @@ renderer.tplPopovers = function (lang, options) {
     // show dialog box and delete
     var $imageprop = $('<div class="btn-group"/>');
     $imageprop.appendTo($imagePopover.find('.popover-body'));
-    $(tplIconButton('fa fa-file-image-o', {
+    $(tplIconButton('far fa-file-image', {
             title: _t('Edit'),
             event: 'showImageDialog'
         })).appendTo($imageprop);
-    $(tplIconButton('fa fa-trash-o', {
+    $(tplIconButton('far fa-trash-alt', {
             title: _t('Remove'),
             event: 'delete'
         })).appendTo($imageprop);
 
-    $(tplIconButton('fa fa-crop', {
+    $(tplIconButton('fas fa-crop', {
         title: _t('Crop Image'),
         event: 'cropImage',
     })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-thumbnail"]'));
@@ -165,7 +165,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", "fa fa-link");
+    $linkPopover.find('button[data-event="showLinkDialog"] i').attr("class", "fas 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 06a282d0076..f6aa18a69f7 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-o";
+options.icons.image.image = "file-image";
 $.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 361355c4cab..0d4b67ec9c0 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').html('');
+        $editable.find('a.o_image, span.fa, i.fa, span.far, i.far, span.fas, i.fas').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 ddc6efd50b6..baac51c3adf 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -180,10 +180,11 @@ html[data-browser^="msie"] div.media_iframe_video iframe {
 
 // Fields
 address {
-    .fa.fa-mobile-phone {
+    .fa.fa-mobile-alt,
+    .fas.fa-mobile-alt {
         margin: 0 3px 0 2px;
     }
-    .fa.fa-file-text-o {
+    .far.fa-file-alt {
         margin-right: 1px;
     }
 }
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index f47cb99b055..ebd84429fa9 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -363,6 +363,7 @@ 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 f95c74a43c4..24cdd58a221 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -227,7 +227,8 @@ body.editor_enable.editor_has_snippets {
                 width: 1em;
                 right: 0.5em;
                 text-align: center;
-                font-family: FontAwesome;
+                font-family: 'Font Awesome 5 Free';
+                font-weight: 900;
             }
         }
 
@@ -515,7 +516,7 @@ body.editor_enable.editor_has_snippets {
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    font-family: FontAwesome !important;
+                    font-family: 'Font Awesome 5 Free' !important;
                     color: $o-we-color-success;
                 }
 
@@ -679,7 +680,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: FontAwesome;
+                    font-family: 'Font Awesome 5 Free';
                     background-color: darken($o-we-handles-accent-color, 20%);
                     color: white;
                 }
@@ -696,12 +697,14 @@ body.editor_enable.editor_has_snippets {
 
                 &.w:after,
                 &.e:after {
-                    content: "\f07e";
+                    content: "\f337";
+                    font-weight: 900;
                 }
 
                 &.s:after,
                 &.n:after {
-                    content: "\f07d";
+                    content: "\f338";
+                    font-weight: 900;
                 }
 
                 &.o_handle_start {
@@ -709,11 +712,13 @@ body.editor_enable.editor_has_snippets {
                     &.w:after,
                     &.e:after {
                         content: '\f061';
+                        font-weight: 900;
                     }
 
                     &.n:after,
                     &.s:after {
                         content: '\f063';
+                        font-weight: 900;
                     }
                 }
 
@@ -722,11 +727,13 @@ body.editor_enable.editor_has_snippets {
                     &.w:after,
                     &.e:after {
                         content: '\f060';
+                        font-weight: 900;
                     }
 
                     &.n:after,
                     &.s:after {
                         content: '\f062';
+                        font-weight: 900;
                     }
                 }
 
@@ -771,7 +778,7 @@ body.editor_enable.editor_has_snippets {
                 &::before, &::after {
                     content: '\f141';
                     display: block;
-                    font-family: FontAwesome;
+                    font-family: 'Font Awesome 5 Free';
                     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 b1f5835c599..658bef34353 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="fa fa-fw fa-clone oe_snippet_clone"
+                    <we-button class="far fa-copy fa-fw oe_snippet_clone"
                                 title="Duplicate Container"
                                 aria-label="Duplicate Container"/>
-                    <we-button class="fa fa-fw fa-trash oe_snippet_remove"
+                    <we-button class="far fa-trash-alt fa-fw 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 f48f2474672..55411846746 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 fa fa-lg fa-warning" t-att-title="urlWarningTitle"/>
+                        <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_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="fa fa-fast-forward"/>
+                    <i class="fas 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="fa fa-question-circle-o" title="Give a relevant name to your file to optimize search engine results."/>
+                            <i class="far fa-question-circle" 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="fa fa-question-circle-o" title="Reduce the size as much as possible to increase performance."/>
+                            <i class="far fa-question-circle" 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="fa fa-question-circle-o" title="This reduces the quality to increase performance."/>
+                                    <i class="far fa-question-circle" 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="fa fa-question-circle-o" title="Reduce the quality as much as possible to increase performance."/>
+                                <i class="far fa-question-circle" 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="fa fa-trash o_existing_attachment_remove p-2" t-att-title="removeTitle" role="img" t-att-aria-label="removeTitle"/>
+        <i class="far fa-trash-alt 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="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>
+                   <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>
                </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="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>
+                   <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>
                </div>
                <div class="btn-group" role="group">
-                   <button type="button" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</button>
+                   <button type="button" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fas fa-sync"/> 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 612277bcd08..923bcf3415e 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-o)'));
+            await testUtils.dom.click($field.find('.note-toolbar .note-insert button:has(.fa-file-image)'));
 
             // 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-o)'));
+            await testUtils.dom.click($field.find('.note-toolbar .note-insert button:has(.fa-file-image)'));
 
             // 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'));
+            await testUtils.dom.click($('.modal #editor-media-icon .font-icons-icon.fa-glass-martini'));
             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"></span>oto toto toto</p><p>tata</p>',
+                '<p>t<span class="fa fa-glass-martini"></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 d5356f3b64d..91be2728d8a 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="fa fa-eye-slash">' +
+                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="far fa-eye-slash">' +
                         '        <button class="o_btn_transparent"></button>' +
                         '        <button data-color="black-25"></button>' +
                         '        <button data-color="black-50"></button>' +
@@ -80,7 +80,7 @@ MockServer.include({
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
                         '    <div data-js="colorpicker" string="Background Color" data-selector=".test_option_all"></div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="far fa-image"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
                         '        <we-select string="Alignment">' +
@@ -197,7 +197,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="fa fa-eye-slash">' +
+                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="far fa-eye-slash">' +
                         '        <button class="o_btn_transparent"></button>' +
                         '        <button data-color="black-25"></button>' +
                         '        <button data-color="black-50"></button>' +
@@ -247,7 +247,7 @@ function wysiwygData(data) {
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
                         '    <div data-js="colorpicker" string="Background Color" data-selector=".test_option_all"></div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
+                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="far fa-image"/> Background Image</we-button>' +
                         '    </div>' +
                         '    <div data-js="option_test" data-selector=".s_hr">' +
                         '        <we-select string="Alignment">' +