From f90cf060a3cfeb37a67bec83264c0aaab8892b56 Mon Sep 17 00:00:00 2001
From: kujiu <kujiu@users.noreply.github.com>
Date: Wed, 4 Jul 2018 09:55:52 +0200
Subject: [PATCH] [FIX] Syntax of icons (#25577)

Description of the issue/feature this PR addresses:

Accessibility improvements forbids the use of the syntax
`<i class="fa fa-check"/> Some text`
to create a labelled icon. But, by this, some fonts are changed.

Desired behavior after PR is merged:
The old syntax can be used.
---
 .../static/src/xml/account_reconciliation.xml |    2 +-
 addons/account/views/account_view.xml         |    2 +-
 .../views/account_analytic_default_view.xml   |    2 +-
 .../views/account_portal_templates.xml        |    6 +-
 .../views/res_config_settings_views.xml       |    2 +-
 addons/event/views/event_views.xml            |    3 +-
 .../views/res_config_settings_views.xml       |    2 +-
 .../static/src/xml/attendance.xml             |    4 +-
 addons/iap/static/src/xml/iap_templates.xml   |    4 +-
 addons/lunch/static/src/xml/lunch.xml         |    3 +-
 addons/mail/static/src/xml/activity.xml       |   10 +-
 addons/mail/static/src/xml/discuss.xml        |   16 +-
 addons/mail/static/src/xml/followers.xml      |   10 +-
 addons/mail/static/src/xml/systray.xml        |    9 +-
 .../static/src/xml/web_kanban_activity.xml    |    2 +-
 .../mail/wizard/mail_resend_message_views.xml |    2 +-
 .../static/src/xml/mass_mailing.xml           |    2 +-
 addons/mass_mailing/views/snippets_themes.xml |    8 +-
 .../views/snippets_themes_options.xml         |    2 +-
 addons/payment/data/payment_acquirer_data.xml |   48 +-
 .../views/payment_portal_templates.xml        |    2 +-
 addons/payment/views/payment_templates.xml    |    2 +-
 addons/point_of_sale/static/src/xml/pos.xml   |   29 +-
 addons/point_of_sale/views/pos_templates.xml  |    2 +-
 addons/portal/views/portal_templates.xml      |    3 +-
 .../static/src/xml/discount_templates.xml     |    2 +-
 .../views/pos_config_setting_views.xml        |    2 +-
 addons/pos_reprint/static/src/xml/reprint.xml |    5 +-
 .../pos_restaurant/static/src/xml/floors.xml  |    2 +-
 .../static/src/xml/multiprint.xml             |    3 +-
 .../pos_restaurant/static/src/xml/notes.xml   |    2 +-
 .../static/src/xml/printbill.xml              |   11 +-
 .../static/src/xml/splitbill.xml              |    8 +-
 .../views/project_rating_templates.xml        |    6 +-
 addons/project/views/project_views.xml        |    2 +-
 addons/purchase/views/portal_templates.xml    |    2 +-
 addons/sale/views/sale_portal_templates.xml   |   16 +-
 .../views/sale_portal_templates.xml           |    8 +-
 .../views/sale_stock_portal_template.xml      |    8 +-
 addons/survey/views/survey_result.xml         |   21 +-
 .../fontawesome/css/font-awesome-suffix.css   | 2145 -----------------
 addons/web/static/src/xml/base.xml            |   16 +-
 addons/web/views/database_manager.html        |    1 -
 addons/web/views/report_templates.xml         |    1 -
 addons/web/views/webclient_templates.xml      |    1 -
 addons/web_editor/static/src/xml/ace.xml      |    2 +-
 addons/web_editor/static/src/xml/editor.xml   |    8 +-
 addons/web_editor/static/src/xml/snippets.xml |    2 +-
 addons/web_editor/views/snippets.xml          |    2 +-
 .../static/src/xml/dashboard.xml              |    4 +-
 addons/website/data/website_demo.xml          |    4 +-
 addons/website/static/src/js/tours/rte.js     |    2 +-
 .../static/src/xml/website.contentMenu.xml    |    2 +-
 addons/website/views/snippets.xml             |   52 +-
 .../views/website_navbar_templates.xml        |    6 +-
 addons/website/views/website_templates.xml    |    4 +-
 .../views/website_blog_templates.xml          |    4 +-
 .../website_crm_partner_assign_templates.xml  |    6 +-
 .../views/website_customer_templates.xml      |    2 +-
 .../website_event/views/event_templates.xml   |   18 +-
 addons/website_forum/views/website_forum.xml  |    6 +-
 .../static/src/xml/website.gengo.xml          |   14 +-
 .../website_hr_recruitment_templates.xml      |   26 +-
 .../views/website_hr_recuitment_snippets.xml  |    8 +-
 .../website_mail_channel/views/snippets.xml   |    6 +-
 .../views/website_mail_channel_templates.xml  |   10 +-
 .../website_quote/data/website_quote_demo.xml |   24 +-
 .../views/website_quote_templates.xml         |   12 +-
 addons/website_sale/views/templates.xml       |   44 +-
 .../website_sale_comparison_template.xml      |    4 +-
 .../views/website_sale_wishlist_template.xml  |    2 +-
 .../static/src/xml/website_slides.xml         |    2 +-
 .../views/res_config_settings_views.xml       |    2 +-
 .../website_slides/views/website_slides.xml   |   34 +-
 .../views/website_slides_embed.xml            |    8 +-
 .../static/src/xml/website.twitter.xml        |    2 +-
 .../addons/base/tests/test_view_validation.py |    3 +
 odoo/tools/view_validation.py                 |   12 +
 78 files changed, 342 insertions(+), 2434 deletions(-)
 delete mode 100644 addons/web/static/lib/fontawesome/css/font-awesome-suffix.css

diff --git a/addons/account/static/src/xml/account_reconciliation.xml b/addons/account/static/src/xml/account_reconciliation.xml
index 68799648070..c41fa1f2478 100644
--- a/addons/account/static/src/xml/account_reconciliation.xml
+++ b/addons/account/static/src/xml/account_reconciliation.xml
@@ -205,7 +205,7 @@
         </tbody>
     </table>
     <div class="add_line_container">
-        <a class="add_line fa fa-plus-circle" t-att-style="!state.balance.amout ? 'display: none;' : null">Save and New</a>
+        <a class="add_line" t-att-style="!state.balance.amout ? 'display: none;' : null"><i class="fa fa-plus-circle"/> Save and New</a>
     </div>
 </div>
 
diff --git a/addons/account/views/account_view.xml b/addons/account/views/account_view.xml
index 63108d2edc5..56bade5ea3b 100644
--- a/addons/account/views/account_view.xml
+++ b/addons/account/views/account_view.xml
@@ -353,7 +353,7 @@
                                             </div>
                                         </div>
                                         <div class="content-group" attrs="{'invisible': [('alias_domain', '!=', False)]}">
-                                            <a type='action' name='%(action_open_settings)d' class="btn btn-sm btn-link" role="button"><span class="fa fa-fw o_button_icon fa-arrow-right"> Configure Email Servers</span></a>
+                                            <a type='action' name='%(action_open_settings)d' class="btn btn-sm btn-link" role="button"><i class="fa fa-fw o_button_icon fa-arrow-right"/> Configure Email Servers</a>
                                     </div>
                                     </group>
                                 </group>
diff --git a/addons/account_analytic_default/views/account_analytic_default_view.xml b/addons/account_analytic_default/views/account_analytic_default_view.xml
index 2d80a7ebd18..bc4e2a0bf39 100644
--- a/addons/account_analytic_default/views/account_analytic_default_view.xml
+++ b/addons/account_analytic_default/views/account_analytic_default_view.xml
@@ -57,7 +57,7 @@
                                     <strong><span><field name="analytic_id"/></span></strong>
                                     <img t-att-src="kanban_image('res.users', 'image_small', record.user_id.raw_value)" t-att-title="record.user_id.value" t-att-alt="record.user_id.value" width="24" height="24" class="oe_kanban_avatar pull-right"/>
                                 </div>
-                                <div t-if="record.date_start.value"><span class="fa fa-calendar"> From</span> <field name="date_start"/> <t t-if="record.date_stop.value">to <field name="date_stop"/></t></div>
+                                <div t-if="record.date_start.value"><i class="fa fa-calendar"></i> From <field name="date_start"/> <t t-if="record.date_stop.value">to <field name="date_stop"/></t></div>
                                 <div t-if="record.product_id.value"><strong>Product</strong> <field name="product_id"/> </div>
                                 <div t-if="record.partner_id.value"><strong>Customer</strong> <field name="partner_id"/> </div>
                             </div>
diff --git a/addons/account_payment/views/account_portal_templates.xml b/addons/account_payment/views/account_portal_templates.xml
index 6f00f6e750b..4e8314d9f20 100644
--- a/addons/account_payment/views/account_portal_templates.xml
+++ b/addons/account_payment/views/account_portal_templates.xml
@@ -73,15 +73,15 @@
             <div class="mb8 ml16 mr16">
                 <a t-if="invoice.state == 'open' and invoice.amount_total and invoice.type == 'out_invoice' and (pending_manual_txs or not tx_ids)"
                     class="btn btn-primary btn-block" data-toggle="modal" data-target="#pay_with">
-                    <span class="fa fa-arrow-circle-right">Pay Now</span>
+                    <i class="fa fa-arrow-circle-right"/> Pay Now
                 </a>
                 <a t-if="tx_ids and not pending_manual_txs and invoice.state != 'paid'"
                     class="btn btn-warning btn-block" disabled="disabled">
-                    <span class="fa fa-check-circle">Pending</span>
+                    <i class="fa fa-check-circle"/> Pending
                 </a>
                 <a t-if="invoice.state == 'paid'"
                     class="btn btn-success btn-block" disabled="disabled">
-                    <span class="fa fa-check-circle">Paid</span>
+                    <i class="fa fa-check-circle"/> Paid
                 </a>
             </div>
         </xpath>
diff --git a/addons/auth_oauth/views/res_config_settings_views.xml b/addons/auth_oauth/views/res_config_settings_views.xml
index 990f1028454..214f1701895 100644
--- a/addons/auth_oauth/views/res_config_settings_views.xml
+++ b/addons/auth_oauth/views/res_config_settings_views.xml
@@ -27,7 +27,7 @@
                                     <label for="auth_oauth_google_client_id" string="Client ID:" class="col-md-3 o_light_label"/>
                                     <field name="auth_oauth_google_client_id" placeholder="e.g. 1234-xyz.apps.googleusercontent.com"/>
                                 </div>
-                                <a class="fa fa-fw fa-arrow-right" href="https://www.odoo.com/documentation/user/online/general/auth/google.html" target="_blank">Tutorial</a>
+                                <a href="https://www.odoo.com/documentation/user/online/general/auth/google.html" target="_blank"><i class="fa fa-fw fa-arrow-right"/>Tutorial</a>
                             </div>
                         </div>
                     </div>
diff --git a/addons/event/views/event_views.xml b/addons/event/views/event_views.xml
index 229100cbb5d..935d486306f 100644
--- a/addons/event/views/event_views.xml
+++ b/addons/event/views/event_views.xml
@@ -327,7 +327,8 @@
                                     <h4 class="o_kanban_record_title"><field name="name"/></h4>
                                     <div>
                                         <t t-if="record.country_id.raw_value"> <b class="o_kanban_record_subtitle"> <field name="country_id"/> </b> <br/> </t>
-                                        <b class="fa fa-clock-o">To</b> <t t-esc="moment(record.date_end.raw_value).format('lll')"/>
+                                        <b><i class="fa fa-clock-o"/>
+                                        To</b> <t t-esc="moment(record.date_end.raw_value).format('lll')"/>
                                     </div>
                                     <h4>
                                         <a name="%(act_event_registration_from_event)d" type="action">
diff --git a/addons/google_calendar/views/res_config_settings_views.xml b/addons/google_calendar/views/res_config_settings_views.xml
index 8bcf1f467fe..9959ae612da 100644
--- a/addons/google_calendar/views/res_config_settings_views.xml
+++ b/addons/google_calendar/views/res_config_settings_views.xml
@@ -13,7 +13,7 @@
                             <label for="cal_client_secret" string="Client Secret" class="col-xs-3 col-md-3 o_light_label"/>
                             <field name="cal_client_secret" password="True" nolabel="1"/>
                         </div>
-                        <a href="https://www.odoo.com/documentation/user/11.0/crm/optimize/google_calendar_credentials.html" class="oe-link fa fa-fw fa-arrow-right" target="_blank">Tutorial</a>
+                        <a href="https://www.odoo.com/documentation/user/11.0/crm/optimize/google_calendar_credentials.html" class="oe-link" target="_blank"><i class="fa fa-fw fa-arrow-right"/>Tutorial</a>
                     </div>
                 </div>
             </field>
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index f2ae4b73cda..e9de1799dce 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -60,8 +60,8 @@
             <div class="o_hr_attendance_kiosk_mode">
                 <t t-set="checked_in" t-value="widget.employee_state=='checked_in'"/>
                 <div class="o_hr_attendance_back_button">
-                    <span class="btn btn-default btn-lg visible-xs"><span class="fa fa-chevron-left mr8"> Go back</span></span>
-                    <span class="btn btn-default hidden-xs"><i role="img" class="fa fa-chevron-left" aria-label="Go back" title="Go back"/></span>
+                    <span class="btn btn-default btn-lg visible-xs"><i class="fa fa-chevron-left mr8"/> Go back</span>
+                    <span class="btn btn-default hidden-xs"><i class="fa fa-chevron-left" role="img" aria-label="Go back" title="Go back"/></span>
                 </div>
                 <t t-if="widget.employee_id">
                     <div class="o_hr_attendance_user_badge o_home_menu_background">
diff --git a/addons/iap/static/src/xml/iap_templates.xml b/addons/iap/static/src/xml/iap_templates.xml
index 7503e0aa3f8..4995c4527e3 100644
--- a/addons/iap/static/src/xml/iap_templates.xml
+++ b/addons/iap/static/src/xml/iap_templates.xml
@@ -19,8 +19,8 @@
     <t t-extend="DashboardApps">
         <t t-jquery=".o_web_settings_dashboard_pills" t-operation="after">
             <div class="text-center" style="display: inline-block">
-                <a t-att-href="widget.data.url" target="_blank" class="fa fa-money fa-2x text-muted">
-                In-App Purchases</a>
+                <a t-att-href="widget.data.url" target="_blank">
+                <i class="fa fa-money fa-2x text-muted"/> In-App Purchases</a>
             </div>
         </t>
     </t>
diff --git a/addons/lunch/static/src/xml/lunch.xml b/addons/lunch/static/src/xml/lunch.xml
index 6b454f0b4ec..4efb8f9f5de 100644
--- a/addons/lunch/static/src/xml/lunch.xml
+++ b/addons/lunch/static/src/xml/lunch.xml
@@ -11,7 +11,8 @@
             <h3><t t-esc="supplier"/></h3>
             <div t-foreach='categories[supplier]' t-as='order' class="o_lunch_vignette">
                 <button type="button" class="pull-right o_add_button oe_edit_only oe_link" t-att-data-id="order.line_id">
-                    <span class="fa fa-plus-square">Add</span>
+                    <span class="fa fa-plus-square"></span>
+                    <span>Add</span>
                 </button>
                 <div>
                     <t t-esc="order.product_name"/>
diff --git a/addons/mail/static/src/xml/activity.xml b/addons/mail/static/src/xml/activity.xml
index d96db53ac41..5ed86b37614 100644
--- a/addons/mail/static/src/xml/activity.xml
+++ b/addons/mail/static/src/xml/activity.xml
@@ -3,8 +3,8 @@
     <t t-name="mail.activity_items">
         <div class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
             <a href="#" role="button" class="o_thread_date btn">
-                <span class="fa fa-fw fa-caret-down">
-                Planned activities</span>
+                <i class="fa fa-fw fa-caret-down"/>
+                Planned activities
                 <small class="o_chatter_planned_activities_summary ml8">
                     <span class="label img-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
                     <span class="label img-circle label-warning"><t t-esc="nbTodayActivities"/></span>
@@ -56,13 +56,13 @@
                         </div>
                         <div class="o_thread_message_tools btn-group">
                             <a role="button" href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
-                                <span class="fa fa-check">Mark Done</span>
+                                <i class="fa fa-check"/> Mark Done
                             </a>
                             <a role="button" href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
-                                <span class="fa fa-pencil">Edit</span>
+                                <i class="fa fa-pencil"/> Edit
                             </a>
                             <a role="button" href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
-                                <span class="fa fa-times">Cancel</span>
+                                <i class="fa fa-times"/> Cancel
                             </a>
                         </div>
                     </div>
diff --git a/addons/mail/static/src/xml/discuss.xml b/addons/mail/static/src/xml/discuss.xml
index 493d3c918aa..ff5d7d1d66a 100644
--- a/addons/mail/static/src/xml/discuss.xml
+++ b/addons/mail/static/src/xml/discuss.xml
@@ -30,13 +30,13 @@
         <div class="o_mail_discuss_sidebar">
             <div t-attf-class="o_mail_discuss_title_main o_mail_discuss_item #{(activeThreadID === 'mailbox_inbox') ? 'o_active': ''}"
                  data-thread-id="mailbox_inbox">
-                <span class="o_thread_name fa fa-inbox mr8">Inbox</span>
+                <span class="o_channel_name"><i class="fa fa-inbox mr8"/>Inbox</span>
                 <t t-set="counter" t-value="needactionCounter"/>
                 <t t-call="mail.discuss.SidebarCounter"/>
             </div>
             <div t-attf-class="o_mail_discuss_title_main o_mail_mailbox_title_starred o_mail_discuss_item #{(activeThreadID === 'mailbox_starred') ? 'o_active': ''}"
                  data-thread-id="mailbox_starred">
-                <span class="o_thread_name fa fa-star-o mr8">Starred</span>
+                <span class="o_channel_name"><i class="fa fa-star-o mr8"/>Starred</span>
                 <t t-set="counter" t-value="starredCounter"/>
                 <t t-call="mail.discuss.SidebarCounter"/>
             </div>
@@ -218,16 +218,20 @@
             <div class="o_mail_discuss_content"/>
             <div class="o_mail_mobile_tabs">
                 <div class="o_mail_mobile_tab" data-type="mailbox_inbox">
-                    <span class="o_tab_title fa fa-inbox">Inbox</span>
+                    <span class="fa fa-inbox"/>
+                    <span class="o_tab_title">Inbox</span>
                 </div>
                 <div class="o_mail_mobile_tab" data-type="dm">
-                    <span class="o_tab_title fa fa-user">Chat</span>
+                    <span class="fa fa-user"/>
+                    <span class="o_tab_title">Chat</span>
                 </div>
                 <div class="o_mail_mobile_tab" data-type="public">
-                    <span class="o_tab_title fa fa-users">Channels</span>
+                    <span class="fa fa-users"/>
+                    <span class="o_tab_title">Channels</span>
                 </div>
                 <div class="o_mail_mobile_tab" data-type="private">
-                    <span class="o_tab_title fa fa-eye-slash">Private Channels</span>
+                    <span class="fa fa-eye-slash"/>
+                    <span class="o_tab_title">Private Channels</span>
                 </div>
             </div>
         </div>
diff --git a/addons/mail/static/src/xml/followers.xml b/addons/mail/static/src/xml/followers.xml
index 89df5c48b2c..ae002a3c8ee 100644
--- a/addons/mail/static/src/xml/followers.xml
+++ b/addons/mail/static/src/xml/followers.xml
@@ -18,8 +18,10 @@
                 <div class="btn-group btn-group-sm o_subtypes_list">
                     <button class="btn btn-sm btn-link o_followers_follow_button o_followers_notfollow">
                         <span class="o_follow">Follow</span>
-                        <span class="fa fa-times o_followers_unfollow"> Unfollow</span>
-                        <span class="fa fa-check o_followers_following"> Following</span>
+                        <span class="fa fa-times o_followers_unfollow"/>
+                        <span class="o_followers_unfollow"> Unfollow</span>
+                        <span class="fa fa-check o_followers_following"/>
+                        <span class="o_followers_following"> Following</span>
                     </button><button class="btn btn-sm btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                         <span class="fa fa-bell" role="img" aria-label="Alarm menu" title="Alarm menu"/>
                     </button>
@@ -85,8 +87,8 @@
         </li>
     </t>
     <t t-name="mail.Followers.subtypes.warning">
-        <span class="text-warning" role="alert">
-            <span class="fa fa-warning"> Be careful with channels following internal notifications</span>
+        <span class="text-warning">
+            <i class="fa fa-warning"/> Be careful with channels following internal notifications
         </span>
     </t>
 
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index ae1d7f2879f..7f3d56d955d 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -27,13 +27,16 @@
                 <li role="menuitem" t-if="widget.isMobile()">
                     <div class="o_mail_mobile_tabs">
                         <div class="o_mail_mobile_tab o_filter_button active">
-                            <span class="o_tab_title fa fa-envelope">All</span>
+                            <span class="fa fa-envelope"/>
+                            <span class="o_tab_title">All</span>
                         </div>
                         <div class="o_mail_mobile_tab o_filter_button" data-filter='chat'>
-                            <span class="o_tab_title fa fa-user">Chat</span>
+                            <span class="fa fa-user"/>
+                            <span class="o_tab_title">Chat</span>
                         </div>
                         <div class="o_mail_mobile_tab o_filter_button" data-filter='channels'>
-                            <span class="o_tab_title fa fa-users">Channels</span>
+                            <span class="fa fa-users"/>
+                            <span class="o_tab_title">Channels</span>
                         </div>
                     </div>
                 </li>
diff --git a/addons/mail/static/src/xml/web_kanban_activity.xml b/addons/mail/static/src/xml/web_kanban_activity.xml
index 4493e4b9903..c3148f13e95 100644
--- a/addons/mail/static/src/xml/web_kanban_activity.xml
+++ b/addons/mail/static/src/xml/web_kanban_activity.xml
@@ -54,7 +54,7 @@
     </li>
     <li role="menuitem" class="o_schedule_activity text-center">
         <a role="button" class="btn btn-link btn-block">
-            <strong class="fa fa-plus fa-fw">Schedule an activity</strong>
+            <i class="fa fa-plus fa-fw"></i><strong>Schedule an activity</strong>
         </a>
     </li>
 </t>
diff --git a/addons/mail/wizard/mail_resend_message_views.xml b/addons/mail/wizard/mail_resend_message_views.xml
index d377e0d7ae6..970b56636b5 100644
--- a/addons/mail/wizard/mail_resend_message_views.xml
+++ b/addons/mail/wizard/mail_resend_message_views.xml
@@ -20,7 +20,7 @@
                             <field name="resend" widget="boolean_toggle"/>
                         </tree>
                     </field>
-                    <p attrs="{'invisible':[('has_cancel', '==', False)]}"> <span class="fa fa-info-circle"> Caution: It won't be possible to send this mail again to the recipients you did not select.</span></p>
+                    <p attrs="{'invisible':[('has_cancel', '==', False)]}"> <span class="fa fa-info-circle"/> Caution: It won't be possible to send this mail again to the recipients you did not select.</p>
                     <footer>
                         <button string="Resend to selected" name="resend_mail_action" type="object" class="btn-primary o_mail_send"/>
                         <button string="Ignore all failures" name="cancel_mail_action" type="object" class="btn-default" />
diff --git a/addons/mass_mailing/static/src/xml/mass_mailing.xml b/addons/mass_mailing/static/src/xml/mass_mailing.xml
index 0cb519ed16d..ae79ebff979 100644
--- a/addons/mass_mailing/static/src/xml/mass_mailing.xml
+++ b/addons/mass_mailing/static/src/xml/mass_mailing.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
     <div t-name="mass_mailing.theme_selector" class="o_mail_theme_selector">
         <a role="button" href="#" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
-            <span class="fa fa-paint-brush">Change Style</span>
+            <i class="fa fa-paint-brush"/> Change Style
         </a>
         <div class="dropdown-menu" role="menu">
             <li t-foreach="themes" t-as="theme">
diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 79bc68cdec9..e262c86329f 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -22,7 +22,7 @@
             </div>
             <div id="email_designer_default_headers" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-angle-double-up">Headers</span>
+                    <i class="fa fa-angle-double-up"/> Headers
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="mass_mailing.s_mail_block_header_social" t-thumbnail="/mass_mailing/static/src/img/blocks/block_header_social.png"/>
@@ -33,7 +33,7 @@
             </div>
             <div id="email_designer_default_body" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-clone">Body</span>
+                    <i class="fa fa-clone"/> Body
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="mass_mailing.s_mail_block_title_text" t-thumbnail="/mass_mailing/static/src/img/blocks/block_title_text.png"/>
@@ -51,7 +51,7 @@
             </div>
             <div id="email_designer_default_extra" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-plus">Marketing Content</span>
+                    <i class="fa fa-plus"/> Marketing Content
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="mass_mailing.s_mail_block_discount2" t-thumbnail="/mass_mailing/static/src/img/blocks/block_discount2.png"/>
@@ -62,7 +62,7 @@
             </div>
             <div id="email_designer_default_footer" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-angle-double-down">Footers</span>
+                    <i class="fa fa-angle-double-down"/> Footers
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="mass_mailing.s_mail_block_footer_social" t-thumbnail="/mass_mailing/static/src/img/blocks/block_footer_social.png"/>
diff --git a/addons/mass_mailing/views/snippets_themes_options.xml b/addons/mass_mailing/views/snippets_themes_options.xml
index 53a73d71156..0a2a4a7bf81 100644
--- a/addons/mass_mailing/views/snippets_themes_options.xml
+++ b/addons/mass_mailing/views/snippets_themes_options.xml
@@ -42,7 +42,7 @@
         data-selector="[data-oe-field='body_html'] > div:not(.o_layout), [data-oe-field='body_html'] .oe_structure > div, td, th"
         data-exclude=".o_mail_no_colorpicker, .o_mail_no_options">
         <li class="dropdown-submenu">
-            <a tabindex="-1" href="#"><span class="fa fa-eyedropper">Background Color</span></a>
+            <a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
             <ul class="dropdown-menu" role="menu">
                 <li></li>
             </ul>
diff --git a/addons/payment/data/payment_acquirer_data.xml b/addons/payment/data/payment_acquirer_data.xml
index da33107a13d..6338737f21a 100644
--- a/addons/payment/data/payment_acquirer_data.xml
+++ b/addons/payment/data/payment_acquirer_data.xml
@@ -22,8 +22,8 @@
                 A payment gateway to accept online payments via credit cards.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
             </ul>
         </field>
         <!-- https://www.buckaroo-payments.com/products/payment-methods/ -->
@@ -45,10 +45,10 @@
                 Ingenico Payment Services (formerly Ogone) supports credit cards, debit cards and bank transfers.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
-                <li><span class="fa fa-check">Subscriptions</span></li>
-                <li><span class="fa fa-check">Save Cards</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><i class="fa fa-check"/>Subscriptions</li>
+                <li><i class="fa fa-check"/>Save Cards</li>
             </ul>
         </field>
         <!-- https://payment-services.ingenico.com/~/media/files/130806_product_sheet_ingenico_collect_en.ashx?la=en -->
@@ -68,8 +68,8 @@
                 A payment gateway to accept online payments via credit cards, debit cards and bank transfers.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
             </ul>
         </field>
         <!-- https://www.adyen.com/payment-methods -->
@@ -94,11 +94,11 @@
                 A payment gateway to accept online payments via credit cards and e-checks.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
-                <li><span class="fa fa-check">Subscriptions</span></li>
-                <li><span class="fa fa-check">Save Cards</span></li>
-                <li><span class="fa fa-check">Manual Capture</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><i class="fa fa-check"/>Subscriptions</li>
+                <li><i class="fa fa-check"/>Save Cards</li>
+                <li><i class="fa fa-check"/>Manual Capture</li>
             </ul>
         </field>
         <!-- https://www.authorize.net/solutions/merchantsolutions/onlinemerchantaccount/ -->
@@ -134,8 +134,8 @@
                 A payment gateway from Atos Worldline to accept online payments via credit cards.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
             </ul>
         </field>
         <!-- http://sips.worldline.com/en-us/home/features/payment-types-and-acquirers.html -->
@@ -161,8 +161,8 @@
                 PayPal is the easiest way to accept payments via Paypal or credit cards.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
             </ul>
         </field>
         <!-- https://www.paypal.com/us/selfhelp/article/Which-credit-cards-can-I-accept-with-PayPal-Merchant-Services-FAQ1525#business -->
@@ -186,10 +186,10 @@
                 A payment gateway to accept online payments via credit cards.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
-                <li><span class="fa fa-check">Subscriptions</span></li>
-                <li><span class="fa fa-check">Save Cards</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
+                <li><i class="fa fa-check"/>Subscriptions</li>
+                <li><i class="fa fa-check"/>Save Cards</li>
             </ul>
         </field>
         <!--
@@ -215,7 +215,7 @@
                 A generic payment acquirer to send payment instructions to any payment acquirer.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
             </ul>
         </field>
     </record>
@@ -230,8 +230,8 @@
                 PayU India is an online payments solutions company serving the Indian market.
             </p>
             <ul class="list-inline">
-                <li><span class="fa fa-check">Online Payment</span></li>
-                <li><span class="fa fa-check">Payment Status Tracking</span></li>
+                <li><i class="fa fa-check"/>Online Payment</li>
+                <li><i class="fa fa-check"/>Payment Status Tracking</li>
             </ul>
         </field>
         <!-- https://www.payumoney.com/selfcare.html?userType=seller
diff --git a/addons/payment/views/payment_portal_templates.xml b/addons/payment/views/payment_portal_templates.xml
index 440f059e92e..09344458dcf 100644
--- a/addons/payment/views/payment_portal_templates.xml
+++ b/addons/payment/views/payment_portal_templates.xml
@@ -98,7 +98,7 @@
                                     </div>
                                 </div>
                                 <div class="col-sm-12">
-                                    <a role="button" t-attf-class="btn btn-#{status} pull-right" href="/my/home"><span class="fa fa-arrow-circle-right"> Back to My Account</span></a>
+                                    <a role="button" t-attf-class="btn btn-#{status} pull-right" href="/my/home"><i class="fa fa-arrow-circle-right"/> Back to My Account</a>
                                 </div>
                                 <div class="col-sm-6 col-sm-offset-6 text-muted mt16">
                                     <span t-field="tx.acquirer_id.image_small" t-att-title="tx.acquirer_id.name" role="img" t-att-aria-label="tx.acquirer_id.name" t-options='{"widget": "image", "style":"max-width: 60px; display: inline-block"}'/>
diff --git a/addons/payment/views/payment_templates.xml b/addons/payment/views/payment_templates.xml
index 12bdf773656..37fd5a2bc30 100644
--- a/addons/payment/views/payment_templates.xml
+++ b/addons/payment/views/payment_templates.xml
@@ -135,7 +135,7 @@
                             </t>
                         </label>
                         <button t-if="mode == 'manage'" name="delete_pm" t-att-value="pm.id" class="btn btn-primary btn-xs pull-right">
-                            <span class="fa fa-trash"> Delete</span>
+                            <i class="fa fa-trash"></i> Delete
                         </button>
                     </div>
                 </t>
diff --git a/addons/point_of_sale/static/src/xml/pos.xml b/addons/point_of_sale/static/src/xml/pos.xml
index a63581d43d2..12c01733bfd 100644
--- a/addons/point_of_sale/static/src/xml/pos.xml
+++ b/addons/point_of_sale/static/src/xml/pos.xml
@@ -293,7 +293,8 @@
             <div class="screen-content">
                 <div class="top-content">
                     <span class='button back'>
-                        <span class='fa fa-angle-double-left'>Back</span>
+                        <i class='fa fa-angle-double-left'></i>
+                        Back
                     </span>
                     <h1 class='product-name'><t t-esc="widget.get_product_name()" /></h1>
                 </div>
@@ -308,7 +309,8 @@
                         123.14 €
                     </div>
                     <div class='buy-product'>
-                        <span class='fa fa-suffix-angle-double-right'>Order </span>
+                        Order
+                        <i class='fa fa-angle-double-right'></i>
                     </div>
                 </div>
             </div>
@@ -474,7 +476,8 @@
             <div class="screen-content">
                 <section class="top-content">
                     <span class='button back'>
-                        <span class='fa fa-angle-double-left'>Cancel</span>
+                        <i class='fa fa-angle-double-left'></i>
+                        Cancel
                     </span>
                     <span class='searchbox'>
                         <input placeholder='Search Customers' />
@@ -486,7 +489,8 @@
                         <i class='fa fa-plus'></i>
                     </span>
                     <span class='button next oe_hidden highlight'>
-                        <span class='fa fa-angle-double-right'>Select Customer</span>
+                        Select Customer
+                        <i class='fa fa-angle-double-right'></i>
                     </span>
                 </section>
                 <section class="full-content">
@@ -639,11 +643,13 @@
             <div class='screen-content'>
                 <div class='top-content'>
                     <span class='button back'>
-                        <i class='fa fa-angle-double-left'>Back</i>
+                        <i class='fa fa-angle-double-left'></i>
+                        Back
                     </span>
                     <h1>Payment</h1>
                     <span class='button next'>
-                        <i class='fa fa-angle-double-right'>Validate</i>
+                        Validate
+                        <i class='fa fa-angle-double-right'></i>
                     </span>
                 </div>
                 <div class='left-content pc40 touch-scrollable scrollable-y'>
@@ -675,18 +681,18 @@
                         <t t-if='widget.pos.config.module_account_invoicing'>
                             <t t-if='widget.pos.get_order()'>
                                 <div t-attf-class='button js_invoice #{ widget.pos.get_order().is_to_invoice() ? "highlight" : ""} '>
-                                    <i class='fa fa-file-text-o'> Invoice</i>
+                                    <i class='fa fa-file-text-o' /> Invoice
                                 </div>
                             </t>
                         </t>
                         <t t-if='widget.pos.config.tip_product_id'>
                             <div class='button js_tip'>
-                                <i class='fa fa-heart'> Tip</i>
+                                <i class='fa fa-heart' /> Tip 
                             </div>
                         </t>
                         <t t-if='widget.pos.config.iface_cashdrawer'>
                             <div class='button js_cashdrawer'>
-                                <i class='fa fa-archive'> Open Cashbox</i>
+                                <i class='fa fa-archive' /> Open Cashbox
                             </div>
                         </t>
                      </div>
@@ -701,12 +707,13 @@
                 <div class='top-content'>
                     <h1>Change: <span class='change-value'>0.00</span></h1>
                     <span class='button next'>
-                        <span class='fa fa-suffix-angle-double-right'>Next Order </span>
+                        Next Order
+                        <i class='fa fa-angle-double-right'></i>
                     </span>
                 </div>
                 <div class="centered-content touch-scrollable">
                     <div class="button print">
-                        <i class='fa fa-print'> Print Receipt</i>
+                        <i class='fa fa-print'></i> Print Receipt
                     </div>
                     <div class="pos-receipt-container">
                     </div>
diff --git a/addons/point_of_sale/views/pos_templates.xml b/addons/point_of_sale/views/pos_templates.xml
index 953fab6db6b..57895f2637b 100644
--- a/addons/point_of_sale/views/pos_templates.xml
+++ b/addons/point_of_sale/views/pos_templates.xml
@@ -117,7 +117,7 @@
             <li data-choose-image="true" data-no-preview="true"><a href="#"><b>Set Custom Image...</b></a></li>
             <li class="hidden pos-use_default_logo" data-background=""><a href="#">Default company logo</a></li>
             <li class="divider"/>
-            <li data-toggle-class="pos-hidden"><a href="#"><i class="fa fa-eye-slash">Hide</i></a></li>
+            <li data-toggle-class="pos-hidden"><a href="#"><i class="fa fa-eye-slash"/>Hide</a></li>
         </div>
     </div>
 </template>
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 56cb88203f9..b24f813ff6c 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -343,7 +343,8 @@
                         </div>
                         <div class="clearfix">
                             <button type="submit" class="btn btn-primary pull-right mb32 ">
-                                <span class="fa fa-long-arrow-right">Confirm</span>
+                                Confirm
+                                <span class="fa fa-long-arrow-right" />
                             </button>
                         </div>
                     </div>
diff --git a/addons/pos_discount/static/src/xml/discount_templates.xml b/addons/pos_discount/static/src/xml/discount_templates.xml
index 8287f54f5a9..65a38afb97d 100644
--- a/addons/pos_discount/static/src/xml/discount_templates.xml
+++ b/addons/pos_discount/static/src/xml/discount_templates.xml
@@ -3,7 +3,7 @@
 
     <t t-name="DiscountButton">
         <div class='control-button js_discount'>
-            <i class='fa fa-tag'> Discount</i>
+            <i class='fa fa-tag' /> Discount
         </div>
     </t>
 
diff --git a/addons/pos_mercury/views/pos_config_setting_views.xml b/addons/pos_mercury/views/pos_config_setting_views.xml
index 83b850636d8..99f0f9d786f 100644
--- a/addons/pos_mercury/views/pos_config_setting_views.xml
+++ b/addons/pos_mercury/views/pos_config_setting_views.xml
@@ -10,7 +10,7 @@
                     <button name="%(pos_mercury.action_configuration_form)d" icon="fa-arrow-right" type="action" string="Vantiv Accounts" class="btn-link"/>
                 </div>
                 <div>
-                    <a href="https://www.odoo.com/page/point-of-sale-hardware#part_8" target="_blank"><span class="fa fa-fw fa-arrow-right">Buy a card reader</span></a>
+                    <a href="https://www.odoo.com/page/point-of-sale-hardware#part_8" target="_blank"><i class="fa fa-fw fa-arrow-right"/>Buy a card reader</a>
                 </div>
             </div>
         </field>
diff --git a/addons/pos_reprint/static/src/xml/reprint.xml b/addons/pos_reprint/static/src/xml/reprint.xml
index 8183db3e353..fa782fbd2f7 100644
--- a/addons/pos_reprint/static/src/xml/reprint.xml
+++ b/addons/pos_reprint/static/src/xml/reprint.xml
@@ -3,13 +3,14 @@
 
     <t t-name="ReprintButton">
         <div class='control-button js_reprint'>
-            <span class="fa fa-retweet"> Reprint Receipt</span>
+            <i class="fa fa-retweet"></i> Reprint Receipt
         </div>
     </t>
 
     <t t-name="ReprintReceiptScreenWidget" t-extend="ReceiptScreenWidget">
         <t t-jquery="div.top-content" t-operation="inner">
-            <span class='button back fa fa-angle-double-left'>
+            <span class='button back'>
+                <i class='fa fa-angle-double-left'></i>
                 Back
             </span>
         </t>
diff --git a/addons/pos_restaurant/static/src/xml/floors.xml b/addons/pos_restaurant/static/src/xml/floors.xml
index 7606ff776de..76ad7e321a0 100644
--- a/addons/pos_restaurant/static/src/xml/floors.xml
+++ b/addons/pos_restaurant/static/src/xml/floors.xml
@@ -34,7 +34,7 @@
 
     <t t-name="TransferOrderButton">
         <div class='control-button'>
-            <span class='fa fa-arrow-right' > Transfer</span>
+            <i class='fa fa-arrow-right' /> Transfer
         </div>
     </t>
 
diff --git a/addons/pos_restaurant/static/src/xml/multiprint.xml b/addons/pos_restaurant/static/src/xml/multiprint.xml
index 8a57465562a..282d07421c2 100644
--- a/addons/pos_restaurant/static/src/xml/multiprint.xml
+++ b/addons/pos_restaurant/static/src/xml/multiprint.xml
@@ -2,7 +2,8 @@
 <templates id="template" xml:space="preserve">
 
     <t t-name="SubmitOrderButton">
-        <span class="control-button order-submit fa fa-cutlery">
+        <span class="control-button order-submit">
+            <i class="fa fa-cutlery"></i>
             Order
         </span>
     </t>
diff --git a/addons/pos_restaurant/static/src/xml/notes.xml b/addons/pos_restaurant/static/src/xml/notes.xml
index 2ce586f266c..63bd9d8a1c3 100644
--- a/addons/pos_restaurant/static/src/xml/notes.xml
+++ b/addons/pos_restaurant/static/src/xml/notes.xml
@@ -13,7 +13,7 @@
 
     <t t-name="OrderlineNoteButton">
         <div class='control-button'>
-            <span class='fa fa-tag'> Note</span>
+            <i class='fa fa-tag' /> Note
         </div>
     </t>
     
diff --git a/addons/pos_restaurant/static/src/xml/printbill.xml b/addons/pos_restaurant/static/src/xml/printbill.xml
index 31a6e0772d2..4c6968b8ec2 100644
--- a/addons/pos_restaurant/static/src/xml/printbill.xml
+++ b/addons/pos_restaurant/static/src/xml/printbill.xml
@@ -6,16 +6,18 @@
             <div class='screen-content'>
                 <div class='top-content'>
                     <span class='button back'>
-                        <span class='fa fa-angle-double-left'> Back</span>
+                        <i class='fa fa-angle-double-left'></i>
+                        Back
                     </span>
                     <h1>Bill Printing</h1>
                     <span class='button next'>
-                        <span class='fa fa-suffix-angle-double-right'> Ok</span>
+                        Ok 
+                        <i class='fa fa-angle-double-right'></i>
                     </span>
                 </div>
                 <div class="centered-content">
                     <div class="button print">
-                        <span class='fa fa-print'> Print</span>
+                        <i class='fa fa-print'></i> Print 
                     </div>
                     <div class="pos-receipt-container">
                     </div>
@@ -26,7 +28,8 @@
 
     <t t-name="PrintBillButton">
         <span class="control-button order-printbill">
-            <span class="fa fa-print"> Bill</span>
+            <i class="fa fa-print"></i>
+            Bill
         </span>
     </t>
 
diff --git a/addons/pos_restaurant/static/src/xml/splitbill.xml b/addons/pos_restaurant/static/src/xml/splitbill.xml
index 8c5d8bc58b8..afca4071427 100644
--- a/addons/pos_restaurant/static/src/xml/splitbill.xml
+++ b/addons/pos_restaurant/static/src/xml/splitbill.xml
@@ -3,7 +3,8 @@
 
     <t t-name="SplitbillButton">
         <span class="control-button order-split">
-            <span class="fa fa-files-o"> Split</span>
+            <i class="fa fa-files-o"></i>
+            Split
         </span>
     </t>
 
@@ -57,7 +58,8 @@
             <div class='screen-content'>
                 <div class='top-content'>
                     <span class='button back'>
-                        <span class='fa fa-angle-double-left'> Back</span>
+                        <i class='fa fa-angle-double-left'></i>
+                        Back
                     </span>
                     <h1>Bill Splitting</h1>
                 </div>
@@ -73,7 +75,7 @@
                     </div>
                     <div class='paymentmethods'>
                         <div class='button payment'>
-                            <span class='fa fa-chevron-right'> Payment</span>
+                            <i class='fa fa-chevron-right' /> Payment
                         </div>
                     </div>
                 </div>
diff --git a/addons/project/views/project_rating_templates.xml b/addons/project/views/project_rating_templates.xml
index f1c0fa297a9..613b1eaa0a9 100644
--- a/addons/project/views/project_rating_templates.xml
+++ b/addons/project/views/project_rating_templates.xml
@@ -27,10 +27,10 @@
                                                 <span class="label label-default pull-right"><t t-esc="project.privacy_visibility"/></span>
                                                 <h4><t t-esc="project.name"/></h4>
                                                 <p t-if="project.date"  class="text-muted">
-                                                    <span class="fa fa-calendar"> End date</span> : <t t-esc="project.date"/>
+                                                    <i class="fa fa-calendar"/> End date : <t t-esc="project.date"/>
                                                 </p>
                                                 <p t-if="project.alias_name and project.alias_domain"  class="text-muted">
-                                                    <span class="fa fa-envelope"> Email</span> : <t t-esc="project.alias_name"/>@<t t-esc="project.alias_domain"/>
+                                                    <i class="fa fa-envelope"/> Email : <t t-esc="project.alias_name"/>@<t t-esc="project.alias_domain"/>
                                                 </p>
                                                 <div class="row">
                                                     <div class="col-md-6 text-center">
@@ -42,7 +42,7 @@
                                             <div class="caption">
                                                 <p>
                                                     <a role="button" t-att-href="'/project/rating/%s' % project.id" class="btn btn-primary btn-lg btn-block">
-                                                        <span class="fa fa-arrow-circle-right "> See the feedbacks</span>
+                                                        <i class="fa fa-arrow-circle-right "/> See the feedbacks
                                                     </a>
                                                 </p>
                                             </div>
diff --git a/addons/project/views/project_views.xml b/addons/project/views/project_views.xml
index b5a54bd0dc5..2c6e0b2c0c0 100644
--- a/addons/project/views/project_views.xml
+++ b/addons/project/views/project_views.xml
@@ -314,7 +314,7 @@
                                             <div t-if="record.rating_status.raw_value != 'no'" class="mt8 text-primary" title="Percentage of happy ratings over the past 30 days. Get rating details from the More menu." groups="project.group_project_rating">
                                                 <b>
                                                     <t t-if="record.percentage_satisfaction_project.value == -1">
-                                                        <span class="fa fa-smile-o"> No rating yet</span>
+                                                        <i class="fa fa-smile-o"/> No rating yet
                                                     </t>
                                                     <t t-if="record.percentage_satisfaction_project.value != -1">
                                                         <a name="action_view_all_rating" type="object" context="{'search_default_rating_last_30_days':1}">
diff --git a/addons/purchase/views/portal_templates.xml b/addons/purchase/views/portal_templates.xml
index ec5d49dc550..848ac578bd9 100644
--- a/addons/purchase/views/portal_templates.xml
+++ b/addons/purchase/views/portal_templates.xml
@@ -48,7 +48,7 @@
                 <span class="label label-info"><i class="fa fa-fw fa-file-text"/> Waiting for Bill</span>
               </t>
               <t t-if="order.state == 'cancel'">
-                <span class="label label-default fa fa-fw fa-remove"> Cancelled</span>
+                <span class="label label-default"><i class="fa fa-fw fa-remove"/> Cancelled</span>
               </t>
             </td>
             <td><span t-field="order.amount_total" t-options='{"widget": "monetary", "display_currency": order.currency_id}'/>
diff --git a/addons/sale/views/sale_portal_templates.xml b/addons/sale/views/sale_portal_templates.xml
index 91057c2c26c..cbba064ab9b 100644
--- a/addons/sale/views/sale_portal_templates.xml
+++ b/addons/sale/views/sale_portal_templates.xml
@@ -58,10 +58,10 @@
                         <td><span t-field="quotation.validity_date"/></td>
                         <td>
                           <t t-if="quotation.state == 'cancel'">
-                            <span class="label label-default"><span class="fa fa-fw fa-remove"> Cancelled</span></span>
+                            <span class="label label-default"><i class="fa fa-fw fa-remove"/> Cancelled</span>
                           </t>
                           <t t-if="quotation.is_expired">
-                            <span class="label label-default"><span class="fa fa-fw fa-clock-o"> Expired</span></span>
+                            <span class="label label-default"><i class="fa fa-fw fa-clock-o"/> Expired</span>
                           </t>
                         </td>
                         <td><span t-field="quotation.amount_total" t-options='{"widget": "monetary", "display_currency": quotation.pricelist_id.currency_id}'/>
@@ -138,23 +138,23 @@
                         <t t-else="">Order</t>
                         <span t-esc="order.name"/>
                         <t t-if="order.state == 'cancel'">
-                            <span class="label label-default"><span class="fa fa-fw fa-remove"> Cancelled</span></span>
+                            <span class="label label-default"><i class="fa fa-fw fa-remove"/> Cancelled</span>
                         </t>
                         <t t-if="order.state == 'done'">
-                            <span class="label label-success"><span class="fa fa-fw fa-check"> Done</span></span>
+                            <span class="label label-success"><i class="fa fa-fw fa-check" /> Done</span>
                         </t>
                     </h4>
                 </div>
                 <div class="col-md-6 col-sm-3 col-xs-3 hidden-print" id="o_portal_order_actions">
                     <t t-if="order.state == 'sent' and portal_confirmation == 'sign'" name="portal_confirmation_sign">
                         <a role="button" class="btn btn-primary ml8 pull-right" href="#portal_sign">
-                            <span class="fa fa-arrow-circle-right"> Accept &amp; Sign</span>
+                            <i class="fa fa-arrow-circle-right"/> Accept &amp; Sign
                         </a>
                     </t>
                     <t t-if="order.state == 'sale' and portal_confirmation == 'sign'">
                         <a role="button" class="btn btn-success ml8 pull-right" disabled="disabled"
                             t-attf-title="Order signed on #{order.confirmation_date} by #{order.partner_id.name}">
-                            <span class="fa fa-check-circle"> Signed</span>
+                            <i class="fa fa-check-circle"/> Signed
                         </a>
                     </t>
                     <a target="_blank" t-att-href="'/my/orders/pdf/%s?%s' % (order.id, keep_query())" class="ml8 pull-right mt4 mr8" title="Download">
@@ -192,10 +192,10 @@
                           <a t-att-href="report_url"><span t-esc="i.number"/></a>
                           <span class="text-muted" t-field="i.date_invoice"/>
                           <t t-if="i.state == 'paid'">
-                            <span class="label label-success orders_label_text_align"><span class="fa fa-fw fa-check"> Paid</span></span>
+                            <span class="label label-success orders_label_text_align"><i class="fa fa-fw fa-check"/> Paid</span>
                           </t>
                           <t t-if="i.state != 'paid'">
-                            <span class="label label-info orders_label_text_align"><span class="fa fa-fw fa-clock-o"> Waiting</span></span>
+                            <span class="label label-info orders_label_text_align"><i class="fa fa-fw fa-clock-o"/> Waiting</span>
                           </t>
                         </div>
                       </t>
diff --git a/addons/sale_payment/views/sale_portal_templates.xml b/addons/sale_payment/views/sale_portal_templates.xml
index a454367a7db..34616538902 100644
--- a/addons/sale_payment/views/sale_portal_templates.xml
+++ b/addons/sale_payment/views/sale_portal_templates.xml
@@ -4,12 +4,12 @@
             <t t-set="payment_tx_id" t-value="order.get_portal_last_transaction()"/>
             <t t-if="order.amount_total and not invoices and order.state in ('sent', 'sale') and portal_confirmation == 'pay' and payment_tx_id.state != 'done'" name="portal_confirmation_pay">
                 <a class="btn btn-primary ml8 pull-right" href="#portal_pay" role="button">
-                    <span class="fa fa-arrow-circle-right"> Pay Now</span>
+                    <i class="fa fa-arrow-circle-right"/> Pay Now
                 </a>
             </t>
             <t t-if="invoices and order.state in ('sale', 'done') and portal_confirmation == 'pay'">
                 <a role="button" class="btn btn-primary ml8 pull-right" disabled="disabled">
-                    <span class="fa fa-check-circle"> Done</span>
+                    <i class="fa fa-check-circle"/> Done
                 </a>
             </t>
         </xpath>
@@ -57,10 +57,10 @@
                         <span t-esc="tx.reference"/>
                         <span class="text-muted" t-field="tx.create_date"/>
                         <t t-if="tx.state == 'done'">
-                            <span class="label label-success orders_label_text_align"><span class="fa fa-fw fa-check"> Done</span></span>
+                            <span class="label label-success orders_label_text_align"><i class="fa fa-fw fa-check"/> Done</span>
                         </t>
                         <t t-if="tx.state != 'done'">
-                            <span class="label label-info orders_label_text_align"><span class="fa fa-fw fa-clock-o"> Waiting</span></span>
+                            <span class="label label-info orders_label_text_align"><i class="fa fa-fw fa-clock-o"/> Waiting</span>
                             <t t-if="tx.state_message"><br /><span t-esc="tx.state_message"/></t>
                         </t>
                     </div>
diff --git a/addons/sale_stock/views/sale_stock_portal_template.xml b/addons/sale_stock/views/sale_stock_portal_template.xml
index 1c2cbb396ac..0eca2cdd230 100644
--- a/addons/sale_stock/views/sale_stock_portal_template.xml
+++ b/addons/sale_stock/views/sale_stock_portal_template.xml
@@ -14,16 +14,16 @@
                             <a t-att-href="report_url"><span t-field="i.name"/></a>
                             <span class="text-muted" t-field="i.date" t-options='{"widget": "date"}'/>
                             <t t-if="i.state == 'done'">
-                                <span class="label label-success label-text-align"><span class="fa fa-fw fa-truck"> Shipped</span></span>
+                                <span class="label label-success label-text-align"><i class="fa fa-fw fa-truck"/> Shipped</span>
                             </t>
                             <t t-if="i.state == 'partially_available'">
-                                <span class="label label-warning label-text-align"><span class="fa fa-fw fa-clock-o"> Partially Available</span></span>
+                                <span class="label label-warning label-text-align"><i class="fa fa-fw fa-clock-o"/> Partially Available</span>
                             </t>
                             <t t-if="i.state == 'cancel'">
-                                <span class="label label-danger label-text-align"><span class="fa fa-fw fa-times"> Cancelled</span></span>
+                                <span class="label label-danger label-text-align"><i class="fa fa-fw fa-times"/> Cancelled</span>
                             </t>
                             <t t-if="i.state in ['draft', 'waiting', 'confirmed', 'assigned']">
-                                <span class="label label-info label-text-align"><span class="fa fa-fw fa-clock-o"> Preparation</span></span>
+                                <span class="label label-info label-text-align"><i class="fa fa-fw fa-clock-o"/> Preparation</span>
                             </t>
                         </div>
                     </t>
diff --git a/addons/survey/views/survey_result.xml b/addons/survey/views/survey_result.xml
index 02f66f1aa92..89c8e7768b9 100644
--- a/addons/survey/views/survey_result.xml
+++ b/addons/survey/views/survey_result.xml
@@ -11,7 +11,7 @@
                     <div t-field="survey.description" class="oe_no_empty" />
                 </div>
                 <div class="panel panel-default hidden-print">
-                    <div class="panel-heading"><span class="fa fa-filter"> Filters </span><span t-if="filter_display_data" class="pull-right text-primary clear_survey_filter"><i class="fa fa-times"> Clear All Filters</i></span></div>
+                    <div class="panel-heading"><span class="fa fa-filter"></span>  Filters <span t-if="filter_display_data" class="pull-right text-primary clear_survey_filter"><i class="fa fa-times"></i> Clear All Filters</span></div>
                     <div class="panel-body">
                         <span t-if="filter_finish == True">
                             <span class="label label-default only_left_radius filter-all">All surveys</span><span class="label label-primary only_right_radius filter-finished">Finished surveys</span>
@@ -138,17 +138,17 @@
             <ul class="nav nav-tabs hidden-print" role="tablist">
                 <li class="active" t-if="question.type != 'simple_choice'">
                     <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
-                        <span class="fa fa-bar-chart-o"> Graph</span>
+                        <i class="fa fa-bar-chart-o"></i> Graph
                     </a>
                 </li>
                 <li class="active" t-if="question.type == 'simple_choice'">
                     <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
-                        <span class="fa fa-bar-chart-o"> Pie Chart</span>
+                        <i class="fa fa-bar-chart-o"></i> Pie Chart
                     </a>
                 </li>
                 <li>
                     <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" data-toggle="tab" role="tab">
-                        <span class="fa fa-list-alt"> Data</span>
+                        <i class="fa fa-list-alt"></i> Data
                     </a>
                 </li>
             </ul>
@@ -202,12 +202,14 @@
         <ul class="nav nav-tabs hidden-print" role="tablist">
             <li class="active">
                 <a t-att-href="'#graph_question_%d' % question.id" t-att-aria-controls="'graph_question_%d' % question.id" data-toggle="tab" role="tab">
-                    <span class="fa fa-bar-chart">Graph</span>
+                    <i class="fa fa-bar-chart"></i>
+                    Graph
                 </a>
             </li>
             <li>
                 <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" data-toggle="tab" role="tab">
-                    <span class="fa fa-list-alt">Data</span>
+                    <i class="fa fa-list-alt"></i>
+                    Data
                 </a>
             </li>
         </ul>
@@ -262,13 +264,14 @@
         <ul class="nav nav-tabs hidden-print" role="tablist">
             <li class="active">
                 <a t-att-href="'#most_common_%d' % question.id" t-att-aria-controls="'most_common_%d' % question.id" data-toggle="tab" role="tab">
-                    <span class="fa fa-list-ol">Most Common </span>
-                    <span t-esc="len(number_result['most_common'])"></span>
+                    <i class="fa fa-list-ol"></i>
+                    Most Common <span t-esc="len(number_result['most_common'])"></span>
                 </a>
             </li>
             <li>
                 <a t-att-href="'#data_question_%d' % question.id" t-att-aria-controls="'data_question_%d' % question.id" data-toggle="tab" role="tab">
-                    <span class="fa fa-list-alt">All Data</span>
+                    <i class="fa fa-list-alt"></i>
+                    All Data
                 </a>
             </li>
         </ul>
diff --git a/addons/web/static/lib/fontawesome/css/font-awesome-suffix.css b/addons/web/static/lib/fontawesome/css/font-awesome-suffix.css
deleted file mode 100644
index f5651cf8e02..00000000000
--- a/addons/web/static/lib/fontawesome/css/font-awesome-suffix.css
+++ /dev/null
@@ -1,2145 +0,0 @@
-/*!
- *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
- *  Suffix version by Odoo S.A.
- *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
- */
-/* FONT PATH
- * -------------------------- */
-/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
-   readers do not read off random characters that represent icons */
-.fa-suffix-glass:after {
-  content: "\f000";
-}
-.fa-suffix-music:after {
-  content: "\f001";
-}
-.fa-suffix-search:after {
-  content: "\f002";
-}
-.fa-suffix-envelope-o:after {
-  content: "\f003";
-}
-.fa-suffix-heart:after {
-  content: "\f004";
-}
-.fa-suffix-star:after {
-  content: "\f005";
-}
-.fa-suffix-star-o:after {
-  content: "\f006";
-}
-.fa-suffix-user:after {
-  content: "\f007";
-}
-.fa-suffix-film:after {
-  content: "\f008";
-}
-.fa-suffix-th-large:after {
-  content: "\f009";
-}
-.fa-suffix-th:after {
-  content: "\f00a";
-}
-.fa-suffix-th-list:after {
-  content: "\f00b";
-}
-.fa-suffix-check:after {
-  content: "\f00c";
-}
-.fa-suffix-remove:after,
-.fa-suffix-close:after,
-.fa-suffix-times:after {
-  content: "\f00d";
-}
-.fa-suffix-search-plus:after {
-  content: "\f00e";
-}
-.fa-suffix-search-minus:after {
-  content: "\f010";
-}
-.fa-suffix-power-off:after {
-  content: "\f011";
-}
-.fa-suffix-signal:after {
-  content: "\f012";
-}
-.fa-suffix-gear:after,
-.fa-suffix-cog:after {
-  content: "\f013";
-}
-.fa-suffix-trash-o:after {
-  content: "\f014";
-}
-.fa-suffix-home:after {
-  content: "\f015";
-}
-.fa-suffix-file-o:after {
-  content: "\f016";
-}
-.fa-suffix-clock-o:after {
-  content: "\f017";
-}
-.fa-suffix-road:after {
-  content: "\f018";
-}
-.fa-suffix-download:after {
-  content: "\f019";
-}
-.fa-suffix-arrow-circle-o-down:after {
-  content: "\f01a";
-}
-.fa-suffix-arrow-circle-o-up:after {
-  content: "\f01b";
-}
-.fa-suffix-inbox:after {
-  content: "\f01c";
-}
-.fa-suffix-play-circle-o:after {
-  content: "\f01d";
-}
-.fa-suffix-rotate-right:after,
-.fa-suffix-repeat:after {
-  content: "\f01e";
-}
-.fa-suffix-refresh:after {
-  content: "\f021";
-}
-.fa-suffix-list-alt:after {
-  content: "\f022";
-}
-.fa-suffix-lock:after {
-  content: "\f023";
-}
-.fa-suffix-flag:after {
-  content: "\f024";
-}
-.fa-suffix-headphones:after {
-  content: "\f025";
-}
-.fa-suffix-volume-off:after {
-  content: "\f026";
-}
-.fa-suffix-volume-down:after {
-  content: "\f027";
-}
-.fa-suffix-volume-up:after {
-  content: "\f028";
-}
-.fa-suffix-qrcode:after {
-  content: "\f029";
-}
-.fa-suffix-barcode:after {
-  content: "\f02a";
-}
-.fa-suffix-tag:after {
-  content: "\f02b";
-}
-.fa-suffix-tags:after {
-  content: "\f02c";
-}
-.fa-suffix-book:after {
-  content: "\f02d";
-}
-.fa-suffix-bookmark:after {
-  content: "\f02e";
-}
-.fa-suffix-print:after {
-  content: "\f02f";
-}
-.fa-suffix-camera:after {
-  content: "\f030";
-}
-.fa-suffix-font:after {
-  content: "\f031";
-}
-.fa-suffix-bold:after {
-  content: "\f032";
-}
-.fa-suffix-italic:after {
-  content: "\f033";
-}
-.fa-suffix-text-height:after {
-  content: "\f034";
-}
-.fa-suffix-text-width:after {
-  content: "\f035";
-}
-.fa-suffix-align-left:after {
-  content: "\f036";
-}
-.fa-suffix-align-center:after {
-  content: "\f037";
-}
-.fa-suffix-align-right:after {
-  content: "\f038";
-}
-.fa-suffix-align-justify:after {
-  content: "\f039";
-}
-.fa-suffix-list:after {
-  content: "\f03a";
-}
-.fa-suffix-dedent:after,
-.fa-suffix-outdent:after {
-  content: "\f03b";
-}
-.fa-suffix-indent:after {
-  content: "\f03c";
-}
-.fa-suffix-video-camera:after {
-  content: "\f03d";
-}
-.fa-suffix-photo:after,
-.fa-suffix-image:after,
-.fa-suffix-picture-o:after {
-  content: "\f03e";
-}
-.fa-suffix-pencil:after {
-  content: "\f040";
-}
-.fa-suffix-map-marker:after {
-  content: "\f041";
-}
-.fa-suffix-adjust:after {
-  content: "\f042";
-}
-.fa-suffix-tint:after {
-  content: "\f043";
-}
-.fa-suffix-edit:after,
-.fa-suffix-pencil-square-o:after {
-  content: "\f044";
-}
-.fa-suffix-share-square-o:after {
-  content: "\f045";
-}
-.fa-suffix-check-square-o:after {
-  content: "\f046";
-}
-.fa-suffix-arrows:after {
-  content: "\f047";
-}
-.fa-suffix-step-backward:after {
-  content: "\f048";
-}
-.fa-suffix-fast-backward:after {
-  content: "\f049";
-}
-.fa-suffix-backward:after {
-  content: "\f04a";
-}
-.fa-suffix-play:after {
-  content: "\f04b";
-}
-.fa-suffix-pause:after {
-  content: "\f04c";
-}
-.fa-suffix-stop:after {
-  content: "\f04d";
-}
-.fa-suffix-forward:after {
-  content: "\f04e";
-}
-.fa-suffix-fast-forward:after {
-  content: "\f050";
-}
-.fa-suffix-step-forward:after {
-  content: "\f051";
-}
-.fa-suffix-eject:after {
-  content: "\f052";
-}
-.fa-suffix-chevron-left:after {
-  content: "\f053";
-}
-.fa-suffix-chevron-right:after {
-  content: "\f054";
-}
-.fa-suffix-plus-circle:after {
-  content: "\f055";
-}
-.fa-suffix-minus-circle:after {
-  content: "\f056";
-}
-.fa-suffix-times-circle:after {
-  content: "\f057";
-}
-.fa-suffix-check-circle:after {
-  content: "\f058";
-}
-.fa-suffix-question-circle:after {
-  content: "\f059";
-}
-.fa-suffix-info-circle:after {
-  content: "\f05a";
-}
-.fa-suffix-crosshairs:after {
-  content: "\f05b";
-}
-.fa-suffix-times-circle-o:after {
-  content: "\f05c";
-}
-.fa-suffix-check-circle-o:after {
-  content: "\f05d";
-}
-.fa-suffix-ban:after {
-  content: "\f05e";
-}
-.fa-suffix-arrow-left:after {
-  content: "\f060";
-}
-.fa-suffix-arrow-right:after {
-  content: "\f061";
-}
-.fa-suffix-arrow-up:after {
-  content: "\f062";
-}
-.fa-suffix-arrow-down:after {
-  content: "\f063";
-}
-.fa-suffix-mail-forward:after,
-.fa-suffix-share:after {
-  content: "\f064";
-}
-.fa-suffix-expand:after {
-  content: "\f065";
-}
-.fa-suffix-compress:after {
-  content: "\f066";
-}
-.fa-suffix-plus:after {
-  content: "\f067";
-}
-.fa-suffix-minus:after {
-  content: "\f068";
-}
-.fa-suffix-asterisk:after {
-  content: "\f069";
-}
-.fa-suffix-exclamation-circle:after {
-  content: "\f06a";
-}
-.fa-suffix-gift:after {
-  content: "\f06b";
-}
-.fa-suffix-leaf:after {
-  content: "\f06c";
-}
-.fa-suffix-fire:after {
-  content: "\f06d";
-}
-.fa-suffix-eye:after {
-  content: "\f06e";
-}
-.fa-suffix-eye-slash:after {
-  content: "\f070";
-}
-.fa-suffix-warning:after,
-.fa-suffix-exclamation-triangle:after {
-  content: "\f071";
-}
-.fa-suffix-plane:after {
-  content: "\f072";
-}
-.fa-suffix-calendar:after {
-  content: "\f073";
-}
-.fa-suffix-random:after {
-  content: "\f074";
-}
-.fa-suffix-comment:after {
-  content: "\f075";
-}
-.fa-suffix-magnet:after {
-  content: "\f076";
-}
-.fa-suffix-chevron-up:after {
-  content: "\f077";
-}
-.fa-suffix-chevron-down:after {
-  content: "\f078";
-}
-.fa-suffix-retweet:after {
-  content: "\f079";
-}
-.fa-suffix-shopping-cart:after {
-  content: "\f07a";
-}
-.fa-suffix-folder:after {
-  content: "\f07b";
-}
-.fa-suffix-folder-open:after {
-  content: "\f07c";
-}
-.fa-suffix-arrows-v:after {
-  content: "\f07d";
-}
-.fa-suffix-arrows-h:after {
-  content: "\f07e";
-}
-.fa-suffix-bar-chart-o:after,
-.fa-suffix-bar-chart:after {
-  content: "\f080";
-}
-.fa-suffix-twitter-square:after {
-  content: "\f081";
-}
-.fa-suffix-facebook-square:after {
-  content: "\f082";
-}
-.fa-suffix-camera-retro:after {
-  content: "\f083";
-}
-.fa-suffix-key:after {
-  content: "\f084";
-}
-.fa-suffix-gears:after,
-.fa-suffix-cogs:after {
-  content: "\f085";
-}
-.fa-suffix-comments:after {
-  content: "\f086";
-}
-.fa-suffix-thumbs-o-up:after {
-  content: "\f087";
-}
-.fa-suffix-thumbs-o-down:after {
-  content: "\f088";
-}
-.fa-suffix-star-half:after {
-  content: "\f089";
-}
-.fa-suffix-heart-o:after {
-  content: "\f08a";
-}
-.fa-suffix-sign-out:after {
-  content: "\f08b";
-}
-.fa-suffix-linkedin-square:after {
-  content: "\f08c";
-}
-.fa-suffix-thumb-tack:after {
-  content: "\f08d";
-}
-.fa-suffix-external-link:after {
-  content: "\f08e";
-}
-.fa-suffix-sign-in:after {
-  content: "\f090";
-}
-.fa-suffix-trophy:after {
-  content: "\f091";
-}
-.fa-suffix-github-square:after {
-  content: "\f092";
-}
-.fa-suffix-upload:after {
-  content: "\f093";
-}
-.fa-suffix-lemon-o:after {
-  content: "\f094";
-}
-.fa-suffix-phone:after {
-  content: "\f095";
-}
-.fa-suffix-square-o:after {
-  content: "\f096";
-}
-.fa-suffix-bookmark-o:after {
-  content: "\f097";
-}
-.fa-suffix-phone-square:after {
-  content: "\f098";
-}
-.fa-suffix-twitter:after {
-  content: "\f099";
-}
-.fa-suffix-facebook-f:after,
-.fa-suffix-facebook:after {
-  content: "\f09a";
-}
-.fa-suffix-github:after {
-  content: "\f09b";
-}
-.fa-suffix-unlock:after {
-  content: "\f09c";
-}
-.fa-suffix-credit-card:after {
-  content: "\f09d";
-}
-.fa-suffix-feed:after,
-.fa-suffix-rss:after {
-  content: "\f09e";
-}
-.fa-suffix-hdd-o:after {
-  content: "\f0a0";
-}
-.fa-suffix-bullhorn:after {
-  content: "\f0a1";
-}
-.fa-suffix-bell:after {
-  content: "\f0f3";
-}
-.fa-suffix-certificate:after {
-  content: "\f0a3";
-}
-.fa-suffix-hand-o-right:after {
-  content: "\f0a4";
-}
-.fa-suffix-hand-o-left:after {
-  content: "\f0a5";
-}
-.fa-suffix-hand-o-up:after {
-  content: "\f0a6";
-}
-.fa-suffix-hand-o-down:after {
-  content: "\f0a7";
-}
-.fa-suffix-arrow-circle-left:after {
-  content: "\f0a8";
-}
-.fa-suffix-arrow-circle-right:after {
-  content: "\f0a9";
-}
-.fa-suffix-arrow-circle-up:after {
-  content: "\f0aa";
-}
-.fa-suffix-arrow-circle-down:after {
-  content: "\f0ab";
-}
-.fa-suffix-globe:after {
-  content: "\f0ac";
-}
-.fa-suffix-wrench:after {
-  content: "\f0ad";
-}
-.fa-suffix-tasks:after {
-  content: "\f0ae";
-}
-.fa-suffix-filter:after {
-  content: "\f0b0";
-}
-.fa-suffix-briefcase:after {
-  content: "\f0b1";
-}
-.fa-suffix-arrows-alt:after {
-  content: "\f0b2";
-}
-.fa-suffix-group:after,
-.fa-suffix-users:after {
-  content: "\f0c0";
-}
-.fa-suffix-chain:after,
-.fa-suffix-link:after {
-  content: "\f0c1";
-}
-.fa-suffix-cloud:after {
-  content: "\f0c2";
-}
-.fa-suffix-flask:after {
-  content: "\f0c3";
-}
-.fa-suffix-cut:after,
-.fa-suffix-scissors:after {
-  content: "\f0c4";
-}
-.fa-suffix-copy:after,
-.fa-suffix-files-o:after {
-  content: "\f0c5";
-}
-.fa-suffix-paperclip:after {
-  content: "\f0c6";
-}
-.fa-suffix-save:after,
-.fa-suffix-floppy-o:after {
-  content: "\f0c7";
-}
-.fa-suffix-square:after {
-  content: "\f0c8";
-}
-.fa-suffix-navicon:after,
-.fa-suffix-reorder:after,
-.fa-suffix-bars:after {
-  content: "\f0c9";
-}
-.fa-suffix-list-ul:after {
-  content: "\f0ca";
-}
-.fa-suffix-list-ol:after {
-  content: "\f0cb";
-}
-.fa-suffix-strikethrough:after {
-  content: "\f0cc";
-}
-.fa-suffix-underline:after {
-  content: "\f0cd";
-}
-.fa-suffix-table:after {
-  content: "\f0ce";
-}
-.fa-suffix-magic:after {
-  content: "\f0d0";
-}
-.fa-suffix-truck:after {
-  content: "\f0d1";
-}
-.fa-suffix-pinterest:after {
-  content: "\f0d2";
-}
-.fa-suffix-pinterest-square:after {
-  content: "\f0d3";
-}
-.fa-suffix-google-plus-square:after {
-  content: "\f0d4";
-}
-.fa-suffix-google-plus:after {
-  content: "\f0d5";
-}
-.fa-suffix-money:after {
-  content: "\f0d6";
-}
-.fa-suffix-caret-down:after {
-  content: "\f0d7";
-}
-.fa-suffix-caret-up:after {
-  content: "\f0d8";
-}
-.fa-suffix-caret-left:after {
-  content: "\f0d9";
-}
-.fa-suffix-caret-right:after {
-  content: "\f0da";
-}
-.fa-suffix-columns:after {
-  content: "\f0db";
-}
-.fa-suffix-unsorted:after,
-.fa-suffix-sort:after {
-  content: "\f0dc";
-}
-.fa-suffix-sort-down:after,
-.fa-suffix-sort-desc:after {
-  content: "\f0dd";
-}
-.fa-suffix-sort-up:after,
-.fa-suffix-sort-asc:after {
-  content: "\f0de";
-}
-.fa-suffix-envelope:after {
-  content: "\f0e0";
-}
-.fa-suffix-linkedin:after {
-  content: "\f0e1";
-}
-.fa-suffix-rotate-left:after,
-.fa-suffix-undo:after {
-  content: "\f0e2";
-}
-.fa-suffix-legal:after,
-.fa-suffix-gavel:after {
-  content: "\f0e3";
-}
-.fa-suffix-dashboard:after,
-.fa-suffix-tachometer:after {
-  content: "\f0e4";
-}
-.fa-suffix-comment-o:after {
-  content: "\f0e5";
-}
-.fa-suffix-comments-o:after {
-  content: "\f0e6";
-}
-.fa-suffix-flash:after,
-.fa-suffix-bolt:after {
-  content: "\f0e7";
-}
-.fa-suffix-sitemap:after {
-  content: "\f0e8";
-}
-.fa-suffix-umbrella:after {
-  content: "\f0e9";
-}
-.fa-suffix-paste:after,
-.fa-suffix-clipboard:after {
-  content: "\f0ea";
-}
-.fa-suffix-lightbulb-o:after {
-  content: "\f0eb";
-}
-.fa-suffix-exchange:after {
-  content: "\f0ec";
-}
-.fa-suffix-cloud-download:after {
-  content: "\f0ed";
-}
-.fa-suffix-cloud-upload:after {
-  content: "\f0ee";
-}
-.fa-suffix-user-md:after {
-  content: "\f0f0";
-}
-.fa-suffix-stethoscope:after {
-  content: "\f0f1";
-}
-.fa-suffix-suitcase:after {
-  content: "\f0f2";
-}
-.fa-suffix-bell-o:after {
-  content: "\f0a2";
-}
-.fa-suffix-coffee:after {
-  content: "\f0f4";
-}
-.fa-suffix-cutlery:after {
-  content: "\f0f5";
-}
-.fa-suffix-file-text-o:after {
-  content: "\f0f6";
-}
-.fa-suffix-building-o:after {
-  content: "\f0f7";
-}
-.fa-suffix-hospital-o:after {
-  content: "\f0f8";
-}
-.fa-suffix-ambulance:after {
-  content: "\f0f9";
-}
-.fa-suffix-medkit:after {
-  content: "\f0fa";
-}
-.fa-suffix-fighter-jet:after {
-  content: "\f0fb";
-}
-.fa-suffix-beer:after {
-  content: "\f0fc";
-}
-.fa-suffix-h-square:after {
-  content: "\f0fd";
-}
-.fa-suffix-plus-square:after {
-  content: "\f0fe";
-}
-.fa-suffix-angle-double-left:after {
-  content: "\f100";
-}
-.fa-suffix-angle-double-right:after {
-  content: "\f101";
-}
-.fa-suffix-angle-double-up:after {
-  content: "\f102";
-}
-.fa-suffix-angle-double-down:after {
-  content: "\f103";
-}
-.fa-suffix-angle-left:after {
-  content: "\f104";
-}
-.fa-suffix-angle-right:after {
-  content: "\f105";
-}
-.fa-suffix-angle-up:after {
-  content: "\f106";
-}
-.fa-suffix-angle-down:after {
-  content: "\f107";
-}
-.fa-suffix-desktop:after {
-  content: "\f108";
-}
-.fa-suffix-laptop:after {
-  content: "\f109";
-}
-.fa-suffix-tablet:after {
-  content: "\f10a";
-}
-.fa-suffix-mobile-phone:after,
-.fa-suffix-mobile:after {
-  content: "\f10b";
-}
-.fa-suffix-circle-o:after {
-  content: "\f10c";
-}
-.fa-suffix-quote-left:after {
-  content: "\f10d";
-}
-.fa-suffix-quote-right:after {
-  content: "\f10e";
-}
-.fa-suffix-spinner:after {
-  content: "\f110";
-}
-.fa-suffix-circle:after {
-  content: "\f111";
-}
-.fa-suffix-mail-reply:after,
-.fa-suffix-reply:after {
-  content: "\f112";
-}
-.fa-suffix-github-alt:after {
-  content: "\f113";
-}
-.fa-suffix-folder-o:after {
-  content: "\f114";
-}
-.fa-suffix-folder-open-o:after {
-  content: "\f115";
-}
-.fa-suffix-smile-o:after {
-  content: "\f118";
-}
-.fa-suffix-frown-o:after {
-  content: "\f119";
-}
-.fa-suffix-meh-o:after {
-  content: "\f11a";
-}
-.fa-suffix-gamepad:after {
-  content: "\f11b";
-}
-.fa-suffix-keyboard-o:after {
-  content: "\f11c";
-}
-.fa-suffix-flag-o:after {
-  content: "\f11d";
-}
-.fa-suffix-flag-checkered:after {
-  content: "\f11e";
-}
-.fa-suffix-terminal:after {
-  content: "\f120";
-}
-.fa-suffix-code:after {
-  content: "\f121";
-}
-.fa-suffix-mail-reply-all:after,
-.fa-suffix-reply-all:after {
-  content: "\f122";
-}
-.fa-suffix-star-half-empty:after,
-.fa-suffix-star-half-full:after,
-.fa-suffix-star-half-o:after {
-  content: "\f123";
-}
-.fa-suffix-location-arrow:after {
-  content: "\f124";
-}
-.fa-suffix-crop:after {
-  content: "\f125";
-}
-.fa-suffix-code-fork:after {
-  content: "\f126";
-}
-.fa-suffix-unlink:after,
-.fa-suffix-chain-broken:after {
-  content: "\f127";
-}
-.fa-suffix-question:after {
-  content: "\f128";
-}
-.fa-suffix-info:after {
-  content: "\f129";
-}
-.fa-suffix-exclamation:after {
-  content: "\f12a";
-}
-.fa-suffix-superscript:after {
-  content: "\f12b";
-}
-.fa-suffix-subscript:after {
-  content: "\f12c";
-}
-.fa-suffix-eraser:after {
-  content: "\f12d";
-}
-.fa-suffix-puzzle-piece:after {
-  content: "\f12e";
-}
-.fa-suffix-microphone:after {
-  content: "\f130";
-}
-.fa-suffix-microphone-slash:after {
-  content: "\f131";
-}
-.fa-suffix-shield:after {
-  content: "\f132";
-}
-.fa-suffix-calendar-o:after {
-  content: "\f133";
-}
-.fa-suffix-fire-extinguisher:after {
-  content: "\f134";
-}
-.fa-suffix-rocket:after {
-  content: "\f135";
-}
-.fa-suffix-maxcdn:after {
-  content: "\f136";
-}
-.fa-suffix-chevron-circle-left:after {
-  content: "\f137";
-}
-.fa-suffix-chevron-circle-right:after {
-  content: "\f138";
-}
-.fa-suffix-chevron-circle-up:after {
-  content: "\f139";
-}
-.fa-suffix-chevron-circle-down:after {
-  content: "\f13a";
-}
-.fa-suffix-html5:after {
-  content: "\f13b";
-}
-.fa-suffix-css3:after {
-  content: "\f13c";
-}
-.fa-suffix-anchor:after {
-  content: "\f13d";
-}
-.fa-suffix-unlock-alt:after {
-  content: "\f13e";
-}
-.fa-suffix-bullseye:after {
-  content: "\f140";
-}
-.fa-suffix-ellipsis-h:after {
-  content: "\f141";
-}
-.fa-suffix-ellipsis-v:after {
-  content: "\f142";
-}
-.fa-suffix-rss-square:after {
-  content: "\f143";
-}
-.fa-suffix-play-circle:after {
-  content: "\f144";
-}
-.fa-suffix-ticket:after {
-  content: "\f145";
-}
-.fa-suffix-minus-square:after {
-  content: "\f146";
-}
-.fa-suffix-minus-square-o:after {
-  content: "\f147";
-}
-.fa-suffix-level-up:after {
-  content: "\f148";
-}
-.fa-suffix-level-down:after {
-  content: "\f149";
-}
-.fa-suffix-check-square:after {
-  content: "\f14a";
-}
-.fa-suffix-pencil-square:after {
-  content: "\f14b";
-}
-.fa-suffix-external-link-square:after {
-  content: "\f14c";
-}
-.fa-suffix-share-square:after {
-  content: "\f14d";
-}
-.fa-suffix-compass:after {
-  content: "\f14e";
-}
-.fa-suffix-toggle-down:after,
-.fa-suffix-caret-square-o-down:after {
-  content: "\f150";
-}
-.fa-suffix-toggle-up:after,
-.fa-suffix-caret-square-o-up:after {
-  content: "\f151";
-}
-.fa-suffix-toggle-right:after,
-.fa-suffix-caret-square-o-right:after {
-  content: "\f152";
-}
-.fa-suffix-euro:after,
-.fa-suffix-eur:after {
-  content: "\f153";
-}
-.fa-suffix-gbp:after {
-  content: "\f154";
-}
-.fa-suffix-dollar:after,
-.fa-suffix-usd:after {
-  content: "\f155";
-}
-.fa-suffix-rupee:after,
-.fa-suffix-inr:after {
-  content: "\f156";
-}
-.fa-suffix-cny:after,
-.fa-suffix-rmb:after,
-.fa-suffix-yen:after,
-.fa-suffix-jpy:after {
-  content: "\f157";
-}
-.fa-suffix-ruble:after,
-.fa-suffix-rouble:after,
-.fa-suffix-rub:after {
-  content: "\f158";
-}
-.fa-suffix-won:after,
-.fa-suffix-krw:after {
-  content: "\f159";
-}
-.fa-suffix-bitcoin:after,
-.fa-suffix-btc:after {
-  content: "\f15a";
-}
-.fa-suffix-file:after {
-  content: "\f15b";
-}
-.fa-suffix-file-text:after {
-  content: "\f15c";
-}
-.fa-suffix-sort-alpha-asc:after {
-  content: "\f15d";
-}
-.fa-suffix-sort-alpha-desc:after {
-  content: "\f15e";
-}
-.fa-suffix-sort-amount-asc:after {
-  content: "\f160";
-}
-.fa-suffix-sort-amount-desc:after {
-  content: "\f161";
-}
-.fa-suffix-sort-numeric-asc:after {
-  content: "\f162";
-}
-.fa-suffix-sort-numeric-desc:after {
-  content: "\f163";
-}
-.fa-suffix-thumbs-up:after {
-  content: "\f164";
-}
-.fa-suffix-thumbs-down:after {
-  content: "\f165";
-}
-.fa-suffix-youtube-square:after {
-  content: "\f166";
-}
-.fa-suffix-youtube:after {
-  content: "\f167";
-}
-.fa-suffix-xing:after {
-  content: "\f168";
-}
-.fa-suffix-xing-square:after {
-  content: "\f169";
-}
-.fa-suffix-youtube-play:after {
-  content: "\f16a";
-}
-.fa-suffix-dropbox:after {
-  content: "\f16b";
-}
-.fa-suffix-stack-overflow:after {
-  content: "\f16c";
-}
-.fa-suffix-instagram:after {
-  content: "\f16d";
-}
-.fa-suffix-flickr:after {
-  content: "\f16e";
-}
-.fa-suffix-adn:after {
-  content: "\f170";
-}
-.fa-suffix-bitbucket:after {
-  content: "\f171";
-}
-.fa-suffix-bitbucket-square:after {
-  content: "\f172";
-}
-.fa-suffix-tumblr:after {
-  content: "\f173";
-}
-.fa-suffix-tumblr-square:after {
-  content: "\f174";
-}
-.fa-suffix-long-arrow-down:after {
-  content: "\f175";
-}
-.fa-suffix-long-arrow-up:after {
-  content: "\f176";
-}
-.fa-suffix-long-arrow-left:after {
-  content: "\f177";
-}
-.fa-suffix-long-arrow-right:after {
-  content: "\f178";
-}
-.fa-suffix-apple:after {
-  content: "\f179";
-}
-.fa-suffix-windows:after {
-  content: "\f17a";
-}
-.fa-suffix-android:after {
-  content: "\f17b";
-}
-.fa-suffix-linux:after {
-  content: "\f17c";
-}
-.fa-suffix-dribbble:after {
-  content: "\f17d";
-}
-.fa-suffix-skype:after {
-  content: "\f17e";
-}
-.fa-suffix-foursquare:after {
-  content: "\f180";
-}
-.fa-suffix-trello:after {
-  content: "\f181";
-}
-.fa-suffix-female:after {
-  content: "\f182";
-}
-.fa-suffix-male:after {
-  content: "\f183";
-}
-.fa-suffix-gittip:after,
-.fa-suffix-gratipay:after {
-  content: "\f184";
-}
-.fa-suffix-sun-o:after {
-  content: "\f185";
-}
-.fa-suffix-moon-o:after {
-  content: "\f186";
-}
-.fa-suffix-archive:after {
-  content: "\f187";
-}
-.fa-suffix-bug:after {
-  content: "\f188";
-}
-.fa-suffix-vk:after {
-  content: "\f189";
-}
-.fa-suffix-weibo:after {
-  content: "\f18a";
-}
-.fa-suffix-renren:after {
-  content: "\f18b";
-}
-.fa-suffix-pagelines:after {
-  content: "\f18c";
-}
-.fa-suffix-stack-exchange:after {
-  content: "\f18d";
-}
-.fa-suffix-arrow-circle-o-right:after {
-  content: "\f18e";
-}
-.fa-suffix-arrow-circle-o-left:after {
-  content: "\f190";
-}
-.fa-suffix-toggle-left:after,
-.fa-suffix-caret-square-o-left:after {
-  content: "\f191";
-}
-.fa-suffix-dot-circle-o:after {
-  content: "\f192";
-}
-.fa-suffix-wheelchair:after {
-  content: "\f193";
-}
-.fa-suffix-vimeo-square:after {
-  content: "\f194";
-}
-.fa-suffix-turkish-lira:after,
-.fa-suffix-try:after {
-  content: "\f195";
-}
-.fa-suffix-plus-square-o:after {
-  content: "\f196";
-}
-.fa-suffix-space-shuttle:after {
-  content: "\f197";
-}
-.fa-suffix-slack:after {
-  content: "\f198";
-}
-.fa-suffix-envelope-square:after {
-  content: "\f199";
-}
-.fa-suffix-wordpress:after {
-  content: "\f19a";
-}
-.fa-suffix-openid:after {
-  content: "\f19b";
-}
-.fa-suffix-institution:after,
-.fa-suffix-bank:after,
-.fa-suffix-university:after {
-  content: "\f19c";
-}
-.fa-suffix-mortar-board:after,
-.fa-suffix-graduation-cap:after {
-  content: "\f19d";
-}
-.fa-suffix-yahoo:after {
-  content: "\f19e";
-}
-.fa-suffix-google:after {
-  content: "\f1a0";
-}
-.fa-suffix-reddit:after {
-  content: "\f1a1";
-}
-.fa-suffix-reddit-square:after {
-  content: "\f1a2";
-}
-.fa-suffix-stumbleupon-circle:after {
-  content: "\f1a3";
-}
-.fa-suffix-stumbleupon:after {
-  content: "\f1a4";
-}
-.fa-suffix-delicious:after {
-  content: "\f1a5";
-}
-.fa-suffix-digg:after {
-  content: "\f1a6";
-}
-.fa-suffix-pied-piper-pp:after {
-  content: "\f1a7";
-}
-.fa-suffix-pied-piper-alt:after {
-  content: "\f1a8";
-}
-.fa-suffix-drupal:after {
-  content: "\f1a9";
-}
-.fa-suffix-joomla:after {
-  content: "\f1aa";
-}
-.fa-suffix-language:after {
-  content: "\f1ab";
-}
-.fa-suffix-fax:after {
-  content: "\f1ac";
-}
-.fa-suffix-building:after {
-  content: "\f1ad";
-}
-.fa-suffix-child:after {
-  content: "\f1ae";
-}
-.fa-suffix-paw:after {
-  content: "\f1b0";
-}
-.fa-suffix-spoon:after {
-  content: "\f1b1";
-}
-.fa-suffix-cube:after {
-  content: "\f1b2";
-}
-.fa-suffix-cubes:after {
-  content: "\f1b3";
-}
-.fa-suffix-behance:after {
-  content: "\f1b4";
-}
-.fa-suffix-behance-square:after {
-  content: "\f1b5";
-}
-.fa-suffix-steam:after {
-  content: "\f1b6";
-}
-.fa-suffix-steam-square:after {
-  content: "\f1b7";
-}
-.fa-suffix-recycle:after {
-  content: "\f1b8";
-}
-.fa-suffix-automobile:after,
-.fa-suffix-car:after {
-  content: "\f1b9";
-}
-.fa-suffix-cab:after,
-.fa-suffix-taxi:after {
-  content: "\f1ba";
-}
-.fa-suffix-tree:after {
-  content: "\f1bb";
-}
-.fa-suffix-spotify:after {
-  content: "\f1bc";
-}
-.fa-suffix-deviantart:after {
-  content: "\f1bd";
-}
-.fa-suffix-soundcloud:after {
-  content: "\f1be";
-}
-.fa-suffix-database:after {
-  content: "\f1c0";
-}
-.fa-suffix-file-pdf-o:after {
-  content: "\f1c1";
-}
-.fa-suffix-file-word-o:after {
-  content: "\f1c2";
-}
-.fa-suffix-file-excel-o:after {
-  content: "\f1c3";
-}
-.fa-suffix-file-powerpoint-o:after {
-  content: "\f1c4";
-}
-.fa-suffix-file-photo-o:after,
-.fa-suffix-file-picture-o:after,
-.fa-suffix-file-image-o:after {
-  content: "\f1c5";
-}
-.fa-suffix-file-zip-o:after,
-.fa-suffix-file-archive-o:after {
-  content: "\f1c6";
-}
-.fa-suffix-file-sound-o:after,
-.fa-suffix-file-audio-o:after {
-  content: "\f1c7";
-}
-.fa-suffix-file-movie-o:after,
-.fa-suffix-file-video-o:after {
-  content: "\f1c8";
-}
-.fa-suffix-file-code-o:after {
-  content: "\f1c9";
-}
-.fa-suffix-vine:after {
-  content: "\f1ca";
-}
-.fa-suffix-codepen:after {
-  content: "\f1cb";
-}
-.fa-suffix-jsfiddle:after {
-  content: "\f1cc";
-}
-.fa-suffix-life-bouy:after,
-.fa-suffix-life-buoy:after,
-.fa-suffix-life-saver:after,
-.fa-suffix-support:after,
-.fa-suffix-life-ring:after {
-  content: "\f1cd";
-}
-.fa-suffix-circle-o-notch:after {
-  content: "\f1ce";
-}
-.fa-suffix-ra:after,
-.fa-suffix-resistance:after,
-.fa-suffix-rebel:after {
-  content: "\f1d0";
-}
-.fa-suffix-ge:after,
-.fa-suffix-empire:after {
-  content: "\f1d1";
-}
-.fa-suffix-git-square:after {
-  content: "\f1d2";
-}
-.fa-suffix-git:after {
-  content: "\f1d3";
-}
-.fa-suffix-y-combinator-square:after,
-.fa-suffix-yc-square:after,
-.fa-suffix-hacker-news:after {
-  content: "\f1d4";
-}
-.fa-suffix-tencent-weibo:after {
-  content: "\f1d5";
-}
-.fa-suffix-qq:after {
-  content: "\f1d6";
-}
-.fa-suffix-wechat:after,
-.fa-suffix-weixin:after {
-  content: "\f1d7";
-}
-.fa-suffix-send:after,
-.fa-suffix-paper-plane:after {
-  content: "\f1d8";
-}
-.fa-suffix-send-o:after,
-.fa-suffix-paper-plane-o:after {
-  content: "\f1d9";
-}
-.fa-suffix-history:after {
-  content: "\f1da";
-}
-.fa-suffix-circle-thin:after {
-  content: "\f1db";
-}
-.fa-suffix-header:after {
-  content: "\f1dc";
-}
-.fa-suffix-paragraph:after {
-  content: "\f1dd";
-}
-.fa-suffix-sliders:after {
-  content: "\f1de";
-}
-.fa-suffix-share-alt:after {
-  content: "\f1e0";
-}
-.fa-suffix-share-alt-square:after {
-  content: "\f1e1";
-}
-.fa-suffix-bomb:after {
-  content: "\f1e2";
-}
-.fa-suffix-soccer-ball-o:after,
-.fa-suffix-futbol-o:after {
-  content: "\f1e3";
-}
-.fa-suffix-tty:after {
-  content: "\f1e4";
-}
-.fa-suffix-binoculars:after {
-  content: "\f1e5";
-}
-.fa-suffix-plug:after {
-  content: "\f1e6";
-}
-.fa-suffix-slideshare:after {
-  content: "\f1e7";
-}
-.fa-suffix-twitch:after {
-  content: "\f1e8";
-}
-.fa-suffix-yelp:after {
-  content: "\f1e9";
-}
-.fa-suffix-newspaper-o:after {
-  content: "\f1ea";
-}
-.fa-suffix-wifi:after {
-  content: "\f1eb";
-}
-.fa-suffix-calculator:after {
-  content: "\f1ec";
-}
-.fa-suffix-paypal:after {
-  content: "\f1ed";
-}
-.fa-suffix-google-wallet:after {
-  content: "\f1ee";
-}
-.fa-suffix-cc-visa:after {
-  content: "\f1f0";
-}
-.fa-suffix-cc-mastercard:after {
-  content: "\f1f1";
-}
-.fa-suffix-cc-discover:after {
-  content: "\f1f2";
-}
-.fa-suffix-cc-amex:after {
-  content: "\f1f3";
-}
-.fa-suffix-cc-paypal:after {
-  content: "\f1f4";
-}
-.fa-suffix-cc-stripe:after {
-  content: "\f1f5";
-}
-.fa-suffix-bell-slash:after {
-  content: "\f1f6";
-}
-.fa-suffix-bell-slash-o:after {
-  content: "\f1f7";
-}
-.fa-suffix-trash:after {
-  content: "\f1f8";
-}
-.fa-suffix-copyright:after {
-  content: "\f1f9";
-}
-.fa-suffix-at:after {
-  content: "\f1fa";
-}
-.fa-suffix-eyedropper:after {
-  content: "\f1fb";
-}
-.fa-suffix-paint-brush:after {
-  content: "\f1fc";
-}
-.fa-suffix-birthday-cake:after {
-  content: "\f1fd";
-}
-.fa-suffix-area-chart:after {
-  content: "\f1fe";
-}
-.fa-suffix-pie-chart:after {
-  content: "\f200";
-}
-.fa-suffix-line-chart:after {
-  content: "\f201";
-}
-.fa-suffix-lastfm:after {
-  content: "\f202";
-}
-.fa-suffix-lastfm-square:after {
-  content: "\f203";
-}
-.fa-suffix-toggle-off:after {
-  content: "\f204";
-}
-.fa-suffix-toggle-on:after {
-  content: "\f205";
-}
-.fa-suffix-bicycle:after {
-  content: "\f206";
-}
-.fa-suffix-bus:after {
-  content: "\f207";
-}
-.fa-suffix-ioxhost:after {
-  content: "\f208";
-}
-.fa-suffix-angellist:after {
-  content: "\f209";
-}
-.fa-suffix-cc:after {
-  content: "\f20a";
-}
-.fa-suffix-shekel:after,
-.fa-suffix-sheqel:after,
-.fa-suffix-ils:after {
-  content: "\f20b";
-}
-.fa-suffix-meanpath:after {
-  content: "\f20c";
-}
-.fa-suffix-buysellads:after {
-  content: "\f20d";
-}
-.fa-suffix-connectdevelop:after {
-  content: "\f20e";
-}
-.fa-suffix-dashcube:after {
-  content: "\f210";
-}
-.fa-suffix-forumbee:after {
-  content: "\f211";
-}
-.fa-suffix-leanpub:after {
-  content: "\f212";
-}
-.fa-suffix-sellsy:after {
-  content: "\f213";
-}
-.fa-suffix-shirtsinbulk:after {
-  content: "\f214";
-}
-.fa-suffix-simplybuilt:after {
-  content: "\f215";
-}
-.fa-suffix-skyatlas:after {
-  content: "\f216";
-}
-.fa-suffix-cart-plus:after {
-  content: "\f217";
-}
-.fa-suffix-cart-arrow-down:after {
-  content: "\f218";
-}
-.fa-suffix-diamond:after {
-  content: "\f219";
-}
-.fa-suffix-ship:after {
-  content: "\f21a";
-}
-.fa-suffix-user-secret:after {
-  content: "\f21b";
-}
-.fa-suffix-motorcycle:after {
-  content: "\f21c";
-}
-.fa-suffix-street-view:after {
-  content: "\f21d";
-}
-.fa-suffix-heartbeat:after {
-  content: "\f21e";
-}
-.fa-suffix-venus:after {
-  content: "\f221";
-}
-.fa-suffix-mars:after {
-  content: "\f222";
-}
-.fa-suffix-mercury:after {
-  content: "\f223";
-}
-.fa-suffix-intersex:after,
-.fa-suffix-transgender:after {
-  content: "\f224";
-}
-.fa-suffix-transgender-alt:after {
-  content: "\f225";
-}
-.fa-suffix-venus-double:after {
-  content: "\f226";
-}
-.fa-suffix-mars-double:after {
-  content: "\f227";
-}
-.fa-suffix-venus-mars:after {
-  content: "\f228";
-}
-.fa-suffix-mars-stroke:after {
-  content: "\f229";
-}
-.fa-suffix-mars-stroke-v:after {
-  content: "\f22a";
-}
-.fa-suffix-mars-stroke-h:after {
-  content: "\f22b";
-}
-.fa-suffix-neuter:after {
-  content: "\f22c";
-}
-.fa-suffix-genderless:after {
-  content: "\f22d";
-}
-.fa-suffix-facebook-official:after {
-  content: "\f230";
-}
-.fa-suffix-pinterest-p:after {
-  content: "\f231";
-}
-.fa-suffix-whatsapp:after {
-  content: "\f232";
-}
-.fa-suffix-server:after {
-  content: "\f233";
-}
-.fa-suffix-user-plus:after {
-  content: "\f234";
-}
-.fa-suffix-user-times:after {
-  content: "\f235";
-}
-.fa-suffix-hotel:after,
-.fa-suffix-bed:after {
-  content: "\f236";
-}
-.fa-suffix-viacoin:after {
-  content: "\f237";
-}
-.fa-suffix-train:after {
-  content: "\f238";
-}
-.fa-suffix-subway:after {
-  content: "\f239";
-}
-.fa-suffix-medium:after {
-  content: "\f23a";
-}
-.fa-suffix-yc:after,
-.fa-suffix-y-combinator:after {
-  content: "\f23b";
-}
-.fa-suffix-optin-monster:after {
-  content: "\f23c";
-}
-.fa-suffix-opencart:after {
-  content: "\f23d";
-}
-.fa-suffix-expeditedssl:after {
-  content: "\f23e";
-}
-.fa-suffix-battery-4:after,
-.fa-suffix-battery:after,
-.fa-suffix-battery-full:after {
-  content: "\f240";
-}
-.fa-suffix-battery-3:after,
-.fa-suffix-battery-three-quarters:after {
-  content: "\f241";
-}
-.fa-suffix-battery-2:after,
-.fa-suffix-battery-half:after {
-  content: "\f242";
-}
-.fa-suffix-battery-1:after,
-.fa-suffix-battery-quarter:after {
-  content: "\f243";
-}
-.fa-suffix-battery-0:after,
-.fa-suffix-battery-empty:after {
-  content: "\f244";
-}
-.fa-suffix-mouse-pointer:after {
-  content: "\f245";
-}
-.fa-suffix-i-cursor:after {
-  content: "\f246";
-}
-.fa-suffix-object-group:after {
-  content: "\f247";
-}
-.fa-suffix-object-ungroup:after {
-  content: "\f248";
-}
-.fa-suffix-sticky-note:after {
-  content: "\f249";
-}
-.fa-suffix-sticky-note-o:after {
-  content: "\f24a";
-}
-.fa-suffix-cc-jcb:after {
-  content: "\f24b";
-}
-.fa-suffix-cc-diners-club:after {
-  content: "\f24c";
-}
-.fa-suffix-clone:after {
-  content: "\f24d";
-}
-.fa-suffix-balance-scale:after {
-  content: "\f24e";
-}
-.fa-suffix-hourglass-o:after {
-  content: "\f250";
-}
-.fa-suffix-hourglass-1:after,
-.fa-suffix-hourglass-start:after {
-  content: "\f251";
-}
-.fa-suffix-hourglass-2:after,
-.fa-suffix-hourglass-half:after {
-  content: "\f252";
-}
-.fa-suffix-hourglass-3:after,
-.fa-suffix-hourglass-end:after {
-  content: "\f253";
-}
-.fa-suffix-hourglass:after {
-  content: "\f254";
-}
-.fa-suffix-hand-grab-o:after,
-.fa-suffix-hand-rock-o:after {
-  content: "\f255";
-}
-.fa-suffix-hand-stop-o:after,
-.fa-suffix-hand-paper-o:after {
-  content: "\f256";
-}
-.fa-suffix-hand-scissors-o:after {
-  content: "\f257";
-}
-.fa-suffix-hand-lizard-o:after {
-  content: "\f258";
-}
-.fa-suffix-hand-spock-o:after {
-  content: "\f259";
-}
-.fa-suffix-hand-pointer-o:after {
-  content: "\f25a";
-}
-.fa-suffix-hand-peace-o:after {
-  content: "\f25b";
-}
-.fa-suffix-trademark:after {
-  content: "\f25c";
-}
-.fa-suffix-registered:after {
-  content: "\f25d";
-}
-.fa-suffix-creative-commons:after {
-  content: "\f25e";
-}
-.fa-suffix-gg:after {
-  content: "\f260";
-}
-.fa-suffix-gg-circle:after {
-  content: "\f261";
-}
-.fa-suffix-tripadvisor:after {
-  content: "\f262";
-}
-.fa-suffix-odnoklassniki:after {
-  content: "\f263";
-}
-.fa-suffix-odnoklassniki-square:after {
-  content: "\f264";
-}
-.fa-suffix-get-pocket:after {
-  content: "\f265";
-}
-.fa-suffix-wikipedia-w:after {
-  content: "\f266";
-}
-.fa-suffix-safari:after {
-  content: "\f267";
-}
-.fa-suffix-chrome:after {
-  content: "\f268";
-}
-.fa-suffix-firefox:after {
-  content: "\f269";
-}
-.fa-suffix-opera:after {
-  content: "\f26a";
-}
-.fa-suffix-internet-explorer:after {
-  content: "\f26b";
-}
-.fa-suffix-tv:after,
-.fa-suffix-television:after {
-  content: "\f26c";
-}
-.fa-suffix-contao:after {
-  content: "\f26d";
-}
-.fa-suffix-500px:after {
-  content: "\f26e";
-}
-.fa-suffix-amazon:after {
-  content: "\f270";
-}
-.fa-suffix-calendar-plus-o:after {
-  content: "\f271";
-}
-.fa-suffix-calendar-minus-o:after {
-  content: "\f272";
-}
-.fa-suffix-calendar-times-o:after {
-  content: "\f273";
-}
-.fa-suffix-calendar-check-o:after {
-  content: "\f274";
-}
-.fa-suffix-industry:after {
-  content: "\f275";
-}
-.fa-suffix-map-pin:after {
-  content: "\f276";
-}
-.fa-suffix-map-signs:after {
-  content: "\f277";
-}
-.fa-suffix-map-o:after {
-  content: "\f278";
-}
-.fa-suffix-map:after {
-  content: "\f279";
-}
-.fa-suffix-commenting:after {
-  content: "\f27a";
-}
-.fa-suffix-commenting-o:after {
-  content: "\f27b";
-}
-.fa-suffix-houzz:after {
-  content: "\f27c";
-}
-.fa-suffix-vimeo:after {
-  content: "\f27d";
-}
-.fa-suffix-black-tie:after {
-  content: "\f27e";
-}
-.fa-suffix-fonticons:after {
-  content: "\f280";
-}
-.fa-suffix-reddit-alien:after {
-  content: "\f281";
-}
-.fa-suffix-edge:after {
-  content: "\f282";
-}
-.fa-suffix-credit-card-alt:after {
-  content: "\f283";
-}
-.fa-suffix-codiepie:after {
-  content: "\f284";
-}
-.fa-suffix-modx:after {
-  content: "\f285";
-}
-.fa-suffix-fort-awesome:after {
-  content: "\f286";
-}
-.fa-suffix-usb:after {
-  content: "\f287";
-}
-.fa-suffix-product-hunt:after {
-  content: "\f288";
-}
-.fa-suffix-mixcloud:after {
-  content: "\f289";
-}
-.fa-suffix-scribd:after {
-  content: "\f28a";
-}
-.fa-suffix-pause-circle:after {
-  content: "\f28b";
-}
-.fa-suffix-pause-circle-o:after {
-  content: "\f28c";
-}
-.fa-suffix-stop-circle:after {
-  content: "\f28d";
-}
-.fa-suffix-stop-circle-o:after {
-  content: "\f28e";
-}
-.fa-suffix-shopping-bag:after {
-  content: "\f290";
-}
-.fa-suffix-shopping-basket:after {
-  content: "\f291";
-}
-.fa-suffix-hashtag:after {
-  content: "\f292";
-}
-.fa-suffix-bluetooth:after {
-  content: "\f293";
-}
-.fa-suffix-bluetooth-b:after {
-  content: "\f294";
-}
-.fa-suffix-percent:after {
-  content: "\f295";
-}
-.fa-suffix-gitlab:after {
-  content: "\f296";
-}
-.fa-suffix-wpbeginner:after {
-  content: "\f297";
-}
-.fa-suffix-wpforms:after {
-  content: "\f298";
-}
-.fa-suffix-envira:after {
-  content: "\f299";
-}
-.fa-suffix-universal-access:after {
-  content: "\f29a";
-}
-.fa-suffix-wheelchair-alt:after {
-  content: "\f29b";
-}
-.fa-suffix-question-circle-o:after {
-  content: "\f29c";
-}
-.fa-suffix-blind:after {
-  content: "\f29d";
-}
-.fa-suffix-audio-description:after {
-  content: "\f29e";
-}
-.fa-suffix-volume-control-phone:after {
-  content: "\f2a0";
-}
-.fa-suffix-braille:after {
-  content: "\f2a1";
-}
-.fa-suffix-assistive-listening-systems:after {
-  content: "\f2a2";
-}
-.fa-suffix-asl-interpreting:after,
-.fa-suffix-american-sign-language-interpreting:after {
-  content: "\f2a3";
-}
-.fa-suffix-deafness:after,
-.fa-suffix-hard-of-hearing:after,
-.fa-suffix-deaf:after {
-  content: "\f2a4";
-}
-.fa-suffix-glide:after {
-  content: "\f2a5";
-}
-.fa-suffix-glide-g:after {
-  content: "\f2a6";
-}
-.fa-suffix-signing:after,
-.fa-suffix-sign-language:after {
-  content: "\f2a7";
-}
-.fa-suffix-low-vision:after {
-  content: "\f2a8";
-}
-.fa-suffix-viadeo:after {
-  content: "\f2a9";
-}
-.fa-suffix-viadeo-square:after {
-  content: "\f2aa";
-}
-.fa-suffix-snapchat:after {
-  content: "\f2ab";
-}
-.fa-suffix-snapchat-ghost:after {
-  content: "\f2ac";
-}
-.fa-suffix-snapchat-square:after {
-  content: "\f2ad";
-}
-.fa-suffix-pied-piper:after {
-  content: "\f2ae";
-}
-.fa-suffix-first-order:after {
-  content: "\f2b0";
-}
-.fa-suffix-yoast:after {
-  content: "\f2b1";
-}
-.fa-suffix-themeisle:after {
-  content: "\f2b2";
-}
-.fa-suffix-google-plus-circle:after,
-.fa-suffix-google-plus-official:after {
-  content: "\f2b3";
-}
-.fa-suffix-fa:after,
-.fa-suffix-font-awesome:after {
-  content: "\f2b4";
-}
-.fa-suffix-handshake-o:after {
-  content: "\f2b5";
-}
-.fa-suffix-envelope-open:after {
-  content: "\f2b6";
-}
-.fa-suffix-envelope-open-o:after {
-  content: "\f2b7";
-}
-.fa-suffix-linode:after {
-  content: "\f2b8";
-}
-.fa-suffix-address-book:after {
-  content: "\f2b9";
-}
-.fa-suffix-address-book-o:after {
-  content: "\f2ba";
-}
-.fa-suffix-vcard:after,
-.fa-suffix-address-card:after {
-  content: "\f2bb";
-}
-.fa-suffix-vcard-o:after,
-.fa-suffix-address-card-o:after {
-  content: "\f2bc";
-}
-.fa-suffix-user-circle:after {
-  content: "\f2bd";
-}
-.fa-suffix-user-circle-o:after {
-  content: "\f2be";
-}
-.fa-suffix-user-o:after {
-  content: "\f2c0";
-}
-.fa-suffix-id-badge:after {
-  content: "\f2c1";
-}
-.fa-suffix-drivers-license:after,
-.fa-suffix-id-card:after {
-  content: "\f2c2";
-}
-.fa-suffix-drivers-license-o:after,
-.fa-suffix-id-card-o:after {
-  content: "\f2c3";
-}
-.fa-suffix-quora:after {
-  content: "\f2c4";
-}
-.fa-suffix-free-code-camp:after {
-  content: "\f2c5";
-}
-.fa-suffix-telegram:after {
-  content: "\f2c6";
-}
-.fa-suffix-thermometer-4:after,
-.fa-suffix-thermometer:after,
-.fa-suffix-thermometer-full:after {
-  content: "\f2c7";
-}
-.fa-suffix-thermometer-3:after,
-.fa-suffix-thermometer-three-quarters:after {
-  content: "\f2c8";
-}
-.fa-suffix-thermometer-2:after,
-.fa-suffix-thermometer-half:after {
-  content: "\f2c9";
-}
-.fa-suffix-thermometer-1:after,
-.fa-suffix-thermometer-quarter:after {
-  content: "\f2ca";
-}
-.fa-suffix-thermometer-0:after,
-.fa-suffix-thermometer-empty:after {
-  content: "\f2cb";
-}
-.fa-suffix-shower:after {
-  content: "\f2cc";
-}
-.fa-suffix-bathtub:after,
-.fa-suffix-s15:after,
-.fa-suffix-bath:after {
-  content: "\f2cd";
-}
-.fa-suffix-podcast:after {
-  content: "\f2ce";
-}
-.fa-suffix-window-maximize:after {
-  content: "\f2d0";
-}
-.fa-suffix-window-minimize:after {
-  content: "\f2d1";
-}
-.fa-suffix-window-restore:after {
-  content: "\f2d2";
-}
-.fa-suffix-times-rectangle:after,
-.fa-suffix-window-close:after {
-  content: "\f2d3";
-}
-.fa-suffix-times-rectangle-o:after,
-.fa-suffix-window-close-o:after {
-  content: "\f2d4";
-}
-.fa-suffix-bandcamp:after {
-  content: "\f2d5";
-}
-.fa-suffix-grav:after {
-  content: "\f2d6";
-}
-.fa-suffix-etsy:after {
-  content: "\f2d7";
-}
-.fa-suffix-imdb:after {
-  content: "\f2d8";
-}
-.fa-suffix-ravelry:after {
-  content: "\f2d9";
-}
-.fa-suffix-eercast:after {
-  content: "\f2da";
-}
-.fa-suffix-microchip:after {
-  content: "\f2db";
-}
-.fa-suffix-snowflake-o:after {
-  content: "\f2dc";
-}
-.fa-suffix-superpowers:after {
-  content: "\f2dd";
-}
-.fa-suffix-wpexplorer:after {
-  content: "\f2de";
-}
-.fa-suffix-meetup:after {
-  content: "\f2e0";
-}
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 018dff37915..a4714e81ee5 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -144,7 +144,7 @@
 <div t-name="CrashManager.error" class="o_dialog_error">
     <div class="alert alert-warning clearfix" role="alert">
         <button class="btn btn-sm btn-primary pull-right ml8 o_clipboard_button">
-            <span class="fa fa-clipboard mr8">Copy the full error to clipboard</span>
+            <i class="fa fa-clipboard mr8"/>Copy the full error to clipboard
         </button>
         <p><b>An error occurred</b></p>
         <p>Please use the copy button to report the error to your support service.</p>
@@ -630,7 +630,7 @@
 <div aria-atomic="true" t-name="DomainSelector" t-attf-class="o_domain_node o_domain_tree o_domain_selector #{widget.readonly ? 'o_read_mode' : 'o_edit_mode'}">
     <t t-if="widget.children.length === 0">
         <span>Match <strong>all records</strong></span>
-        <button t-if="!widget.readonly" class="btn btn-xs btn-primary o_domain_add_first_node_button"><span class="fa fa-plus"> Add filter</span></button>
+        <button t-if="!widget.readonly" class="btn btn-xs btn-primary o_domain_add_first_node_button"><i class="fa fa-plus"/> Add filter</button>
     </t>
     <t t-else="">
         <div class="o_domain_tree_header">
@@ -1458,12 +1458,12 @@
         <div class="col-xs-6">
             Get this feature and much more with Odoo Enterprise!
             <ul class="list-unstyled">
-                <li><span class="fa fa-check"> Access to all Enterprise Apps</span></li>
-                <li><span class="fa fa-check"> New design</span></li>
-                <li><span class="fa fa-check"> Mobile support</span></li>
-                <li><span class="fa fa-check"> Upgrade to future versions</span></li>
-                <li><span class="fa fa-check"> Bugfixes guarantee</span></li>
-                <li><a href="http://www.odoo.com/editions" target="_blank"><span class="fa fa-plus"> And more</span></a></li>
+                <li><i class="fa fa-check"></i> Access to all Enterprise Apps</li>
+                <li><i class="fa fa-check"></i> New design</li>
+                <li><i class="fa fa-check"></i> Mobile support</li>
+                <li><i class="fa fa-check"></i> Upgrade to future versions</li>
+                <li><i class="fa fa-check"></i> Bugfixes guarantee</li>
+                <li><a href="http://www.odoo.com/editions" target="_blank"><i class="fa fa-plus"></i> And more</a></li>
             </ul>
         </div>
         <div class="col-xs-6">
diff --git a/addons/web/views/database_manager.html b/addons/web/views/database_manager.html
index 789105fc9a8..11037f13d25 100644
--- a/addons/web/views/database_manager.html
+++ b/addons/web/views/database_manager.html
@@ -5,7 +5,6 @@
   <title>Odoo</title>
   <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon">
   <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome.css">
-  <link rel="stylesheet" href="/web/static/lib/fontawesome/css/font-awesome-suffix.css">
   <link rel="stylesheet" href="/web/static/lib/bootstrap/css/bootstrap.css">
   <script src="/web/static/lib/jquery/jquery.js" type="text/javascript"></script>
   <script src="/web/static/lib/bootstrap/js/modal.js"></script>
diff --git a/addons/web/views/report_templates.xml b/addons/web/views/report_templates.xml
index 10d79c49c3f..4dea3457c07 100644
--- a/addons/web/views/report_templates.xml
+++ b/addons/web/views/report_templates.xml
@@ -18,7 +18,6 @@
         <link href="https://fonts.googleapis.com/css?family=Work+Sans:thin,light,regular,medium,bold,semi-bold" rel="stylesheet"/>
 
         <link href="/web/static/lib/fontawesome/css/font-awesome.css" rel="stylesheet" type="text/css"/>
-        <link href="/web/static/lib/fontawesome/css/font-awesome-suffix.css" rel="stylesheet" type="text/css"/>
 
 
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/report.scss"/>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index de81593b37a..e4c28872b64 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -39,7 +39,6 @@
 
         <link rel="stylesheet" type="text/css" href="/web/static/lib/jquery.ui/jquery-ui.css"/>
         <link rel="stylesheet" type="text/css" href="/web/static/lib/fontawesome/css/font-awesome.css"/>
-        <link rel="stylesheet" type="text/css" href="/web/static/lib/fontawesome/css/font-awesome-suffix.css"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/lib/bootstrap-datetimepicker/src/scss/_bootstrap-datetimepicker.scss"/>
         <link rel="stylesheet" type="text/css" href="/web/static/lib/select2/select2.css"/>
         <link rel="stylesheet" type="text/css" href="/web/static/lib/select2-bootstrap-css/select2-bootstrap.css"/>
diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml
index a9cd23cbaaf..de713540a67 100644
--- a/addons/web_editor/static/src/xml/ace.xml
+++ b/addons/web_editor/static/src/xml/ace.xml
@@ -33,7 +33,7 @@
         <div id="ace-view-id">
             <span/>
             <div class="pull-right">
-                <button data-action="reset" type="button" class="btn btn-xs btn-danger" icon="fa-undo" string="Reset"></button>
+                <button data-action="reset" type="button" class="btn btn-xs btn-danger"><i class="fa fa-undo"/> Reset</button>
                 <button data-action="format" type="button" class="btn btn-xs btn-link">Format</button>
             </div>
         </div>
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 45a16057cd5..7a8827a8ea2 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -9,8 +9,8 @@
         <div id="web_editor-top-edit">
             <div id="web_editor-toolbars"/>
             <form class="navbar-form text-muted">
-                <button type="button" class="btn btn-sm btn-default fa fa-times" data-action="cancel">Discard</button>
-                <button type="button" class="btn btn-sm btn-primary fa fa-floppy-o" data-action="save">Save</button>
+                <button type="button" class="btn btn-sm btn-default" data-action="cancel"><i class="fa fa-times"/> Discard</button>
+                <button type="button" class="btn btn-sm btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button>
             </form>
         </div>
     </t>
@@ -54,10 +54,10 @@
             <li class="search pull-right">
                 <ul class="pager mb0 mt0">
                     <li class="previous">
-                        <a role="button" class="btn btn-default disabled" href="#"><span class="fa fa-angle-left">&#32;Previous</span></a>
+                        <a role="button" class="btn btn-default disabled" href="#"><i class="fa fa-angle-left"/>&#32;Previous</a>
                     </li>
                     <li class="next">
-                        <a role="button" class="btn btn-default disabled" href="#"><span class="fa fa-suffix-angle-right">Next&#32;</span></a>
+                        <a role="button" class="btn btn-default disabled" href="#">Next&#32;<i class="fa fa-angle-right"/></a>
                     </li>
                 </ul>
             </li>
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index 3eecae059ad..dcd245f9a3e 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -40,7 +40,7 @@
     <!-- t-field options -->
     <t t-name="web_editor.many2one.button">
         <div class="btn-group">
-            <a role="button" href="#" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact">><i class="fa fa-search"></i></a>
+            <a role="button" href="#" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact"><i class="fa fa-search"></i></a>
             <ul class="dropdown-menu contact_menu" role="menu">
                 <li><a role="menuitem"><input href="#" type="email" placeholder="Search"/></a></li>
             </ul>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 6dbd57764ab..096ea58a2ce 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -6,7 +6,7 @@
     <div id="o_scroll">
         <div id="snippet_structure" class="o_panel">
             <div class="o_panel_header">
-                <span class="fa fa-th-large"> First Panel</span>
+                <i class="fa fa-th-large"/> First Panel
             </div>
             <div class="o_panel_body"/>
         </div>
diff --git a/addons/web_settings_dashboard/static/src/xml/dashboard.xml b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
index 34c564a6af5..5a505bb02e4 100644
--- a/addons/web_settings_dashboard/static/src/xml/dashboard.xml
+++ b/addons/web_settings_dashboard/static/src/xml/dashboard.xml
@@ -40,8 +40,8 @@
                 <a class="btn btn-primary btn-block o_browse_apps" role="button"><strong>Browse Apps</strong></a>
             </div>
             <div class="o_web_settings_dashboard_pills">
-                <a href="https://www.odoo.com/apps/modules" target="_blank" class="pull-left"><span class="fa fa-rocket fa-2x text-muted"> App store</span></a>
-                <a href="https://www.odoo.com/apps/themes" target="_blank" class="pull-right"><span class="fa fa-picture-o fa-2x text-muted"> Theme store</span></a>
+                <a href="https://www.odoo.com/apps/modules" target="_blank" class="pull-left"><i class="fa fa-rocket fa-2x text-muted"/> App store</a>
+                <a href="https://www.odoo.com/apps/themes" target="_blank" class="pull-right"><i class="fa fa-picture-o fa-2x text-muted"/> Theme store</a>
             </div>
             <div class="clearfix"/>
         </div>
diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml
index dda6c96a3f6..3dce4b0e5f9 100644
--- a/addons/website/data/website_demo.xml
+++ b/addons/website/data/website_demo.xml
@@ -97,8 +97,8 @@ response = request.website.render("website.template_partner_post", {'partner': p
                     </div>
                     <div class="form-group">
                         <div class="col-sm-offset-2 col-sm-10">
-                            <button type="submit" class="btn btn-primary" aria-label="Send">
-                                <span class="fa fa-suffix-long-arrow-right">Send </span>
+                            <button type="submit" class="btn btn-primary">
+                                Send <span class="fa fa-long-arrow-right"/>
                             </button>
                         </div>
                     </div>
diff --git a/addons/website/static/src/js/tours/rte.js b/addons/website/static/src/js/tours/rte.js
index cc828154722..7b9964c5e20 100644
--- a/addons/website/static/src/js/tours/rte.js
+++ b/addons/website/static/src/js/tours/rte.js
@@ -9,7 +9,7 @@ tour.register('rte_translator', {
     wait_for: base.ready(),
 }, [{
     content: "click on Add a language",
-    trigger: '.js_language_selector a:has(span.fa)',
+    trigger: '.js_language_selector a:has(i.fa)',
 }, {
     content: "select french",
     trigger: 'select[name="lang"]',
diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml
index 2b98b0d0be7..9cabe61a861 100644
--- a/addons/website/static/src/xml/website.contentMenu.xml
+++ b/addons/website/static/src/xml/website.contentMenu.xml
@@ -46,7 +46,7 @@
             Drag a menu to the right to create a sub-menu
         </small>
         <a href="#" class="js_add_menu">
-            <span class="fa fa-plus-circle"> Add Menu Entry</span>
+            <i class="fa fa-plus-circle"/> Add Menu Entry
         </a>
     </div>
 </div>
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index c65c753ca44..314cb5553e0 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -287,7 +287,7 @@
     <div class="o_facebook_page">
         <div class="o_facebook_alert alert alert-info" role="status">
             <span class="o_add_facebook_page">
-                <span class="fa fa-plus-circle"> Add Facebook Page</span>
+                <i class="fa fa-plus-circle"/> Add Facebook Page
             </span>
         </div>
     </div>
@@ -296,7 +296,7 @@
 <template id="s_image_gallery" name="Image Gallery">
     <section class="o_gallery o_spc-medium o_slideshow s_image_gallery" data-columns="3" style="height: 500px; overflow: hidden;">
         <div class="container">
-            <div class="alert alert-info css_editable_mode_display text-center" role="status"><span class="o_add_images" style="cursor: pointer;"><span class="fa fa-plus-circle"> Add Images</span></span></div>
+            <div class="alert alert-info css_editable_mode_display text-center" role="status"><span class="o_add_images" style="cursor: pointer;"><i class="fa fa-plus-circle"/> Add Images</span></div>
         </div>
     </section>
 </template>
@@ -688,7 +688,7 @@
         <div id="o_scroll">
             <div id="snippet_structure" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-th-large"> Structure</span>
+                    <i class="fa fa-th-large"/> Structure
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="website.s_title" t-thumbnail="/website/static/src/img/blocks/block_title.png"/>
@@ -706,7 +706,7 @@
 
             <div id="snippet_feature" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-diamond"> Feature</span>
+                    <i class="fa fa-diamond"/> Feature
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="website.s_image_gallery" t-thumbnail="/website/static/src/img/blocks/block_image_gallery.png"/>
@@ -721,7 +721,7 @@
 
             <div id="snippet_effect" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-magic icon-fix"> Effect</span>
+                    <i class="fa fa-magic icon-fix"/> Effect
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="website.s_parallax" t-thumbnail="/website/static/src/img/blocks/block_parallax.png"/>
@@ -731,7 +731,7 @@
 
             <div id="snippet_content" class="o_panel">
                 <div class="o_panel_header">
-                    <span class="fa fa-indent"> Inner content</span>
+                    <i class="fa fa-indent"/> Inner content
                 </div>
                 <div class="o_panel_body">
                     <t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
@@ -764,11 +764,11 @@
     <t t-call="web_editor.snippet_options"/>
 
     <div data-js='gallery' data-selector=".o_gallery">
-        <li data-add-images="true" data-no-preview="true"><a href="#"><span class="fa fa-plus-circle">Add images</span></a></li>
-        <li data-remove-all-images="true" data-no-preview="true"><a href="#"><span class="fa fa-trash">Remove all images</span></a></li>
+        <li data-add-images="true" data-no-preview="true"><a href="#"><i class="fa fa-plus-circle"/>Add images</a></li>
+        <li data-remove-all-images="true" data-no-preview="true"><a href="#"><i class="fa fa-trash"/>Remove all images</a></li>
         <li class="separator"/>
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-magic">Mode</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-magic"/>Mode</a>
             <ul class="dropdown-menu" role="menu">
                 <li data-mode="nomode"><a role="menuitem" href="#">Float</a></li>
                 <li data-mode="masonry"><a role="menuitem" href="#">Masonry</a></li>
@@ -777,7 +777,7 @@
             </ul>
         </li>
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-clock-o">Slideshow speed</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-clock-o"/>Slideshow speed</a>
             <ul class="dropdown-menu" role="menu">
                  <li data-interval="1000"><a role="menuitem" href="#">1s</a></li>
                  <li data-interval="2000"><a role="menuitem" href="#">2s</a></li>
@@ -788,7 +788,7 @@
             </ul>
         </li>
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-th">Columns</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-th"/>Columns</a>
             <ul class="dropdown-menu" role="menu">
                 <li data-columns="1"><a role="menuitem" href="#">1</a></li>
                 <li data-columns="2"><a role="menuitem" href="#">2</a></li>
@@ -799,7 +799,7 @@
             </ul>
         </li>
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-arrows-h">Images spacing</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-arrows-h"/>Images spacing</a>
 
             <ul class="dropdown-menu" role="menu">
                 <li data-select-class="o_spc-none"><a role="menuitem" href="#">None</a></li>
@@ -809,7 +809,7 @@
             </ul>
         </li>
         <li class="dropdown-submenu">
-           <a tabindex="-2" href="#"><span class="fa fa-paint-brush">Styling</span></a>
+           <a tabindex="-2" href="#"><i class="fa fa-paint-brush"/>Styling</a>
            <ul class="dropdown-menu" role="menu">
                <li data-styling=""><a role="menuitem" href="#">Square</a></li>
                <li data-styling="img-rounded"><a role="menuitem" href="#">Rounded corners</a></li>
@@ -824,14 +824,14 @@
     <div data-js="background"
         data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax, .s_banner .carousel-content">
         <li data-choose-image="true" data-no-preview="true">
-            <a tabindex="-1" href="#"><span class="fa fa-picture-o">Choose Background Image</span></a>
+            <a tabindex="-1" href="#"><i class="fa fa-picture-o"/>Choose Background Image</a>
         </li>
     </div>
 
     <div data-js="background_position"
         data-selector="section, :not(.o_gallery > .container) > .carousel, .s_banner .carousel-content">
         <li class="background_position_li" data-background-position="true" data-no-preview="true">
-            <a tabindex="-1" href="#"><span class="fa fa-arrows">Background Image Sizing</span></a>
+            <a tabindex="-1" href="#"><i class="fa fa-arrows"/>Background Image Sizing</a>
         </li>
     </div>
 
@@ -839,7 +839,7 @@
         data-selector="section, :not(.o_gallery > .container) > .carousel"
         data-exclude=".parallax">
         <li class="dropdown-submenu">
-            <a tabindex="-1" href="#"><span class="fa fa-eyedropper">Background Color</span></a>
+            <a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
             <ul class="dropdown-menu" role="menu">
                 <li></li>
             </ul>
@@ -851,7 +851,7 @@
         data-palette-default="transparent_grayscale"
         data-palette-title="Overlay Color">
         <li class="dropdown-submenu">
-            <a tabindex="-1" href="#"><span class="fa fa-eyedropper">Overlay color</span></a>
+            <a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Overlay color</a>
             <ul class="dropdown-menu" role="menu">
                 <li></li>
             </ul>
@@ -860,7 +860,7 @@
 
     <div data-js='gallery_img' data-selector=".o_gallery img">
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-refresh">Re-order</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-refresh"/>Re-order</a>
             <ul class="dropdown-menu" role="menu" data-no-preview="true">
                 <li data-position="first"><a role="menuitem" href="#">Move to first</a></li>
                 <li data-position="prev"><a role="menuitem" href="#">Move to previous</a></li>
@@ -874,7 +874,7 @@
         data-selector=":not(.o_gallery > .container) > .carousel">
         <li class="divider"></li>
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-clock-o">Slideshow speed</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-clock-o"/>Slideshow speed</a>
             <ul class="dropdown-menu" role="menu">
                  <li data-interval="1000"><a role="menuitem" href="#">1s</a></li>
                  <li data-interval="2000"><a role="menuitem" href="#">2s</a></li>
@@ -884,8 +884,8 @@
                  <li data-interval="0"><a role="menuitem" href="#">Disable autoplay</a></li>
             </ul>
         </li>
-        <li data-add-slide="true" data-no-preview="true"><a href="#"><span class="fa fa-plus-circle">Add Slide</span></a></li>
-        <li data-remove-slide="true" data-no-preview="true"><a href="#" ><span class="fa fa-trash-o">Remove Slide</span></a></li>
+        <li data-add-slide="true" data-no-preview="true"><a href="#"><i class="fa fa-plus-circle"/>Add Slide</a></li>
+        <li data-remove-slide="true" data-no-preview="true"><a href="#" ><i class="fa fa-trash-o"/>Remove Slide</a></li>
     </div>
 
     <div data-selector="section, :not(.o_gallery > .container) > .carousel, .parallax"
@@ -900,7 +900,7 @@
         data-target="> * > .row"
         data-exclude=".s_text_block_image_fw, .s_company_team, .s_big_picture">
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-columns">Number of columns</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-columns"/>Number of columns</a>
             <ul class="dropdown-menu" role="menu" data-no-preview="true">
                 <li data-select-count="1"><a role="menuitem" href="#">1</a></li>
                 <li data-select-count="2"><a role="menuitem" href="#">2</a></li>
@@ -930,7 +930,7 @@
 
     <div data-selector=".o_image_floating">
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-expand">Margin</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-expand"/>Margin</a>
             <ul class="dropdown-menu" role="menu">
                 <li data-select-class="o_margin_xl"><a role="menuitem" href="#">Extra-Large</a></li>
                 <li data-select-class="o_margin_l"><a role="menuitem" href="#">Large</a></li>
@@ -943,7 +943,7 @@
 
     <div data-selector=".o_image_floating">
         <li class="dropdown-submenu">
-            <a tabindex="-2" href="#"><span class="fa fa-magnet">Float</span></a>
+            <a tabindex="-2" href="#"><i class="fa fa-magnet"/>Float</a>
             <ul class="dropdown-menu" role="menu" data-no-preview="true">
                 <li data-select-class="pull-left"><a role="menuitem" href="#">Left</a></li>
                 <li data-select-class="pull-right"><a role="menuitem" href="#">Right</a></li>
@@ -953,7 +953,7 @@
 
     <div data-js="parallax" data-selector=".parallax">
         <li class="dropdown-submenu">
-            <a tabindex="-1" href="#"><span class="fa fa-clock-o">Scroll Speed</span></a>
+            <a tabindex="-1" href="#"><i class="fa fa-clock-o"/>Scroll Speed</a>
             <ul class="dropdown-menu" role="menu" name="parallax-scroll">
                 <li data-scroll="0"><a role="menuitem" href="#">No-scroll</a></li>
                 <li class="separator" role="separator"/>
@@ -974,7 +974,7 @@
 
     <div data-js="facebookPage" data-selector=".o_facebook_page">
         <li data-fb-page-options="true" data-no-preview="true">
-            <a href="#"><span class="fa fa-facebook">Options</span></a>
+            <a href="#"><i class="fa fa-facebook"/>Options</a>
         </li>
     </div>
 
diff --git a/addons/website/views/website_navbar_templates.xml b/addons/website/views/website_navbar_templates.xml
index 972df961acb..0c843139a73 100644
--- a/addons/website/views/website_navbar_templates.xml
+++ b/addons/website/views/website_navbar_templates.xml
@@ -10,7 +10,7 @@
                 <ul id="oe_applications">
                     <li class="dropdown active">
                         <a class="dropdown full" data-toggle="dropdown" href="#">
-                            <span class="fa fa-th-large"> WEBSITE </span><b class="caret"/>
+                            <i class="fa fa-th-large"/> WEBSITE <b class="caret"/>
                         </a>
                         <ul class="dropdown-menu" role="menu">
                             <li t-as="menu" t-foreach="menu_data['children']">
@@ -75,7 +75,7 @@
                     </li>
                     <!-- Page Edition -->
                     <li class="o_new_content_menu" id="new-content-menu">
-                        <a href="#"><span class="fa fa-plus">New</span></a>
+                        <a href="#"><span class="fa fa-plus"/>New</a>
                         <div id="o_new_content_menu_choices" class="o_hidden">
                             <ul>
                                 <li groups="website.group_website_designer"><a href="#" data-action="new_page" aria-label="New page" title="New page"><i class="fa fa-file-o"/><p>New Page</p></a></li>
@@ -83,7 +83,7 @@
                         </div>
                     </li>
                     <li t-if="not translatable" id="edit-page-menu">
-                        <a data-action="edit" href="#"><span class="fa fa-pencil">Edit</span></a>
+                        <a data-action="edit" href="#"><span class="fa fa-pencil"/>Edit</a>
                     </li>
                     <li t-if="'website_published' in main_object.fields_get() and main_object._name != 'website.page'">
                         <a role="button" class="btn btn-primary btn-xs 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 402321d8351..27ebf0f7bd5 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -336,8 +336,8 @@
         <li groups="website.group_website_publisher">
             <t t-set="url_return" t-value="url_for('', '[lang]') + '?' + keep_query()"/>
             <a t-attf-href="/web#action=base.action_view_base_language_install&amp;website_id=#{website.id if website else ''}&amp;url_return=#{url_return}">
-                <span class="fa fa-plus-circle">
-                    Add a language...</span>
+                <i class="fa fa-plus-circle"/>
+                Add a language...
             </a>
         </li>
     </ul>
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 8e82e31c20f..1c7e7ae6479 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -324,7 +324,7 @@
                             "fields": ["name"]
                         }'/>
                     </div>
-                    <p class="mt32 fa fa-suffix-long-arrow-right">Read Next </p>
+                    <p class="mt32">Read Next <span class="fa fa-long-arrow-right"/></p>
                 </div>
             </t>
         </t>
@@ -552,7 +552,7 @@
 <!-- User Navbar -->
 <template id="content_new_blogpost" inherit_id="website.user_navbar">
     <xpath expr="//div[@id='o_new_content_menu_choices']//ul" position="inside">
-        <li groups="website.group_website_designer"><a href="#" data-action="new_blog_post"><p class="fa fa-rss">New Blog Post</p></a></li>
+        <li groups="website.group_website_designer"><a href="#" data-action="new_blog_post"><i class="fa fa-rss"/><p>New Blog Post</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index 6c29e046488..f3f9466c9a0 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -421,9 +421,9 @@
                 </div>
             </div>
             <div>
-              <a role="button" class="btn btn-primary btn" data-toggle="modal" data-target=".modal_partner_assign_interested"><span class="fa fa-file-text-o"> I'm interested</span></a>
-                  <a role="button" class="btn btn-primary btn" data-toggle="modal" data-target=".modal_partner_assign_desinterested"><span class="fa fa-fw fa-times"> I'm not interested</span></a>
-                <div role="dialog" class="modal fade modal_partner_assign_interested">
+                <a role="button" class="btn btn-primary btn" data-toggle="modal" data-target=".modal_partner_assign_interested"><i class="fa fa-file-text-o"/> I'm interested</a>
+                <a role="button" class="btn btn-primary btn" data-toggle="modal" data-target=".modal_partner_assign_desinterested"><i class="fa fa-fw fa-times"/> I'm not interested</a>
+                <div class="modal fade modal_partner_assign_interested" role="form">
                     <div class="modal-dialog">
                         <form method="POST" class="js_accept_json modal-content js_website_submit_form interested_partner_assign_form">
                             <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index d032843671f..da543a6ab83 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -130,7 +130,7 @@
         <h3 t-if="len(tags)">References by Tag</h3>
         <ul class="nav nav-pills nav-stacked mt16 mb32" t-if="len(tags)">
             <a class="mr8" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
-                <span class="fa fa-1x fa-tags"> All </span></a>
+                <span class="fa fa-1x fa-tags"/> All </a>
             <t t-foreach="tags" t-as="o_tag">
                 <a t-attf-class="label label-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
                     t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index 97660c2da56..f796f7e8cd3 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -130,7 +130,9 @@
             <div class="col-md-12 mb16 mt16 country_events">
                 <div class="country_events_list">
                     <div class="text-muted text-center">
-                        <h1 class="fa fa-flag fa-5x">Events from Your Country</h1>
+                        <h1>
+                            <i class="fa fa-flag fa-5x"/>
+                            Events from Your Country</h1>
                     </div>
                 </div>
             </div>
@@ -353,8 +355,8 @@
                     <h4>When</h4>
                 </div>
                 <div class="panel-body">
-                    <span class="fa fa-clock-o"> From</span> <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'> </span><br/>
-                        <span class="fa fa-clock-o"> To</span> <span t-field="event.with_context(tz=event.date_tz).date_end" t-options='{"hide_seconds":"True"}'> </span>
+                    <i class="fa fa-clock-o"></i> From <span t-field="event.with_context(tz=event.date_tz).date_begin" t-options='{"hide_seconds":"True"}'> </span><br/>
+                    <i class="fa fa-clock-o"></i> To <span t-field="event.with_context(tz=event.date_tz).date_end" t-options='{"hide_seconds":"True"}'> </span>
                 </div>
             </div>
 
@@ -472,8 +474,8 @@
             </t>
             <t t-if="request.env.user.has_group('event.group_event_manager')">
                 <a t-attf-href="/web#id=#{event.id}&amp;view_type=form&amp;model=event.event">
-                    <span class="fa fa-plus-circle">
-                        <em>Configure and Launch Event Registration</em></span>
+                    <em><i class="fa fa-plus-circle" role="img" aria-label="Create" title="Create"></i>
+                    Configure and Launch Event Registration</em>
                 </a>
             </t>
         </div>
@@ -586,10 +588,10 @@
                     <i class="fa fa-clock-o" role="img" aria-label="Start date" title="Start date"></i> <span itemprop="startDate" t-esc="event.date_begin_located"> </span> <i>to</i> <span itemprop="endDate" t-esc="event.date_end_located"> </span>
                     <div id="add_to_calendar" class="mt4">
                         <a role="button" class="btn btn-primary mr8" t-att-href="iCal_url">
-                            <span class="fa fa-fw fa-arrow-right">Add to iCal/Outlook</span>
+                            <i class="fa fa-fw fa-arrow-right"/>Add to iCal/Outlook
                         </a>
                         <a role="button" class="btn btn-primary" t-att-href="google_url" target='_blank'>
-                            <span class="fa fa-fw fa-arrow-right">Add to Google Calendar</span>
+                            <i class="fa fa-fw fa-arrow-right"/>Add to Google Calendar
                         </a>
                     </div>
                     <div itemprop="location" class="mt16 mb8" t-field="event.address_id" t-options='{
@@ -716,7 +718,7 @@
 <!-- User Navbar -->
 <template id="content_new_event" inherit_id="website.user_navbar">
     <xpath expr="//div[@id='o_new_content_menu_choices']//ul" position="inside">
-        <li groups="event.group_event_manager"><a href="#" data-action="new_event"><p class="fa fa-glass">New Event</p></a></li>
+        <li groups="event.group_event_manager"><a href="#" data-action="new_event"><i class="fa fa-glass"/><p>New Event</p></a></li>
     </xpath>
 </template>
 </odoo>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 9ed626a1eae..28953a03500 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -765,8 +765,8 @@
     <t t-call="website_forum.header">
         <div class="alert alert-info text-center" role="status" t-if="forum and question.state == 'pending' and user.karma>=forum.karma_moderate and question.active">
             <p class='text-muted mb16'>This post is currently awaiting moderation and not yet published... Do you want <i>Accept</i> or <i>Reject</i> this post ?</p>
-            <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/validate" type="button" class="btn btn-success"><span class="fa fa-suffix-check">Accept </span></a>
-            <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/refuse" type="button" class="btn btn-danger"><span class="fa fa-suffix-times">Reject </span></a>
+            <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/validate" type="button" class="btn btn-success">Accept <i class="fa fa-check"/></a>
+            <a role="button" t-attf-href="/forum/#{slug(forum)}/post/#{slug(question)}/refuse" type="button" class="btn btn-danger">Reject <i class="fa fa-times"/></a>
         </div>
         <div class="alert alert-info text-center" role="status" t-if="question.state == 'pending' and user.karma &lt; forum.karma_moderate">
             Waiting for validation
@@ -1572,7 +1572,7 @@
 <!-- User Navbar -->
 <template id="content_new_forum" inherit_id="website.user_navbar">
     <xpath expr="//div[@id='o_new_content_menu_choices']//ul" position="inside">
-        <li groups="website.group_website_designer"><a href="#" data-action="new_forum"><p class="fa fa-comment">New Forum</p></a></li>
+        <li groups="website.group_website_designer"><a href="#" data-action="new_forum"><i class="fa fa-comment"/><p>New Forum</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_gengo/static/src/xml/website.gengo.xml b/addons/website_gengo/static/src/xml/website.gengo.xml
index 85cf604dd94..102e178c6f2 100644
--- a/addons/website_gengo/static/src/xml/website.gengo.xml
+++ b/addons/website_gengo/static/src/xml/website.gengo.xml
@@ -2,8 +2,8 @@
 <templates id="template" xml:space="preserve">
 <t t-name="website.ButtonGengoTranslator">
     <a role="button" class="btn btn-danger gengo_post" data-action="translation_gengo_post" href="#">Auto Translate</a>
-    <a role="button" class="btn btn-danger hidden gengo_wait disabled"  href="#"><span class="fa fa-spinner fa-spin"> Wait</span></a>
-    <a role="button" class="btn btn-danger hidden gengo_inprogress disabled"  href="#"> <span class="fa fa-clock-o"> Translation in Progress</span></a>
+    <a role="button" class="btn btn-danger hidden gengo_wait disabled"  href="#"><i class="fa fa-spinner fa-spin"></i> Wait</a>
+    <a role="button" class="btn btn-danger hidden gengo_inprogress disabled"  href="#"> <i class="fa fa-clock-o"></i> Translation in Progress</a>
     <a role="button" class="btn btn-link gengo_info" data-action="translation_gengo_info">Count Words</a>
 </t>
 <t t-name="web_editor.TranslatorInfoDialog">
@@ -90,12 +90,12 @@
                 </header>
                 <main class="modal-body">
                     <b>
-                        <div class="text-muted mb16"> <span class="fa fa-search-plus"> <t t-esc="widget.new_words"></t> new words found on this page.</span></div>
-                        <h4><span class="fa fa-tachometer"> Gengo Statistics</span> <a href="https://gengo.com/c/dashboard" class="pull-right" target="new">Gengo Dashboard</a></h4>
+                        <div class="text-muted mb16"> <i class="fa fa-search-plus"></i> <t t-esc="widget.new_words"></t> new words found on this page.</div>
+                        <h4><i class="fa fa-tachometer"></i> Gengo Statistics <a href="https://gengo.com/c/dashboard" class="pull-right" target="new">Gengo Dashboard</a></h4>
                         <hr class="mt8"/>
-                        <div class="text-info mb8"> <span class="fa fa-align-left"> Words posted for translate <t t-esc="widget.total"></t></span></div>
-                        <div class="text-warning mb8"> <span class="fa fa-cogs"> Words in progress <t t-esc="widget.inprogess"></t></span></div>
-                        <div class="text-success mb8"> <span class="fa fa-check"> Translated words <t t-esc="widget.done"></t></span></div>
+                        <div class="text-info mb8"> <i class="fa fa-align-left"></i> Words posted for translate <t t-esc="widget.total"></t></div>
+                        <div class="text-warning mb8"> <i class="fa fa-cogs"></i> Words in progress <t t-esc="widget.inprogess"></t></div>
+                        <div class="text-success mb8"> <i class="fa fa-check"></i> Translated words <t t-esc="widget.done"></t></div>
                     </b>
                 </main>
                 <footer class="modal-footer">
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index a2b3621080b..14fdac7edbc 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -306,36 +306,44 @@
         <div class="container">
             <div class="row">
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mb0 mt8 fa fa-2x fa-heart">Benefits</h4>
+                    <h4 class="mb0 mt8"><span class="fa fa-2x fa-heart"/>
+                    Benefits</h4>
                     <p>Healthcare, dental, vision, life insurance, Flexible Spending Account (FSA), Health Savings Account (HSA)</p>
                 </div>
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mt8 mb0 fa fa-2x fa-sun-o">PTOs</h4>
+                    <h4 class="mt8 mb0"><span class="fa fa-2x fa-sun-o"/>
+                    PTOs</h4>
                     <p>Vacation, Sick, and paid leaves</p>
                 </div>
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mt8 mb0 fa fa-2x fa-car">Save on commute</h4>
+                    <h4 class="mt8 mb0"><span class="fa fa-2x fa-car"/>
+                    Save on commute</h4>
                     <p>Pre-tax commuter benefitsbr <br/>(parking and transit) </p>
                     </div>
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mb0 mt8 fa fa-2x fa-check-circle">Discount Programs</h4>
+                    <h4 class="mb0 mt8"><span class="fa fa-2x fa-check-circle"/>
+                    Discount Programs</h4>
                     <p>Brand-name product and services in categories like travel, electronics, health, fitness, cellular, and more</p>
                 </div>
             </div><div class="row">
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mb0 mt8 fa fa-2x fa-map-marker">Prime location</h4>
+                    <h4 class="mb0 mt8"><span class="fa fa-2x fa-map-marker"/>
+                    Prime location</h4>
                     <p>Only a couple blocs from BART, Caltrain, Highway 101, carpool pickup, and Bay Bridge.</p>
                 </div>
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mt8 mb0 fa fa-2x fa-calendar">Sponsored Events</h4>
+                    <h4 class="mt8 mb0"><span class="fa fa-2x fa-calendar"/>
+                    Sponsored Events</h4>
                     <p>Tuesday Dinners, Monthly Lunch Mixers, Monthly Happy Hour, Annual day event</p>
                 </div>
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mt8 mb0 fa fa-2x fa-futbol-o">Sport Activity</h4>
+                    <h4 class="mt8 mb0"><span class="fa fa-2x fa-futbol-o"/>
+                    Sport Activity</h4>
                     <p>Play any sport with colleagues and the bill is covered</p>
                     </div>
                 <div class="text-center col-md-3 mt16 mb16">
-                    <h4 class="mb0 mt8 fa fa-2x fa-coffee">Eat &amp; Drink</h4>
+                    <h4 class="mb0 mt8"><span class="fa fa-2x fa-coffee"/>
+                    Eat &amp; Drink</h4>
                     <p>Peet's and Philz coffee provided all day to order and pantry snacks</p>
                 </div>
             </div>
@@ -498,7 +506,7 @@
 <!-- User Navbar -->
 <template id="content_new_job_offer" inherit_id="website.user_navbar">
     <xpath expr="//div[@id='o_new_content_menu_choices']//ul" position="inside">
-        <li groups="hr_recruitment.group_hr_recruitment_manager"><a href="/jobs/add" class="js_link2post"><p class="fa fa-briefcase">New Job Offer</p></a></li>
+        <li groups="hr_recruitment.group_hr_recruitment_manager"><a href="/jobs/add" class="js_link2post"><i class="fa fa-briefcase"/><p>New Job Offer</p></a></li>
     </xpath>
 </template>
 
diff --git a/addons/website_hr_recruitment/views/website_hr_recuitment_snippets.xml b/addons/website_hr_recruitment/views/website_hr_recuitment_snippets.xml
index b06518b8f1b..6480e2b5a16 100644
--- a/addons/website_hr_recruitment/views/website_hr_recuitment_snippets.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recuitment_snippets.xml
@@ -35,10 +35,10 @@
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#">Rating type</a>
             <ul class="dropdown-menu" role="menu">
-                <li data-select_class="s_hr_rating_stars"><a role="menuitem" href="#" class="fa fa-star"> Stars</a></li>
-                <li data-select_class="s_hr_rating_bolts"><a role="menuitem" href="#" class="fa fa-bolt"> Bolts</a></li>
-                <li data-select_class="s_hr_rating_hearts"><a role="menuitem" href="#" class="fa fa-heart"> Hearts</a></li>
-                <li data-select_class="s_hr_rating_bar"><a role="menuitem" href="#" class="fa fa-tasks"> Bar</a></li>
+                <li data-select_class="s_hr_rating_stars"><a role="menuitem" href="#"><i class="fa fa-star"/> Stars</a></li>
+                <li data-select_class="s_hr_rating_bolts"><a role="menuitem" href="#"><i class="fa fa-bolt"/> Bolts</a></li>
+                <li data-select_class="s_hr_rating_hearts"><a role="menuitem" href="#"><i class="fa fa-heart"/> Hearts</a></li>
+                <li data-select_class="s_hr_rating_bar"><a role="menuitem" href="#"><i class="fa fa-tasks"/> Bar</a></li>
             </ul>
         </li>
     </div>
diff --git a/addons/website_mail_channel/views/snippets.xml b/addons/website_mail_channel/views/snippets.xml
index 770b17b3fac..e10e7e51128 100644
--- a/addons/website_mail_channel/views/snippets.xml
+++ b/addons/website_mail_channel/views/snippets.xml
@@ -28,9 +28,9 @@
                     </span>
                 </div>
                 <p class="js_mg_details hidden well well-sm">
-                    <span class="js_mg_email hidden"><a href="#" class="js_mg_email fa fa-envelope-o"> send mail</a> - </span>
-                    <a href="#" class="js_mg_link fa fa-file-o"> archives</a> -
-                    <a role="button" href="#" class="js_unfollow_btn fa fa-times"> unsubscribe</a>
+                    <span class="js_mg_email hidden"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
+                    <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
+                    <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
                 </p>
                 <p class="js_mg_confirmation hidden well well-sm">
                     a confirmation email has been sent.
diff --git a/addons/website_mail_channel/views/website_mail_channel_templates.xml b/addons/website_mail_channel/views/website_mail_channel_templates.xml
index cbf2536eaf7..3a9c01908c8 100644
--- a/addons/website_mail_channel/views/website_mail_channel_templates.xml
+++ b/addons/website_mail_channel/views/website_mail_channel_templates.xml
@@ -44,8 +44,8 @@
                     <div t-esc="group.description" class="text-muted"/>
                 </div>
                 <div class="col-md-2">
-                    <t class='fa fa-fw fa-user' t-esc="group_data[group.id]['members_count']"/> members<br />
-                    <t class='fa fa-fw fa-envelope-o' t-raw="group_data[group.id]['monthly_message_nbr']"/> messages / month
+                    <i class='fa fa-fw fa-user' role="img" aria-label="Recipients" title="Recipients"/> <t t-esc="group_data[group.id]['members_count']"/> members<br />
+                    <i class='fa fa-fw fa-envelope-o' role="img" aria-label="Traffic" title="Traffic"/> <t t-raw="group_data[group.id]['monthly_message_nbr']"/> messages / month
                 </div>
                 <div class="col-md-3">
                     <!--<t t-call="website_mail.follow"><t t-set="object" t-value="group"/></t>-->
@@ -68,9 +68,9 @@
                             </span>
                         </div>
                         <p class="js_mg_details hidden well well-sm">
-                            <span class="js_mg_email hidden"><a href="#" class="js_mg_email fa fa-envelope-o"> send mail</a> - </span>
-                            <a href="#" class="js_mg_link fa fa-file-o"> archives</a> -
-                            <a role="button" href="#" class="js_unfollow_btn fa fa-times"> unsubscribe</a>
+                            <span class="js_mg_email hidden"><a href="#" class="js_mg_email"><i class="fa fa-envelope-o"/> send mail</a> - </span>
+                            <a href="#" class="js_mg_link"><i class="fa fa-file-o"/> archives</a> -
+                            <a role="button" href="#" class="js_unfollow_btn"><i class="fa fa-times"/> unsubscribe</a>
                         </p>
                     </div>
 
diff --git a/addons/website_quote/data/website_quote_demo.xml b/addons/website_quote/data/website_quote_demo.xml
index ca79a4af27f..4a1c883455e 100644
--- a/addons/website_quote/data/website_quote_demo.xml
+++ b/addons/website_quote/data/website_quote_demo.xml
@@ -68,28 +68,28 @@
                     <div class="container text-center" style="background-color:#eeeeee">
                         <div class="row mt16 mb16">
                             <div class="col-md-4">
-                                <p class="fa fa-mortar-board fa-5x">
-                                <span class="text-muted">Is fully trained on Odoo</span></p>
+                                <span class="fa fa-mortar-board fa-5x" aria-label="Training" title="Training" role="img"></span>
+                                <p class="text-muted">Is fully trained on Odoo</p>
                             </div>
                             <div class="col-md-4">
-                                <p class="fa fa-github fa-5x">
-                                <span class="text-muted">Has access to Odoo Enterprise source code on Github and latest bug fixes</span></p>
+                                <span class="fa fa-github fa-5x" role="img" aria-label="GitHub" title="GitHub"></span>
+                                <p class="text-muted">Has access to Odoo Enterprise source code on Github and latest bug fixes</p>
                             </div>
                             <div class="col-md-4">
-                                <p class="fa fa-bug fa-5x">
-                                <span class="text-muted">Has a direct relationship with Odoo SA to escalate issues</span></p>
+                                <span class="fa fa-bug fa-5x" role="img" title="Direct Sale" aria-label="Direct Sale"></span>
+                                <p class="text-muted">Has a direct relationship with Odoo SA to escalate issues</p>
                             </div>
                             <div class="col-md-4">
-                                <p class="fa fa-file-text-o fa-5x">
-                                <span class="text-muted">Publishes references directly on Odoo.com</span></p>
+                                <span class="fa fa-file-text-o fa-5x" role="img" aria-label="Reference" title="Reference"></span>
+                                <p class="text-muted">Publishes references directly on Odoo.com</p>
                             </div>
                             <div class="col-md-4">
-                                <p class="fa fa-certificate fa-5x">
-                                <span class="text-muted">Follows a transparent ranking system. Ready - Silver - Gold</span></p>
+                                <span class="fa fa-certificate fa-5x" role="img" aria-label="Ranking" title="Ranking"></span>
+                                <p class="text-muted">Follows a transparent ranking system. Ready - Silver - Gold</p>
                             </div>
                             <div class="col-md-4">
-                                <p class="fa fa-refresh fa-5x">
-                                <span class="text-muted">Gets access to training sessions (updated weekly)</span></p>
+                                <span class="fa fa-refresh fa-5x" role="img" aria-label="Training" title="Training"></span>
+                                <p class="text-muted">Gets access to training sessions (updated weekly)</p>
                             </div>
                         </div>
                     </div>
diff --git a/addons/website_quote/views/website_quote_templates.xml b/addons/website_quote/views/website_quote_templates.xml
index c9c1d856185..7c6614a80a5 100644
--- a/addons/website_quote/views/website_quote_templates.xml
+++ b/addons/website_quote/views/website_quote_templates.xml
@@ -234,7 +234,7 @@
                           </div>
                           <div class="text-center" t-if="need_payment or (quotation.state in ('sale') and quotation.has_to_be_paid() and tx_state != 'done')" style="padding: 10px">
                               <a role="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#modalaccept">
-                                  <span class="fa fa-check"> Pay Now</span>
+                                  <i class="fa fa-check"></i> Pay Now
                               </a>
                           </div>
                           <hr class="mt0 mb0"/>
@@ -401,18 +401,18 @@
 
                       <div class="text-center hidden-print mt16 mb16" id="quotation_toolbar" t-if="quotation.state in ('draft', 'sent', 'waiting_date')">
                           <a role="button" class="btn btn-success" data-toggle="modal" data-target="#modalaccept" t-if="order_valid and not quotation.has_to_be_paid()">
-                              <span class="fa fa-check"> Accept</span>
+                              <i class="fa fa-check"></i> Accept
                           </a>
                           <a role="button" class="btn btn-success" data-toggle="modal" data-target="#modalaccept" t-if="order_valid and quotation.has_to_be_paid()">
-                              <span class="fa fa-check"> Accept &amp; Pay</span>
+                              <i class="fa fa-check"></i> Accept &amp; Pay
                           </a>
                           <a role="button" class="btn btn-danger" data-toggle="modal" data-target="#modaldecline">
-                              <span class="fa fa-times"> Reject</span>
+                              <i class="fa fa-times"></i> Reject
                           </a>
                       </div>
                       <div class="text-center" t-if="need_payment or (quotation.state in ('sale') and quotation.has_to_be_paid() and tx_state != 'done')" style="padding: 10px">
                           <a role="button" class="btn btn-primary" data-toggle="modal" data-target="#modalaccept">
-                              <span class="fa fa-check"> Pay Now</span>
+                              <i class="fa fa-check"></i> Pay Now
                           </a>
                       </div>
 
@@ -438,7 +438,7 @@
       </xpath>
       <xpath expr="//div[@id='quotation_toolbar']/a[@data-target='#modaldecline']" position="before">
           <a role="button" class="btn btn-info" type="submit" href="#discussion">
-              <span class="fa fa-comment"> Feedback</span>
+              <i class="fa fa-comment"></i> Feedback
           </a>
       </xpath>
   </template>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index de7b6259027..27423919a7d 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -43,9 +43,8 @@
             <li class="divider hidden"/> <!-- Make sure the cart and related menus are not folded (see autohideMenu) -->
             <li id="my_cart" t-att-class="'' if website_sale_order and website_sale_order.cart_quantity else 'hidden'">
                 <a href="/shop/cart">
-                    <span class="fa fa-shopping-cart">
-                        My Cart <sup t-attf-class="my_cart_quantity label label-primary" t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />
-                    </span>
+                    <i class="fa fa-shopping-cart"></i>
+                    My Cart <sup t-attf-class="my_cart_quantity label label-primary" t-esc="website_sale_order and website_sale_order.cart_quantity or ''" />
                 </a>
             </li>
         </xpath>
@@ -779,8 +778,8 @@
                                             <div class="col-md-3 col-sm-4">
                                             </div>
                                             <div class="col-md-9 col-sm-8">
-                                                <a role="button" href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-chevron-left" > Previous</span></a>
-                                                <a role="button" class="fa fa-chevron-suffix-right btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next</a>
+                                                <a role="button" href="/shop/checkout" class="btn btn-default mb32 pull-left"><span class="fa fa-chevron-left" /> Previous</a>
+                                                <a role="button" class="btn btn-primary pull-right mb32 o_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
                                             </div>
                                         </div>
                                     </form>
@@ -901,10 +900,12 @@
                                     <t t-call="website_sale.cart_lines" />
                                     <div class="clearfix" />
                                     <a role="button" href="/shop" class="btn btn-default mb32 hidden-xs hidden-sm hidden-md">
-                                        <span class="fa fa-chevron-left">Continue Shopping</span>
+                                        <span class="fa fa-chevron-left" />
+                                        <span class="">Continue Shopping</span>
                                     </a>
                                     <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8 hidden visible-lg" href="/shop/checkout?express=1">
-                                        <span class="fa fa-chevron-suffix-right">Process Checkout</span>
+                                        <span class="">Process Checkout</span>
+                                        <span class="fa fa-chevron-right" />
                                     </a>
                                     <div class="oe_structure" />
                                 </div>
@@ -914,11 +915,12 @@
                             <t t-call='website_sale.short_cart_summary'/>
                             <div class='hidden-lg'>
                                 <a role="button" href="/shop" class="btn btn-default mb32">
-                                    <span class="fa fa-chevron-left">
-                                    Continue<span class="hidden-xs"> Shopping</span></span>
+                                    <span class="fa fa-chevron-left" />
+                                    Continue<span class="hidden-xs"> Shopping</span>
                                 </a>
                                 <a role="button" t-if="website_sale_order and website_sale_order.website_order_line" class="btn btn-primary pull-right mb32 mr8" href="/shop/checkout?express=1">
-                                    <span class="fa fa-suffix-chevron-right">Process Checkout</span>
+                                    <span class="">Process Checkout</span>
+                                    <span class="fa fa-chevron-right" />
                                 </a>
                             </div>
                         </div>
@@ -1056,7 +1058,7 @@
                                                 <form action="/shop/address" method="post" class=''>
                                                     <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                                     <a role="button" class='a-submit btn btn-default mb16 btn-block'>
-                                                        <span class="fa fa-plus-square"> Add an address</span>
+                                                        <i class="fa fa-plus-square"></i> Add an address
                                                     </a>
                                                 </form>
                                             </div>
@@ -1078,8 +1080,8 @@
                             <div class="clearfix" />
                             <div>
                                 <a role="button" href="/shop/cart" class="btn btn-default mb32">
-                                    <span class="fa fa-chevron-left" > Return to Cart</span></a>
-                                <a role="button" class="btn btn-primary pull-right mb32 " href="/shop/confirm_order"><span class="fa fa-suffix-chevron-right">Confirm</span></a>
+                                    <span class="fa fa-chevron-left" /> Return to Cart</a>
+                                <a role="button" class="btn btn-primary pull-right mb32 " href="/shop/confirm_order">Confirm <span class="fa fa-chevron-right" /></a>
                             </div>
                         </div>
                     </div>
@@ -1105,7 +1107,7 @@
                 <div class='panel-footer' t-if='not readonly'>
                     <span class='btn-ship' t-att-style="'' if selected else 'display:none;'">
                         <a role="button" class="btn btn-block btn-primary">
-                            <span class='fa fa-check'> Ship to this address</span>
+                            <i class='fa fa-check'></i> Ship to this address
                         </a>
                     </span>
                     <span class='btn-ship' t-att-style="'' if not selected else 'display:none;'">
@@ -1250,10 +1252,10 @@
                                     <div class="clearfix"/>
                                     <div style='padding: 0 15px'>
                                         <a role="button" t-att-href="mode == ('new', 'billing') and '/shop/cart' or '/shop/checkout'" class="btn btn-default mb32">
-                                            <span class="fa fa-chevron-left">Back </span>
+                                            <span class="fa fa-chevron-left" /> Back
                                         </a>
                                         <a role="button" class="btn btn-primary pull-right mb32 a-submit a-submit-disable a-submit-loading">
-                                            <span class="fa fa-suffix-chevron-right">Next </span>
+                                            <span>Next </span><span class="fa fa-chevron-right" />
                                         </a>
                                     </div>
                                 </form>
@@ -1332,7 +1334,7 @@
                                 <a role="button" class="btn-link"
                                     groups="base.group_system"
                                     t-attf-href="/web#return_label=Website&amp;action=#{payment_action_id}">
-                                    <span class="fa fa-arrow-right"> Add payment acquirers</span>
+                                        <i class="fa fa-arrow-right"></i> Add payment acquirers
                                 </a>
                             </div>
                             <div class="js_payment mb64 row" t-if="not website_sale_order.amount_total" id="payment_method">
@@ -1340,8 +1342,8 @@
                                     <form target="_self" action="/shop/payment/validate" method="post" class="pull-right">
                                         <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()" />
                                         <a role="button" class="btn btn-primary a-submit">
-                                            <span class="fa fa-suffix-chevron-right" t-if="order.amount_total &gt; 0">Pay Now </span>
-                                            <span class="fa fa-suffix-chevron-right" t-if="order.amount_total == 0">Confirm Order </span>
+                                            <span t-if="order.amount_total &gt; 0">Pay Now <span class="fa fa-chevron-right"></span></span>
+                                            <span t-if="order.amount_total == 0">Confirm Order <span class="fa fa-chevron-right"></span></span>
                                         </a>
                                     </form>
                                 </div>
@@ -1603,8 +1605,8 @@
         <xpath expr="//div[@id='o_new_content_menu_choices']//ul" position="inside">
             <li groups="sales_team.group_sale_manager">
                 <a id="create-new-product" href="#" data-action="new_product">
-                    <p class="fa fa-shopping-cart">
-                    New Product</p>
+                    <i class="fa fa-shopping-cart" />
+                    <p>New Product</p>
                 </a>
             </li>
         </xpath>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index f89b89c3682..7f52008c315 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -58,7 +58,7 @@
     <template id='recommended_product' inherit_id="website_sale.recommended_products" name="Alternative Products">
         <xpath expr="//h3" position="replace">
             <t t-set="ids" t-value="str(product.product_variant_id.id) + ','+ ','.join([str(a) for a in product.alternative_product_ids.mapped('product_variant_id.id')])"/>
-            <div><span class='h3'>Suggested alternatives: </span><a role="button" class="btn btn-primary fa fa-exchange" t-attf-href="/shop/compare/?products=#{ids}"> Compare</a></div>
+            <div><span class='h3'>Suggested alternatives: </span><a role="button" class="btn btn-primary" t-attf-href="/shop/compare/?products=#{ids}"><i class="fa fa-exchange"></i> Compare</a></div>
         </xpath>
     </template>
 
@@ -95,7 +95,7 @@
 
                                         <form action="/shop/cart/update" method="post" class="text-center">
                                             <input name="product_id" t-att-value="product.id" type="hidden"/>
-                                            <a role="button" class="btn btn-primary btn-block a-submit fa fa-shopping-cart">&amp;nbsp;Add to Cart</a>
+                                            <a role="button" class="btn btn-primary btn-block a-submit"><i class="fa fa-shopping-cart"></i>&amp;nbsp;Add to Cart</a>
                                         </form>
                                     </div>
                                 </td>
diff --git a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
index 4a051e7241b..d11ea0e4595 100644
--- a/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
+++ b/addons/website_sale_wishlist/views/website_sale_wishlist_template.xml
@@ -63,7 +63,7 @@
                                         <td class='text-left'>
                                             <strong><a t-att-href="'/shop/product/%s' % slug(wish.product_id.product_tmpl_id)"><t t-esc="wish.product_id.display_name" /></a></strong>
                                             <small class='hidden-xs'><p t-field="wish.product_id.description_sale" class="text-muted"/></small>
-                                            <a class="o_wish_rm no-decoration"><small><span class='fa fa-trash-o'> Remove</span></small></a>
+                                            <a class="o_wish_rm no-decoration"><small><i class='fa fa-trash-o'></i> Remove</small></a>
                                         </td>
                                         <td style='width:80px'>
                                             <t t-if='wish.price_new != wish.price'>
diff --git a/addons/website_slides/static/src/xml/website_slides.xml b/addons/website_slides/static/src/xml/website_slides.xml
index de4fe12a26e..0df830eb5db 100644
--- a/addons/website_slides/static/src/xml/website_slides.xml
+++ b/addons/website_slides/static/src/xml/website_slides.xml
@@ -9,7 +9,7 @@
                         <h3 class="modal-title">Upload Presentation</h3>
                     </header>
                     <div class="oe_slides_upload_loading text-center" style="display:none" aria-hidden="true" role="status">
-                        <h4><span class='fa fa-spinner fa-spin'> Uploading presentation...  </span></h4>
+                        <h4><i class='fa fa-spinner fa-spin'></i> Uploading presentation...  </h4>
                     </div>
                     <main class="modal-body">
                         <form class="clearfix form-horizontal">
diff --git a/addons/website_slides/views/res_config_settings_views.xml b/addons/website_slides/views/res_config_settings_views.xml
index 28984306593..468c58e383c 100644
--- a/addons/website_slides/views/res_config_settings_views.xml
+++ b/addons/website_slides/views/res_config_settings_views.xml
@@ -18,7 +18,7 @@
                                 <field name="website_slide_google_app_key" class="oe_inline"/>
                             </div>
                             <div class="oe_link">
-                                <a class="fa fa-arrow-right" href="https://console.developers.google.com/flows/enableapi?apiid=drive,youtube">
+                                <a href="https://console.developers.google.com/flows/enableapi?apiid=drive,youtube"><span class="fa fa-arrow-right"/>
                                     Create a Google Project and Get a Key
                                 </a>
                             </div>
diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml
index f864795e695..151a52f8bde 100644
--- a/addons/website_slides/views/website_slides.xml
+++ b/addons/website_slides/views/website_slides.xml
@@ -479,27 +479,27 @@
                             <ul class="nav nav-tabs" role="tablist">
                                 <li t-att-class="not comments and 'active' or None">
                                     <a aria-controls="about" href="#about" role="tab" data-toggle="tab">
-                                        <span class="fa fa-home"> About</span>
+                                        <i class="fa fa-home"></i> About
                                     </a>
                                 </li>
                                 <li>
                                     <a aria-controls="share" href="#share" role="tab" data-toggle="tab">
-                                        <span class="fa fa-share-alt"> Share</span>
+                                        <i class="fa fa-share-alt"></i> Share
                                     </a>
                                 </li>
                                 <li t-att-class="comments and 'active' or None">
                                     <a aria-controls="discuss" href="#discuss" role="tab" data-toggle="tab">
-                                        <span class="fa fa-comments-o"> Comments</span>
+                                        <i class="fa fa-comments-o"></i> Comments
                                     </a>
                                 </li>
                                 <li>
                                     <a aria-controls="transcript" href="#transcript" role="tab" data-toggle="tab">
-                                        <span class="fa fa-align-justify"> Transcript</span>
+                                        <i class="fa fa-align-justify"></i> Transcript
                                     </a>
                                 </li>
                                 <li>
                                     <a aria-controls="statistic" href="#statistic" role="tab" data-toggle="tab">
-                                        <span class="fa fa-bar-chart"> Statistics</span>
+                                        <i class="fa fa-bar-chart"></i> Statistics
                                     </a>
                                 </li>
                             </ul>
@@ -521,7 +521,7 @@
                                     </t>
                                 </div>
                                 <div role="tabpanel" class="tab-pane fade" t-if="not slide.website_published" id="share">
-                                    <h4 class="fa fa-info-circle">
+                                    <h4><i class="fa fa-info-circle"></i>
                                         The social sharing module will be unlocked when a moderator will allow your publication.
                                     </h4>
                                 </div>
@@ -544,15 +544,15 @@
                                             <ul class="list-group">
                                                 <li class="list-group-item">
                                                     <span class="badge"><t t-esc="slide.total_views"/></span>
-                                                    <span class="fa fa-play"> Total Views</span>
+                                                    <i class="fa fa-play"></i> Total Views
                                                 </li>
                                                 <li class="list-group-item">
                                                     <span class="badge"><t t-esc="slide.slide_views"/></span>
-                                                    <span class="fa fa-circle-o"> Website Views</span>
+                                                    <i class="fa fa-circle-o"></i> Website Views
                                                 </li>
                                                 <li class="list-group-item" t-if="not slide.document_id">
                                                     <span class="badge"><t t-esc="slide.embed_views"/></span>
-                                                    <span class="fa fa-code"> Embedded Views</span>
+                                                    <i class="fa fa-code"></i> Embedded Views
                                                 </li>
                                             </ul>
                                         </div>
@@ -562,19 +562,19 @@
                                             <ul class="list-group">
                                                 <li class="list-group-item">
                                                     <span class="badge" id="total-share">0</span>
-                                                    <span class="fa fa-share-alt"> Social Shares</span>
+                                                    <i class="fa fa-share-alt"></i> Social Shares
                                                 </li>
                                                 <li class="list-group-item">
                                                     <span class="badge"><t t-esc="slide.likes"/></span>
-                                                    <span class="fa fa-thumbs-up"> Likes</span>
+                                                    <i class="fa fa-thumbs-up"></i> Likes
                                                 </li>
                                                 <li class="list-group-item">
                                                     <span class="badge"><t t-esc="slide.dislikes"/></span>
-                                                    <span class="fa fa-thumbs-down"> Dislikes</span>
+                                                    <i class="fa fa-thumbs-down"></i> Dislikes
                                                 </li>
                                                 <li class="list-group-item">
                                                     <span class="badge"><t t-esc="len(slide.website_message_ids)"/></span>
-                                                    <span class="fa fa-comments-o"> Comments</span>
+                                                    <i class="fa fa-comments-o"></i> Comments
                                                 </li>
                                             </ul>
                                         </div>
@@ -584,19 +584,19 @@
                                             <ul class="list-group">
                                                 <li class="list-group-item">
                                                     <span class="badge" id="facebook-badge">0</span>
-                                                    <span class="fa fa-facebook-square"> Facebook</span>
+                                                    <i class="fa fa-facebook-square"></i> Facebook
                                                 </li>
                                                 <li class="list-group-item">
                                                     <span class="badge" id="twitter-badge">0</span>
-                                                    <span class="fa fa-twitter-square"> Twitter</span>
+                                                    <i class="fa fa-twitter-square"></i> Twitter
                                                 </li>
                                                 <li class="list-group-item">
                                                     <span class="badge" id="linkedin-badge">0</span>
-                                                    <span class="fa fa-linkedin-square"> LinkedIn</span>
+                                                    <i class="fa fa-linkedin-square"></i> LinkedIn
                                                 </li>
                                                 <li class="list-group-item">
                                                     <span class="badge" id="google-badge">0</span>
-                                                    <span class="fa fa-google-plus-square"> Google+</span>
+                                                    <i class="fa fa-google-plus-square"></i> Google+
                                                 </li>
                                             </ul>
                                         </div>
diff --git a/addons/website_slides/views/website_slides_embed.xml b/addons/website_slides/views/website_slides_embed.xml
index 89f64d63f93..ba7682a631a 100644
--- a/addons/website_slides/views/website_slides_embed.xml
+++ b/addons/website_slides/views/website_slides_embed.xml
@@ -45,13 +45,13 @@
                                     </div>
                                 </div>
                                 <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 text-right">
-                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_share"><span class="fa fa-share-alt"> Share</span></b>
+                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_share"><i class="fa fa-share-alt"></i> Share</b>
                                 </div>
                                 <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 text-right">
-                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_email"><span class="fa fa-envelope"> Email</span></b>
+                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_email"><i class="fa fa-envelope"></i> Email</b>
                                 </div>
                                 <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2 text-right">
-                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_embed"><span class="fa fa-code"> Embed</span></b>
+                                    <b class="oe_slide_js_embed_option_link" data-slide-option-id="#slide_embed"><i class="fa fa-code"></i> Embed</b>
                                 </div>
                             </div>
                         </div>
@@ -92,7 +92,7 @@
                             <div id="PDFViewerLoader" class="oe_slides_loader">
                                 <img class="img-responsive" t-attf-src="/web/image/slide.slide/#{slide.id}/image_medium" style="margin:auto;height:100%" alt="suggest_slide.name"/>
                                 <h4 class="text-center">
-                                    <span class="fa fa-spinner fa-spin"> Loading ...</span>
+                                    <i class="fa fa-spinner fa-spin"></i> Loading ...
                                 </h4>
                             </div>
                             <canvas id="PDFViewerCanvas" class="img-responsive" style="margin:auto;height:100%;display:none;"></canvas>
diff --git a/addons/website_twitter/static/src/xml/website.twitter.xml b/addons/website_twitter/static/src/xml/website.twitter.xml
index 8b8ace63595..e6ceb3ccb98 100644
--- a/addons/website_twitter/static/src/xml/website.twitter.xml
+++ b/addons/website_twitter/static/src/xml/website.twitter.xml
@@ -37,7 +37,7 @@
             <div class="alert alert-warning" role="alert">
                 <t t-esc="data.error"/>
                 <t t-if='!data.nodata'>
-                    <a class="lnk_configure fa fa-plus-circle" href="/web#action=website.action_website_configuration"> Twitter Configuration</a>
+                    <a class="lnk_configure" href="/web#action=website.action_website_configuration"><i class="fa fa-plus-circle"/> Twitter Configuration</a>
                 </t>
             </div>
         </div>
diff --git a/odoo/addons/base/tests/test_view_validation.py b/odoo/addons/base/tests/test_view_validation.py
index c3ac8020c27..5e550414436 100644
--- a/odoo/addons/base/tests/test_view_validation.py
+++ b/odoo/addons/base/tests/test_view_validation.py
@@ -71,12 +71,15 @@ valid_form = etree.parse(io.BytesIO(b'''\
                 <span class="fa fa-success" aria-label="Test span" title="Test span"/>
                 <a class="fa fa-success"><span aria-label="test" title="test"/></a>
                 <a class="btn" role="button"/>
+                <i class="fa fa-check"/> Test icon
+                <i class="fa fa-check"/>
             </group>
         </page>
     </notebook>
     <div role="dialog" class="modal">
         <header class="modal-header"/>
         <main class="modal-body"/>
+        <i class="fa fa-check"/> <span>Test</span>
         <footer class="modal-footer"/>
     </div>
     <div class="tab-pane" role="tabpanel"/>
diff --git a/odoo/tools/view_validation.py b/odoo/tools/view_validation.py
index 7c69906220d..4932b026310 100644
--- a/odoo/tools/view_validation.py
+++ b/odoo/tools/view_validation.py
@@ -155,6 +155,12 @@ def valid_alternative_icon_text(arch):
     xpath += '[not(descendant-or-self::field)]'
     # And finally, if there is some text, it's good too
     xpath += '[not(descendant-or-self::*[text()])]'
+    # Following or preceding text
+    xpath += '[not(preceding-sibling::text()[normalize-space()])]'
+    xpath += '[not(following-sibling::text()[normalize-space()])]'
+    # Following or preceding text in span
+    xpath += '[not(preceding-sibling::span[text()])]'
+    xpath += '[not(following-sibling::span[text()])]'
 
     if arch.xpath(xpath):
         return "Warning"
@@ -188,6 +194,12 @@ def valid_title_icon(arch):
     xpath += '[not(descendant-or-self::field)]'
     # And finally, if there is some text, it's good too
     xpath += '[not(descendant-or-self::*[text()])]'
+    # Following or preceding text
+    xpath += '[not(preceding-sibling::text()[normalize-space()])]'
+    xpath += '[not(following-sibling::text()[normalize-space()])]'
+    # Following or preceding text in span
+    xpath += '[not(preceding-sibling::span[text()])]'
+    xpath += '[not(following-sibling::span[text()])]'
 
     if arch.xpath(xpath):
         return "Warning"