[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>

20 files changed, 110 insertions, 108 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index bf7960cc13d..d159c10ee16 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1678,7 +1678,7 @@ options.registry.anchor = options.Class.extend({
             buttons.push({
                 text: _t("Remove"),
                 classes: 'btn-link ml-auto',
-                icon: 'fa-trash',
+                icon: 'fa-trash-alt',
                 close: true,
                 click: function () {
                     self._setAnchorName();
diff --git a/addons/website/static/src/js/menu/content.js b/addons/website/static/src/js/menu/content.js
index 1652dabc9e6..0de22ca0059 100644
--- a/addons/website/static/src/js/menu/content.js
+++ b/addons/website/static/src/js/menu/content.js
@@ -49,7 +49,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
         if (options.fromPageManagement) {
             buttons.push({
                 text: _t("Go To Page"),
-                icon: 'fa-globe',
+                icon: 'fa-globe-americas',
                 classes: 'btn-link float-right',
                 click: function (e) {
                     window.location.href = '/' + self.page.url;
@@ -58,7 +58,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
         }
         buttons.push({
             text: _t("Delete Page"),
-            icon: 'fa-trash',
+            icon: 'far fa-trash-alt',
             classes: 'btn-link float-right',
             click: function (e) {
                 _deletePage.call(this, self.page_id, options.fromPageManagement);
@@ -160,8 +160,8 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({
             maxDate: moment().add(200, 'y'),
             calendarWeeks: true,
             icons : {
-                time: 'fa fa-clock-o',
-                date: 'fa fa-calendar',
+                time: 'far fa-clock',
+                date: 'far fa-calendar-alt',
                 next: 'fa fa-chevron-right',
                 previous: 'fa fa-chevron-left',
                 up: 'fa fa-chevron-up',
diff --git a/addons/website/static/src/js/menu/mobile_view.js b/addons/website/static/src/js/menu/mobile_view.js
index acfd28042c9..9e1745996e0 100644
--- a/addons/website/static/src/js/menu/mobile_view.js
+++ b/addons/website/static/src/js/menu/mobile_view.js
@@ -51,7 +51,7 @@ var MobileMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
      */
     _onMobilePreviewClick: function () {
         new MobilePreviewDialog(this, {
-            title: _t('Mobile preview') + ' <span class="fa fa-refresh"/>',
+            title: _t('Mobile preview') + ' <span class="fas fa-sync"/>',
         }).open();
     },
 });
diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index 8c544d790d7..14ce5260147 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -709,7 +709,7 @@ var ThemeCustomizeDialog = Dialog.extend({
     _updateStyle: function (enable, disable, reload) {
         var self = this;
 
-        var $loading = $('<i/>', {class: 'fa fa-refresh fa-spin'});
+        var $loading = $('<i/>', {class: 'fas fa-sync fa-spin'});
         this.$modal.find('.modal-title').append($loading);
 
         if (reload || config.isDebug('assets')) {
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index fd42d78a8bd..90326d9e837 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -109,8 +109,10 @@ table.editorbar-panel {
     }
 }
 
-// fontawesome
-.note-editable .fa {
+// 'Font Awesome 5 Free'
+.note-editable .fa,
+.note-editable .far,
+.note-editable .fas {
     cursor: pointer;
 }
 
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index 6e29659612c..6b598536d34 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -167,8 +167,7 @@ font[class*='bg-'] {
 }
 
 // Icons
-.fa {
-    font-family: "FontAwesome" !important;
+.fa, .far, .fas, .fab {
     $size: 3rem;
 
     &.rounded-circle,
@@ -492,14 +491,16 @@ table.table_desc tr td {
             outline: none;
             &:before {
                 content:'\f056';
-                font-family: 'FontAwesome';
+                font-family: 'Font Awesome 5 Free';
                 display: inline-block;
                 margin: 0 .5em 0 .75em;
                 color: $gray-600;
+                font-weight: 900;
             }
             &.collapsed:before {
                 content:'\f055';
-                font-family: 'FontAwesome';
+                font-family: 'Font Awesome 5 Free';
+                font-weight: 900;
             }
             &:hover,
             &:focus {
@@ -541,7 +542,7 @@ table.table_desc tr td {
         background-image: none;
         color: $body-color;
         &:before {
-            font-family: "FontAwesome";
+            font-family: "Font Awesome 5 Free";
             display: inline-block;
             background-color: #fff;
         }
@@ -570,6 +571,7 @@ table.table_desc tr td {
             font-size: 2rem;
             color: #fff;
             text-shadow: $box-shadow-sm;
+            font-weight: 900;
         }
         // Indicators
         .carousel-indicators li {
@@ -1023,28 +1025,27 @@ table.table_desc tr td {
 // Rating
 .s_rating {
     $star: "\f005";
-    $star-o: "\f006";
     $circle: "\f111";
-    $circle-o: "\f10c";
     $heart: "\f004";
-    $heart-o: "\f08a";
-    @mixin s_rating_generate_icons($off, $on) {
+    @mixin s_rating_generate_icons($icon) {
         .fa:before {
-            content: $off;
+            content: $icon;
+            font-weight: 400;
         }
         @for $counter from 5 to 0 {
             &.s_rating_#{$counter} {
                 .fa:nth-of-type(-n+#{$counter}):before {
-                    content: $on;
+                    content: $icon;
+                    font-weight: 900;
                 }
             }
         }
     }
-    > .s_rating_stars   { @include s_rating_generate_icons($star-o, $star);     }
-    > .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
-    > .s_rating_hearts  { @include s_rating_generate_icons($heart-o, $heart);   }
+    > .s_rating_stars   { @include s_rating_generate_icons($star); }
+    > .s_rating_squares { @include s_rating_generate_icons($circle); }
+    > .s_rating_hearts  { @include s_rating_generate_icons($heart); }
     > .s_rating_bar {
-        .fa {
+        .fa, .far, .fas, .fab {
             display: none;
         }
         .s_rating_bar {
@@ -1071,9 +1072,9 @@ table.table_desc tr td {
             }
         }
     }
-    > .s_rating_1x { .fa { font-size: 1em; }; }
-    > .s_rating_2x { .fa { font-size: 2em; }; }
-    > .s_rating_3x { .fa { font-size: 3em; }; }
+    > .s_rating_1x { .fa, .far, .fas, .fab { font-size: 1em; }; }
+    > .s_rating_2x { .fa, .far, .fas, .fab { font-size: 2em; }; }
+    > .s_rating_3x { .fa, .far, .fas, .fab { font-size: 3em; }; }
 }
 
 //
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 0027d792093..22f18fd9adc 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -34,7 +34,6 @@ body.o_connected_user {
     .o_menu_sections {
         .o_mobile_preview a {
             text-align: center;
-            font-size: 20px;
         }
     }
     .o_menu_systray {
@@ -52,7 +51,6 @@ body.o_connected_user {
 
         .o_mobile_preview a {
             text-align: center;
-            font-size: 20px;
         }
     }
     @include media-breakpoint-down(sm) {
@@ -135,7 +133,7 @@ body .modal {
                         font-weight: normal;
                         color: inherit;
 
-                        .fa {
+                        .fa, .far, .fas {
                             margin-left: $grid-gutter-width/2;
                         }
                     }
@@ -230,7 +228,8 @@ body .modal {
                         @include o-position-absolute(2px, 3px);
                         display: inline-block;
                         content: "\f00c";
-                        font-family: FontAwesome;
+                        font-family: 'Font Awesome 5 Free';
+                        font-weight: 900;
                         color: white;
                         font-size: 12px;
                     }
@@ -420,7 +419,7 @@ body .modal {
         padding: 0.45rem;
     }
     td {
-        > a.fa {
+        > a.fa, > a.far, > a.fas {
             margin-left: 5px;
             color: $o-brand-odoo;
         }
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 4e6fa2bc0c9..2d81ceebc32 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -41,7 +41,7 @@
             border: none;
             border-radius: 0;
 
-            .fa {
+            .fa, .far, .fas {
                 margin-right: $grid-gutter-width/4;
 
                 &.fa-times {
diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml
index 1063de39fed..a0cdbb14e26 100644
--- a/addons/website/static/src/xml/website.backend.xml
+++ b/addons/website/static/src/xml/website.backend.xml
@@ -7,7 +7,7 @@
 
     <t t-name="WidgetWebsiteButtonIcon">
         <button type="button" class="btn oe_stat_button">
-            <i class="fa fa-fw o_button_icon fa-globe"/>
+            <i class="fa fa-fw o_button_icon fa-globe-americas"/>
             <div class="o_stat_info">
                 <span class="o_stat_text">Go to<br/>Website</span>
             </div>
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index af318703b5c..c0b17590828 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -14,8 +14,8 @@
                 <i t-if="submenu.is_homepage" class="fa fa-home ml-3" role="img" aria-label="Home" title="Home"/>
             </span>
             <span class="input-group-append">
-                <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit Menu Item" title="Edit Menu Item"/>
-                <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete Menu Item" title="Delete Menu Item"/>
+                <button type="button" class="btn btn-primary js_edit_menu fas fa-edit" aria-label="Edit Menu Item" title="Edit Menu Item"/>
+                <button type="button" class="btn btn-danger js_delete_menu far fa-trash-alt" aria-label="Delete Menu Item" title="Delete Menu Item"/>
             </span>
         </div>
         <t t-set="children" t-value="submenu.children"/>
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 31ffb28704d..8309e9e3777 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -15,7 +15,7 @@
         <div id="web_editor-top-edit">
             <form class="navbar-form text-muted">
                 <button type="button" class="btn btn-secondary" data-action="cancel"><i class="fa fa-times"/> Discard</button>
-                <button type="button" class="btn btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button>
+                <button type="button" class="btn btn-primary" data-action="save"><i class="far fa-save"/> Save</button>
             </form>
         </div>
     </t>
@@ -51,7 +51,7 @@
     <t t-name="website.theme_customize_delete_font">
         <t t-set="delete_font_title">Delete this font</t>
         <button type="button"
-            class="btn btn-link d-flex align-items-center text-danger fa fa-trash-o o_theme_customize_delete_google_font"
+            class="btn btn-link d-flex align-items-center text-danger far fa-trash-alt o_theme_customize_delete_google_font"
             t-att-aria-label="delete_font_title"
             t-att-title="delete_font_title"
             t-att-data-font-index="index"/>
@@ -75,7 +75,7 @@
         <div class="o_theme_customize_input"
             t-att-data-variable="variable"
             t-att-data-unit="unit">
-            <i class="fa fa-edit"/>
+            <i class="fas fa-edit"/>
             <span/>
         </div>
     </t>
diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml
index 2ed91eb541b..2a10cd3ed77 100644
--- a/addons/website/static/src/xml/website.pageProperties.xml
+++ b/addons/website/static/src/xml/website.pageProperties.xml
@@ -110,7 +110,7 @@
                 <div class="form-group row">
                     <label class="control-label col-md-4" for="is_indexed">
                         Indexed
-                        <i class="fa fa-question-circle-o" title="Hide this page from search results" role="img" aria-label="Info"></i>
+                        <i class="far fa-question-circle" title="Hide this page from search results" role="img" aria-label="Info"></i>
                     </label>
                     <div class="col-md-2">
                         <label class="o_switch" for="is_indexed" >
@@ -134,7 +134,7 @@
                         <div class="input-group date" id="date_publish_container" data-target-input="nearest">
                             <input type="text" class="form-control datetimepicker-input" data-target="#date_publish_container" id="date_publish"/>
                             <div class="input-group-append" data-target="#date_publish_container" data-toggle="datetimepicker">
-                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
+                                <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
                             </div>
                         </div>
                     </div>
diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml
index de1fc86fa23..e2563999384 100644
--- a/addons/website/static/src/xml/website.seo.xml
+++ b/addons/website/static/src/xml/website.seo.xml
@@ -33,7 +33,7 @@
             <td class="text-center"><i class="js_seo_keyword_description fa fa-check" style="visibility: hidden;" t-attf-title="{{ widget.keyword }} is used in page description"/></td>
             <td class="text-center"><i t-if="widget.used_content" class="fa fa-check" t-attf-title="{{ widget.keyword }} is used in page content"/></td>
             <td class="o_seo_keyword_suggestion"/>
-            <td class="text-center"><a href="#" class="oe_remove" data-action="remove-keyword" t-attf-title="Remove {{ widget.keyword }}"><i class="fa fa-trash"/></a></td>
+            <td class="text-center"><a href="#" class="oe_remove" data-action="remove-keyword" t-attf-title="Remove {{ widget.keyword }}"><i class="far fa-trash-alt"/></a></td>
         </tr>
     </t>
 
@@ -60,13 +60,13 @@
             <div class="col-lg-6">
                 <div class="form-group">
                     <label for="website_meta_title">
-                        Title <i class="fa fa-question-circle-o" title="The title will take a default value unless you specify one."/>
+                        Title <i class="far fa-question-circle" title="The title will take a default value unless you specify one."/>
                     </label>
                     <input type="text" name="website_meta_title" id="website_meta_title" class="form-control" placeholder="Keep empty to use default value" maxlength="70" size="70"/>
                 </div>
                 <div class="form-group">
                     <label for="website_meta_description">
-                        Description <i class="fa fa-question-circle-o" t-att-title="widget.previewDescription"/>
+                        Description <i class="far fa-question-circle" t-att-title="widget.previewDescription"/>
                     </label>
                     <textarea name="website_meta_description" id="website_meta_description" placeholder="Keep empty to use default value" class="form-control"/>
                     <div class="alert alert-warning mt16 mb0 small" id="website_meta_description_warning" style="display: none;"/>
diff --git a/addons/website/static/src/xml/website.share.xml b/addons/website/static/src/xml/website.share.xml
index f07a2907492..fda80c2e050 100644
--- a/addons/website/static/src/xml/website.share.xml
+++ b/addons/website/static/src/xml/website.share.xml
@@ -4,7 +4,7 @@
         <div class="text-nowrap css_editable_mode_hidden">
             <t t-foreach="medias" t-as="media">
                 <a href="#"
-                    t-attf-class="fa fa-3x fa-#{media}-square text-#{media} oe_social_#{media}"
+                    t-attf-class="fab fa-3x fa-#{media}-square text-#{media} oe_social_#{media}"
                     t-att-title="media"
                     t-att-aria-label="media"/>
             </t>
diff --git a/addons/website/static/tests/website_tests.js b/addons/website/static/tests/website_tests.js
index 8d43100b9d5..c1bd30c3d9a 100644
--- a/addons/website/static/tests/website_tests.js
+++ b/addons/website/static/tests/website_tests.js
@@ -42,7 +42,7 @@ QUnit.module('website', {
         });
         var selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_stat_text';
         assert.containsN(form, selector, 1, "there should be one text displayed");
-        selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_button_icon.fa-globe.text-danger';
+        selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_button_icon.fa-globe-americas.text-danger';
         assert.containsOnce(form, selector, "there should be one icon in red");
         form.destroy();
     });
@@ -64,7 +64,7 @@ QUnit.module('website', {
         });
         var selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_stat_text';
         assert.containsN(form, selector, 1, "should be one text displayed");
-        selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_button_icon.fa-globe.text-success';
+        selector = '.oe_button_box .oe_stat_button[name="website_published"] .o_button_icon.fa-globe-americas.text-success';
         assert.containsOnce(form, selector, "there should be one text in green");
         form.destroy();
     });
diff --git a/addons/website/views/res_config_settings_views.xml b/addons/website/views/res_config_settings_views.xml
index 4e3ed15e006..5c603a7fbea 100644
--- a/addons/website/views/res_config_settings_views.xml
+++ b/addons/website/views/res_config_settings_views.xml
@@ -39,14 +39,14 @@
                         <!-- !! Every fields inside this container should be website specific (related to website record) !! -->
                         <div class="row mt16 o_settings_container" id="website_settings" attrs="{'invisible': [('website_id', '=', False)]}">
                             <div class="col-12 o_setting_box" id="website_action_setting" style="margin-left: 30px; margin-bottom: 16px;">
-                                <button name="website_go_to" type="object" string="Go to Website" class="btn btn-primary" icon="fa-globe"/>
+                                <button name="website_go_to" type="object" string="Go to Website" class="btn btn-primary" icon="fa-globe-americas"/>
                                 <button name="install_theme_on_current_website" type="object" string="Choose a theme" class="ml-2 btn btn-primary" icon="fa-paint-brush"/>
                                 <button name="%(website.action_website_add_features)d" type="action" string="Add features" class="ml-2 btn btn-secondary" icon="fa-plus"/>
                             </div>
                             <div class="col-12 col-lg-6 o_setting_box" id="domain_setting">
                                 <div class="o_setting_right_pane">
                                     <label for="website_name" string="Website Title"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Name and favicon of your website
                                     </div>
@@ -65,7 +65,7 @@
                             <div class="col-12 col-lg-6 o_setting_box" id="company_settings" groups="base.group_multi_company">
                                 <div class="o_setting_right_pane">
                                     <label string="Company" for="website_company_id"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         The company this website belongs to
                                     </div>
@@ -75,7 +75,7 @@
                             <div class="col-12 col-lg-6 o_setting_box" id="languages_setting">
                                 <div class="o_setting_right_pane">
                                     <label for="language_ids"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Languages available on your website
                                     </div>
@@ -98,7 +98,7 @@
                             <div class="col-12 col-lg-6 o_setting_box" id="domain_settings" groups="website.group_multi_website">
                                 <div class="o_setting_right_pane">
                                     <label string="Domain" for="website_domain"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Display this website when users visit this domain
                                     </div>
@@ -119,7 +119,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="auth_signup_uninvited"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Let your customers log in to see their documents
                                     </div>
@@ -134,7 +134,7 @@
                             <div class="col-12 col-lg-6 o_setting_box" id="website_logo_setting">
                                 <div class="o_setting_right_pane">
                                     <label for="website_logo"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Display this logo on the website.
                                     </div>
@@ -147,7 +147,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="has_google_analytics"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Track visits in Google Analytics
                                     </div>
@@ -197,7 +197,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="has_google_analytics_dashboard"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Follow your website traffic in Odoo.
                                     </div>
@@ -226,7 +226,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="specific_user_account"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Force your user to create an account per website
                                     </div>
@@ -239,7 +239,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="cdn_activated"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Use a CDN to optimize the availability of your website's content
                                     </div>
@@ -265,7 +265,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label string="Social Media" for="has_social_network"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Add links to social media on your website
                                     </div>
@@ -300,7 +300,7 @@
                             <div class="col-12 col-lg-6 o_setting_box" id="social_default_image_setting">
                                 <div class="o_setting_right_pane">
                                     <label string="Default Social Share Image" for="social_default_image"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         If set, replaces the company logo as the default social share image.
                                     </div>
@@ -328,7 +328,7 @@
                                 </div>
                                 <div class="o_setting_right_pane">
                                     <label for="has_google_maps"/>
-                                    <span class="fa fa-lg fa-globe" title="Values set here are website-specific." groups="website.group_multi_website"/>
+                                    <span class="fa fa-lg fa-globe-americas" title="Values set here are website-specific." groups="website.group_multi_website"/>
                                     <div class="text-muted">
                                         Use Google Map on your website (<a href="/contactus">Contact Us</a> page, snippets, ...)
                                     </div>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 103dd62cc4a..79fbc30e51b 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -115,12 +115,12 @@
         <div class="container">
             <div class="row">
                 <div class="col-lg-4 pt32 pb32 text-center">
-                    <i class="fa fa-3x fa-gear rounded-circle bg-gamma m-3"/>
+                    <i class="fas fa-3x fa-cog rounded-circle bg-gamma m-3"/>
                     <h3>First Feature</h3>
                     <p>Tell what's the value for the <br/>customer for this feature.</p>
                 </div>
                 <div class="col-lg-4 pt32 pb32 text-center">
-                    <i class="fa fa-3x fa-photo rounded bg-epsilon m-3"/>
+                    <i class="far fa-3x fa-image rounded bg-epsilon m-3"/>
                     <h3>Second Feature</h3>
                     <p>Write what the customer would like to know, <br/>not what you want to show.</p>
                 </div>
@@ -189,7 +189,7 @@
                 <div class="col-lg-8 offset-lg-2 pb24">
                     <figure class="figure">
                         <img src="/web/image/website.s_picture_default_image" class="figure-img img-fluid rounded img-thumbnail padding-large" alt="Odoo • A picture with a caption"/>
-                        <figcaption class="figure-caption py-3 text-center"><i class="fa fa-1x fa-picture-o mr-2"/>Add a caption to enhance the meaning of this image.</figcaption>
+                        <figcaption class="figure-caption py-3 text-center"><i class="far fa-1x fa-image mr-2"/>Add a caption to enhance the meaning of this image.</figcaption>
                     </figure>
                 </div>
             </div>
@@ -288,7 +288,7 @@
             <p class="card-text">A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
         </div>
         <div class="card-footer">
-            <i class="fa fa-1x fa-clock-o mr8"/><small>2 days ago</small>
+            <i class="far fa-1x fa-clock mr8"/><small>2 days ago</small>
         </div>
     </div>
 </template>
@@ -297,13 +297,13 @@
     <div t-attf-class="s_share #{_classes}">
         <h4 t-if="not _no_title" class="s_share_title">Share</h4>
         <a href="https://www.facebook.com/sharer/sharer.php?u={url}" t-attf-class="s_share_facebook #{_link_classes}" target="_blank">
-            <i t-attf-class="fa fa-1x fa-facebook #{not _link_classes and 'rounded shadow-sm'}"/>
+            <i t-attf-class="fab fa-1x fa-facebook-f #{not _link_classes and 'rounded shadow-sm'}"/>
         </a>
         <a href="https://twitter.com/intent/tweet?text={title}&amp;url={url}" t-attf-class="s_share_twitter #{_link_classes}" target="_blank">
-            <i t-attf-class="fa fa-1x fa-twitter #{not _link_classes and 'rounded shadow-sm'}"/>
+            <i t-attf-class="fab fa-1x fa-twitter #{not _link_classes and 'rounded shadow-sm'}"/>
         </a>
         <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url={url}&amp;title={title}&amp;" t-attf-class="s_share_linkedin #{_link_classes}" target="_blank">
-            <i t-attf-class="fa fa-1x fa-linkedin #{not _link_classes and 'rounded shadow-sm'}"/>
+            <i t-attf-class="fab fa-1x fa-linkedin-in #{not _link_classes and 'rounded shadow-sm'}"/>
         </a>
         <a href="mailto:?body={url}&amp;subject={title}" t-attf-class="s_share_email #{_link_classes}">
             <i t-attf-class="fa fa-1x fa-envelope #{not _link_classes and 'rounded shadow-sm'}"/>
@@ -608,21 +608,21 @@
                             <h5 class="text-primary">Add a great slogan.</h5>
                         </div>
                         <div class="col-lg-12 pt16 pb16" data-name="Box">
-                            <i class="fa fa-2x fa-font-awesome rounded-circle bg-primary s_features_grid_icon"/>
+                            <i class="fab fa-2x fa-font-awesome rounded-circle bg-primary s_features_grid_icon"/>
                             <div class="s_features_grid_content">
                                 <h4>Change Icons</h4>
                                 <p>Double click an icon to replace it with one of your choice.</p>
                             </div>
                         </div>
                         <div class="col-lg-12 pt16 pb16" data-name="Box">
-                            <i class="fa fa-2x fa-files-o rounded-circle bg-primary s_features_grid_icon"/>
+                            <i class="far fa-2x fa-copy rounded-circle bg-primary s_features_grid_icon"/>
                             <div class="s_features_grid_content">
                                 <h4>Duplicate</h4>
                                 <p>Duplicate blocks and columns to add more features.</p>
                             </div>
                         </div>
                         <div class="col-lg-12 pt16 pb16" data-name="Box">
-                            <i class="fa fa-2x fa-trash rounded-circle bg-primary s_features_grid_icon"/>
+                            <i class="fas fa-2x fa-trash-alt rounded-circle bg-primary s_features_grid_icon"/>
                             <div class="s_features_grid_content">
                                 <h4>Delete Blocks</h4>
                                 <p>Select and delete blocks to remove some features.</p>
@@ -644,14 +644,14 @@
                             </div>
                         </div>
                         <div class="col-lg-12 pt16 pb16" data-name="Box">
-                            <i class="fa fa-2x fa-eyedropper rounded bg-secondary s_features_grid_icon"/>
+                            <i class="fas fa-2x fa-eye-dropper rounded bg-secondary s_features_grid_icon"/>
                             <div class="s_features_grid_content">
                                 <h4>Edit Styles</h4>
                                 <p>You can edit colors and background to highlight features.</p>
                             </div>
                         </div>
                         <div class="col-lg-12 pt16 pb16" data-name="Box">
-                            <i class="fa fa-2x fa-picture-o rounded bg-secondary s_features_grid_icon"/>
+                            <i class="far fa-2x fa-image rounded bg-secondary s_features_grid_icon"/>
                             <div class="s_features_grid_content">
                                 <h4>Sample Icons</h4>
                                 <p>All these icons are completely free for commercial use.</p>
@@ -915,7 +915,7 @@
 
             <div id="snippet_feature" class="o_panel">
                 <div class="o_panel_header">
-                    <i class="fa fa-diamond"/> Features
+                    <i class="far fa-gem"/> Features
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/snippets_thumbs/s_image_gallery.png"/>
@@ -1045,9 +1045,9 @@
     <!-- STYLES | .s_rating -->
     <div data-selector=".s_rating > div">
         <we-select string="Icon">
-            <we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
-            <we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
-            <we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
+            <we-button data-select-class="s_rating_stars"><i class="fas fa-fw fa-star"/> Stars</we-button>
+            <we-button data-select-class="s_rating_squares"><i class="far fa-fw fa-square"/> Squares</we-button>
+            <we-button data-select-class="s_rating_hearts"><i class="fas fa-fw fa-heart"/> Hearts</we-button>
             <we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
         </we-select>
         <we-select string="Value">
@@ -1201,13 +1201,13 @@
     <!-- Move snippets around -->
     <div data-js="SnippetMove"
          data-selector="section">
-        <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
-        <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
+        <we-button class="fas fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fas fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
     </div>
     <div data-js="SnippetMove"
          data-selector=".row:not(.s_col_no_resize) > div">
-        <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
-        <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
+        <we-button class="fas fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fas fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
     </div>
 
     <!--  V-ALIGN -->
@@ -1235,7 +1235,7 @@
                 <we-button data-background-type="cover">Cover</we-button>
                 <we-button data-background-type="repeat-pattern">Repeat pattern</we-button>
             </we-select>
-            <we-button class="fa fa-fw fa-arrows" title="Background Position"
+            <we-button class="fas fa-fw fa-expand-arrows-alt" title="Background Position"
                        data-background-position-overlay="true" data-no-preview="true"/>
         </we-row>
         <we-input string="Background width" data-set-style="background-size" data-default-value="auto"/>
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index d4628378b68..6e21fe21f50 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -73,11 +73,11 @@
                     </li>
                     <!-- Mobile preview -->
                     <li class="o_mobile_preview" id="mobile-menu">
-                        <a data-action="show-mobile-preview" href="#"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-mobile"/></a>
+                        <a data-action="show-mobile-preview" href="#"><span title="Mobile preview" role="img" aria-label="Mobile preview" class="fas fa-mobile-alt"/></a>
                     </li>
                     <li groups="website.group_multi_website" t-if="multi_website_websites">
                         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
-                            <i class="fa fa-globe d-lg-none"/>
+                            <i class="fa fa-globe-americas d-lg-none"/>
                             <span class="d-none d-lg-inline-block">
                                 <t t-esc="multi_website_websites_current['name']"/>
                             </span>
@@ -106,7 +106,7 @@
                                 <div class="row">
                                     <div groups="website.group_website_designer" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_page" aria-label="New page" title="New page">
-                                            <i class="fa fa-file-o"/>
+                                            <i class="far fa-file"/>
                                             <p>New Page</p>
                                         </a>
                                     </div>
@@ -118,13 +118,13 @@
                                     </div>
                                     <div groups="base.group_system" name="module_website_event" t-att-data-module-id="env.ref('base.module_website_event').id" t-att-data-module-shortdesc="env.ref('base.module_website_event').shortdesc" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_event">
-                                            <i class="fa fa-glass"/>
+                                            <i class="fas fa-glass-martini"/>
                                             <p>New Event</p>
                                         </a>
                                     </div>
                                     <div groups="base.group_system" name="module_website_forum" t-att-data-module-id="env.ref('base.module_website_forum').id" t-att-data-module-shortdesc="env.ref('base.module_website_forum').shortdesc" class="col-md-4 mb8 o_new_content_element">
                                         <a href="#" data-action="new_forum">
-                                            <i class="fa fa-comment"/>
+                                            <i class="fas fa-comment"/>
                                             <p>New Forum</p>
                                         </a>
                                     </div>
@@ -157,7 +157,7 @@
                         </div>
                     </li>
                     <li t-if="not translatable" id="edit-page-menu">
-                        <a data-action="edit" href="#"><span class="fa fa-pencil mr-2"/>Edit</a>
+                        <a data-action="edit" href="#"><span class="fas fa-pencil-alt mr-2"/>Edit</a>
                     </li>
                     <li t-if="edit_in_backend or ('website_published' in main_object.fields_get() and main_object._name != 'website.page')">
                         <a role="button" class="btn btn-primary btn-sm dropdown-toggle css_edit_dynamic" data-toggle="dropdown">
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 016bddda3c9..24edb96f36c 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -376,15 +376,15 @@
                             <ul class="list-unstyled">
                                 <li><a href="/contactus">Contact us</a></li>
                                 <li><i class="fa fa-phone"/> <span class="o_force_ltr" t-field="res_company.phone"/></li>
-                                <li><i class="fa fa-envelope"/>  <span t-field="res_company.email"/></li>
+                                <li><i class="far fa-envelope"/>  <span t-field="res_company.email"/></li>
                             </ul>
                             <p>
-                                <a t-if="website.social_facebook" t-att-href="website.social_facebook" class="btn btn-sm btn-link"><i class="fa fa-2x fa-facebook-square"/></a>
-                                <a t-if="website.social_twitter" t-att-href="website.social_twitter" class="btn btn-sm btn-link"><i class="fa fa-2x fa-twitter"/></a>
-                                <a t-if="website.social_linkedin" t-att-href="website.social_linkedin" class="btn btn-sm btn-link"><i class="fa fa-2x fa-linkedin"/></a>
-                                <a t-if="website.social_youtube" t-att-href="website.social_youtube" class="btn btn-sm btn-link"><i class="fa fa-2x fa-youtube-play"/></a>
-                                <a t-if="website.social_github" t-att-href="website.social_github" class="btn btn-sm btn-link"><i class="fa fa-2x fa-github"/></a>
-                                <a t-if="website.social_instagram" t-att-href="website.social_instagram" class="btn btn-sm btn-link"><i class="fa fa-2x fa-instagram"/></a>
+                                <a t-if="website.social_facebook" t-att-href="website.social_facebook" class="btn btn-sm btn-link"><i class="fab fa-2x fa-facebook-square"/></a>
+                                <a t-if="website.social_twitter" t-att-href="website.social_twitter" class="btn btn-sm btn-link"><i class="fab fa-2x fa-twitter"/></a>
+                                <a t-if="website.social_linkedin" t-att-href="website.social_linkedin" class="btn btn-sm btn-link"><i class="fab fa-2x fa-linkedin-in"/></a>
+                                <a t-if="website.social_youtube" t-att-href="website.social_youtube" class="btn btn-sm btn-link"><i class="fab fa-2x fa-youtube"/></a>
+                                <a t-if="website.social_github" t-att-href="website.social_github" class="btn btn-sm btn-link"><i class="fab fa-2x fa-github"/></a>
+                                <a t-if="website.social_instagram" t-att-href="website.social_instagram" class="btn btn-sm btn-link"><i class="fab fa-2x fa-instagram"/></a>
                             </p>
                         </div>
                         <div class="col-lg-4">
@@ -965,7 +965,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
                 "widget": "contact",
                 "fields": ["name", "address", "phone", "mobile", "email"]}'/>
         <t t-if="not res_company.google_map_img()">
-            <span class="fa fa-map-marker fa-fw mt16" role="img" aria-label="Address" title="Address"/> <a t-att-href="res_company.google_map_link()" target="_BLANK"> Google Maps</a>
+            <span class="fas fa-map-marker-alt fa-fw mt16" role="img" aria-label="Address" title="Address"/> <a t-att-href="res_company.google_map_link()" target="_BLANK"> Google Maps</a>
         </t>
     </address>
     <t t-if="res_company.google_map_img()">
@@ -1030,9 +1030,9 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
                     <tr>
                       <th>Name</th>
                       <th>Url</th>
-                      <th class="text-center"><i title="Is the page included in the main menu?" class="fa fa-thumb-tack"></i></th>
-                      <th class="text-center"><i title="Is the page published?" class="fa fa-eye"></i></th>
-                      <th class="text-center"><i title="Is the page indexed by search engines?" class="fa fa-globe"></i></th>
+                      <th class="text-center"><i title="Is the page included in the main menu?" class="fas fa-thumbtack"></i></th>
+                      <th class="text-center"><i title="Is the page published?" class="far fa-eye"></i></th>
+                      <th class="text-center"><i title="Is the page indexed by search engines?" class="fa fa-globe-americas"></i></th>
                       <th class="text-center"><i title="Is the page SEO optimized?" class="fa fa-search"></i></th>
                       <th></th>
                     </tr>
@@ -1063,8 +1063,8 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
     <tr t-att-style='not final_page and "color:#999"'>
         <td>
             <t groups="website.group_multi_website">
-                <i t-if='specific_page and prev_page and prev_page.url == page.url and not prev_page.website_id' class="fa fa-level-up fa-rotate-90 ml32 mr4"/>
-                <i t-else="1" class="fa fa-globe mr4" t-att-style="'visibility:hidden;' if specific_page else ''"/>
+                <i t-if='specific_page and prev_page and prev_page.url == page.url and not prev_page.website_id' class="fas fa-level-up-alt fa-rotate-90 ml32 mr4"/>
+                <i t-else="1" class="fa fa-globe-americas mr4" t-att-style="'visibility:hidden;' if specific_page else ''"/>
             </t>
             <i t-if="page.is_homepage" class="fa fa-home" title="Home"/> <span t-esc="page.name"/>
         </td>
@@ -1078,7 +1078,7 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
         <td class="text-center">
             <t t-set='date_formatted'><t t-options='{"widget": "date"}' t-esc="page.date_publish"/></t>
             <i t-if="page.is_visible" class="fa fa-check" title="Visible"/>
-            <i t-elif="page.website_published" class="fa fa-eye-slash" t-attf-title="This page will be visible on {{ date_formatted }}"/>
+            <i t-elif="page.website_published" class="far fa-eye-slash" t-attf-title="This page will be visible on {{ date_formatted }}"/>
             <i t-else="" class="fa fa-times text-muted" title="Not visible"/>
         </td>
         <td class="text-center">
@@ -1093,8 +1093,8 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
             <a class="mr4 fa fa-cog js_page_properties" href="#" t-att-data-id="page.id" title="Manage this page"/>
             <a class="mr4 fa fa-search" t-attf-href="{{ page.url}}?enable_seo" title="Optimize SEO of this page"/>
             <a groups="base.group_no_one" class="mr4 fa fa-bug" t-attf-href="/web#id=#{page.view_id.id}&amp;view_type=form&amp;model=ir.ui.view" title="Edit code in backend"/>
-            <a class="mr4 fa fa-clone js_clone_page" t-att-data-id="page.id" href="#" title="Clone this page"/>
-            <a class="fa fa-trash js_delete_page" t-att-data-id="page.id" href="#" title="Delete this page"/>
+            <a class="mr4 far fa-clone js_clone_page" t-att-data-id="page.id" href="#" title="Clone this page"/>
+            <a class="far fa-trash-alt js_delete_page" t-att-data-id="page.id" href="#" title="Delete this page"/>
         </td>
     </tr>
 </template>
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index e70863e11af..1b7064c9d6a 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -142,8 +142,8 @@
                             <!-- displayed in grouped mode -->
                             <div class="oe_kanban_details">
                                 <div class="float-right">
-                                    <span class="fa fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
-                                    <span class="fa fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
+                                    <span class="far fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
+                                    <span class="far fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
                                 </div>
                                 <strong>
                                     <img t-if="record.country_id.raw_value"
@@ -180,11 +180,11 @@
                 <sheet>
                     <div class="oe_button_box" name="button_box">
                         <button class="oe_stat_button o_stat_button_info" attrs="{'invisible': [('is_connected', '=', False)]}">
-                            <i class="fa fa-fw o_button_icon fa-circle text-success"/>
+                            <i class="far fa-fw o_button_icon fa-circle text-success"/>
                             <span>Connected</span>
                         </button>
                         <button class="oe_stat_button o_stat_button_info" attrs="{'invisible': [('is_connected', '=', True)]}">
-                            <i class="fa fa-fw o_button_icon fa-circle text-danger"/>
+                            <i class="far fa-fw o_button_icon fa-circle text-danger"/>
                             <span>Offline</span>
                         </button>
                         <button id="w_visitor_visit_counter" class="oe_stat_button o_stat_button_info" icon="fa-globe">