From 2f6699f655589518fb6e096a2ef6c1d2b9144f74 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Mon, 7 Sep 2020 12:21:16 +0300
Subject: [PATCH] All buttons have their icon.

---
 application/views/backend/calendar.php        | 56 +++++++++----
 application/views/backend/customers.php       | 10 +--
 application/views/backend/services.php        | 20 ++---
 application/views/backend/settings.php        | 10 +--
 application/views/backend/users.php           | 34 ++++----
 .../js/backend_calendar_appointments_modal.js |  6 +-
 assets/js/backend_calendar_default_view.js    | 63 ++++++++++++--
 assets/js/backend_calendar_table_view.js      | 83 +++++++++++++++++--
 8 files changed, 213 insertions(+), 69 deletions(-)

diff --git a/application/views/backend/calendar.php b/application/views/backend/calendar.php
index d59b2a26..48d731de 100755
--- a/application/views/backend/calendar.php
+++ b/application/views/backend/calendar.php
@@ -69,7 +69,7 @@
             <?php if ($privileges[PRIV_APPOINTMENTS]['add'] == TRUE): ?>
             <div class="btn-group">
                 <button class="btn btn-light" id="insert-appointment">
-                    <i class="fas fa-plus"></i>
+                    <i class="far fa-plus-square mr-2"></i>
                     <?= lang('appointment') ?>
                 </button>
 
@@ -80,9 +80,11 @@
 
                 <div class="dropdown-menu">
                     <a class="dropdown-item" href="#" id="insert-unavailable">
+                        <i class="far fa-plus-square mr-2"></i>
                         <?= lang('unavailable') ?>
                     </a>
                     <a class="dropdown-item" href="#" id="insert-extra-period">
+                        <i class="far fa-plus-square mr-2"></i>
                         <?= lang('extra_period') ?>
                     </a>
                 </div>
@@ -90,13 +92,13 @@
             <?php endif ?>
 
             <button id="reload-appointments" class="btn btn-light" title="<?= lang('reload_appointments_hint') ?>">
-                <i class="fas fa-redo-alt"></i>
+                <i class="fas fa-sync-alt"></i>
             </button>
 
             <?php if($calendar_view === 'default'): ?>
                 <a class="btn btn-light" href="<?= site_url('backend?view=table') ?>"
                    title="<?= lang('table') ?>">
-                    <i class="far fa-list-alt"></i>
+                    <i class="fas fa-table"></i>
                 </a>
             <?php endif ?>
 
@@ -265,11 +267,15 @@
                             <?= lang('customer_details_title') ?>
                             <button id="new-customer" class="btn btn-light btn-sm" type="button"
                                     title="<?= lang('clear_fields_add_existing_customer_hint') ?>">
+                                <i class="far fa-plus-square mr-2"></i>
                                 <?= lang('new') ?>
                             </button>
                             <button id="select-customer" class="btn btn-primary btn-sm" type="button"
                                     title="<?= lang('pick_existing_customer_hint') ?>">
-                                <?= lang('select') ?>
+                                <i class="far fa-hand-pointer mr-2"></i>
+                                <span>
+                                    <?= lang('select') ?>
+                                </span>
                             </button>
                             <input id="filter-existing-customers"
                                    placeholder="<?= lang('type_to_filter_customers') ?>"
@@ -329,9 +335,14 @@
             </div>
 
             <div class="modal-footer">
-                <button id="cancel-appointment" class="btn btn-light"
-                        data-dismiss="modal"><?= lang('cancel') ?></button>
-                <button id="save-appointment" class="btn btn-primary"><?= lang('save') ?></button>
+                <button id="cancel-appointment" class="btn btn-light" data-dismiss="modal">
+                    <i class="fas fa-ban"></i>
+                    <?= lang('cancel') ?>
+                </button>
+                <button id="save-appointment" class="btn btn-primary">
+                    <i class="far fa-check-circle mr-2"></i>
+                    <?= lang('save') ?>
+                </button>
             </div>
         </div>
     </div>
@@ -395,9 +406,14 @@
                 </form>
             </div>
             <div class="modal-footer">
-                <button id="cancel-unavailable" class="btn btn-light"
-                        data-dismiss="modal"><?= lang('cancel') ?></button>
-                <button id="save-unavailable" class="btn btn-primary"><?= lang('save') ?></button>
+                <button id="cancel-unavailable" class="btn btn-light" data-dismiss="modal">
+                    <i class="fas fa-ban"></i>
+                    <?= lang('cancel') ?>
+                </button>
+                <button id="save-unavailable" class="btn btn-primary">
+                    <i class="far fa-check-circle mr-2"></i>
+                    <?= lang('save') ?>
+                </button>
             </div>
         </div>
     </div>
@@ -456,8 +472,14 @@
                 </form>
             </div>
             <div class="modal-footer">
-                <button id="cancel-extra" class="btn btn-light" data-dismiss="modal"><?= lang('cancel') ?></button>
-                <button id="save-extra" class="btn btn-primary"><?= lang('save') ?></button>
+                <button id="cancel-extra" class="btn btn-light" data-dismiss="modal">
+                    <i class="fas fa-ban"></i>
+                    <?= lang('cancel') ?>
+                </button>
+                <button id="save-extra" class="btn btn-primary">
+                    <i class="far fa-check-circle mr-2"></i>
+                    <?= lang('save') ?>
+                </button>
             </div>
         </div>
     </div>
@@ -480,8 +502,14 @@
                 </div>
             </div>
             <div class="modal-footer">
-                <button id="close-calendar" class="btn btn-light" data-dismiss="modal"><?= lang('close') ?></button>
-                <button id="select-calendar" class="btn btn-primary"><?= lang('select') ?></button>
+                <button id="close-calendar" class="btn btn-light" data-dismiss="modal">
+                    <i class="fas fa-ban"></i>
+                    <?= lang('cancel') ?>
+                </button>
+                <button id="select-calendar" class="btn btn-primary">
+                    <i class="far fa-check-circle"></i>
+                    <?= lang('select') ?>
+                </button>
             </div>
         </div>
     </div>
diff --git a/application/views/backend/customers.php b/application/views/backend/customers.php
index 52967139..1d81bc92 100755
--- a/application/views/backend/customers.php
+++ b/application/views/backend/customers.php
@@ -55,21 +55,21 @@
                 <div id="add-edit-delete-group" class="btn-group">
                     <?php if ($privileges[PRIV_CUSTOMERS]['add'] === TRUE): ?>
                     <button id="add-customer" class="btn btn-primary">
-                        <i class="fas fa-plus"></i>
+                        <i class="far fa-plus-square mr-2"></i>
                         <?= lang('add') ?>
                     </button>
                     <?php endif ?>
 
                     <?php if ($privileges[PRIV_CUSTOMERS]['edit'] === TRUE): ?>
                     <button id="edit-customer" class="btn btn-light" disabled="disabled">
-                        <i class="far fa-edit"></i>
+                        <i class="far fa-edit mr-2"></i>
                         <?= lang('edit') ?>
                     </button>
                     <?php endif ?>
 
                     <?php if ($privileges[PRIV_CUSTOMERS]['delete'] === TRUE): ?>
                     <button id="delete-customer" class="btn btn-light" disabled="disabled">
-                        <i class="far fa-trash-alt"></i>
+                        <i class="far fa-trash-alt mr-2"></i>
                         <?= lang('delete') ?>
                     </button>
                     <?php endif ?>
@@ -77,11 +77,11 @@
 
                 <div id="save-cancel-group" class="btn-group" style="display:none;">
                     <button id="save-customer" class="btn btn-primary">
-                        <i class="far fa-check-circle"></i>
+                        <i class="far fa-check-circle mr-2"></i>
                         <?= lang('save') ?>
                     </button>
                     <button id="cancel-customer" class="btn btn-light">
-                        <i class="fas fa-ban"></i>
+                        <i class="fas fa-ban mr-2"></i>
                         <?= lang('cancel') ?>
                     </button>
                 </div>
diff --git a/application/views/backend/services.php b/application/views/backend/services.php
index 94eff1dd..04576d1a 100755
--- a/application/views/backend/services.php
+++ b/application/views/backend/services.php
@@ -70,26 +70,26 @@
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-service" class="btn btn-primary">
-                                <i class="fas fa-plus"></i>
+                                <i class="far fa-plus-square mr-2"></i>
                                 <?= lang('add') ?>
                             </button>
                             <button id="edit-service" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-edit"></i>
+                                <i class="far fa-edit mr-2"></i>
                                 <?= lang('edit') ?>
                             </button>
                             <button id="delete-service" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-trash-alt"></i>
+                                <i class="far fa-trash-alt mr-2"></i>
                                 <?= lang('delete') ?>
                             </button>
                         </div>
 
                         <div class="save-cancel-group btn-group" style="display:none;">
                             <button id="save-service" class="btn btn-primary">
-                                <i class="far fa-check-circle"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                             <button id="cancel-service" class="btn btn-light">
-                                <i class="fas fa-ban"></i>
+                                <i class="fas fa-ban mr-2"></i>
                                 <?= lang('cancel') ?>
                             </button>
                         </div>
@@ -190,26 +190,26 @@
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-category" class="btn btn-primary">
-                                <i class="fas fa-plus"></i>
+                                <i class="far fa-plus-square mr-2"></i>
                                 <?= lang('add') ?>
                             </button>
                             <button id="edit-category" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-edit"></i>
+                                <i class="far fa-edit mr-2"></i>
                                 <?= lang('edit') ?>
                             </button>
                             <button id="delete-category" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-trash-alt"></i>
+                                <i class="far fa-trash-alt mr-2"></i>
                                 <?= lang('delete') ?>
                             </button>
                         </div>
 
                         <div class="save-cancel-group btn-group" style="display:none;">
                             <button id="save-category" class="btn btn-primary">
-                                <i class="far fa-check-circle"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                             <button id="cancel-category" class="btn btn-light">
-                                <i class="fas fa-ban"></i>
+                                <i class="fas fa-ban mr-2"></i>
                                 <?= lang('cancel') ?>
                             </button>
                         </div>
diff --git a/application/views/backend/settings.php b/application/views/backend/settings.php
index 17d7771f..63d6d116 100755
--- a/application/views/backend/settings.php
+++ b/application/views/backend/settings.php
@@ -71,7 +71,7 @@
                         <?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
                             <button type="button" class="save-settings btn btn-primary btn-sm mb-2"
                                     title="<?= lang('save') ?>">
-                                <i class="far fa-save"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                         <?php endif ?>
@@ -224,7 +224,7 @@
                         <?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
                             <button type="button" class="save-settings btn btn-primary btn-sm mb-2"
                                     title="<?= lang('save') ?>">
-                                <i class="far fa-save"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                         <?php endif ?>
@@ -275,7 +275,7 @@
 
                             <div class="mt-2">
                                 <button type="button" class="add-break btn btn-primary">
-                                    <i class="fas fa-plus"></i>
+                                    <i class="far fa-plus-square"></i>
                                     <?= lang('add_break');?>
                                 </button>
                             </div>
@@ -310,7 +310,7 @@
                         <?php if ($privileges[PRIV_SYSTEM_SETTINGS]['edit'] == TRUE): ?>
                             <button type="button" class="save-settings btn btn-primary btn-sm mb-2"
                                     title="<?= lang('save') ?>">
-                                <i class="far fa-save"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                         <?php endif ?>
@@ -389,7 +389,7 @@
                             <?php if ($privileges[PRIV_USER_SETTINGS]['edit'] == TRUE): ?>
                                 <button type="button" class="save-settings btn btn-primary btn-sm mb-2"
                                         title="<?= lang('save') ?>">
-                                    <i class="far fa-save"></i>
+                                    <i class="far fa-check-circle mr-2"></i>
                                     <?= lang('save') ?>
                                 </button>
                             <?php endif ?>
diff --git a/application/views/backend/users.php b/application/views/backend/users.php
index f9eae349..814985a3 100755
--- a/application/views/backend/users.php
+++ b/application/views/backend/users.php
@@ -86,26 +86,26 @@
                     <div class="float-md-left mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-provider" class="btn btn-primary">
-                                <i class="fas fa-plus"></i>
+                                <i class="far fa-plus-square mr-2"></i>
                                 <?= lang('add') ?>
                             </button>
                             <button id="edit-provider" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-edit"></i>
+                                <i class="far fa-edit mr-2"></i>
                                 <?= lang('edit') ?>
                             </button>
                             <button id="delete-provider" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-trash-alt"></i>
+                                <i class="far fa-trash-alt mr-2"></i>
                                 <?= lang('delete') ?>
                             </button>
                         </div>
 
                         <div class="save-cancel-group btn-group" style="display:none;">
                             <button id="save-provider" class="btn btn-primary">
-                                <i class="far fa-check-circle"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                             <button id="cancel-provider" class="btn btn-light">
-                                <i class="fas fa-ban"></i>
+                                <i class="fas fa-ban mr-2"></i>
                                 <?= lang('cancel') ?>
                             </button>
                         </div>
@@ -251,7 +251,7 @@
 
                         <div>
                             <button type="button" class="add-break btn btn-primary">
-                                <i class="fas fa-plus"></i>
+                                <i class="far fa-plus-square"></i>
                                 <?= lang('add_break') ?>
                             </button>
                         </div>
@@ -280,7 +280,7 @@
 
                         <div>
                             <button type="button" class="add-extra-periods btn btn-primary">
-                                <i class="fas fa-plus"></i>
+                                <i class="far fa-plus-square"></i>
                                 <?= lang('add_extra_period') ?>
                             </button>
                         </div>
@@ -334,26 +334,26 @@
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-secretary" class="btn btn-primary">
-                                <i class="fas fa-plus"></i>
+                                <i class="far fa-plus-square mr-2"></i>
                                 <?= lang('add') ?>
                             </button>
                             <button id="edit-secretary" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-edit"></i>
+                                <i class="far fa-edit mr-2"></i>
                                 <?= lang('edit') ?>
                             </button>
                             <button id="delete-secretary" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-trash-alt"></i>
+                                <i class="far fa-trash-alt mr-2"></i>
                                 <?= lang('delete') ?>
                             </button>
                         </div>
 
                         <div class="save-cancel-group btn-group" style="display:none;">
                             <button id="save-secretary" class="btn btn-primary">
-                                <i class="far fa-check-circle"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                             <button id="cancel-secretary" class="btn btn-light">
-                                <i class="fas fa-ban"></i>
+                                <i class="fas fa-ban mr-2"></i>
                                 <?= lang('cancel') ?>
                             </button>
                         </div>
@@ -496,26 +496,26 @@
                     <div class="btn-toolbar mb-4">
                         <div class="add-edit-delete-group btn-group">
                             <button id="add-admin" class="btn btn-primary">
-                                <i class="fas fa-plus"></i>
+                                <i class="far fa-plus-square mr-2"></i>
                                 <?= lang('add') ?>
                             </button>
                             <button id="edit-admin" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-edit"></i>
+                                <i class="far fa-edit mr-2"></i>
                                 <?= lang('edit') ?>
                             </button>
                             <button id="delete-admin" class="btn btn-light" disabled="disabled">
-                                <i class="far fa-trash-alt"></i>
+                                <i class="far fa-trash-alt mr-2"></i>
                                 <?= lang('delete') ?>
                             </button>
                         </div>
 
                         <div class="save-cancel-group btn-group" style="display:none;">
                             <button id="save-admin" class="btn btn-primary">
-                                <i class="far fa-check-circle"></i>
+                                <i class="far fa-check-circle mr-2"></i>
                                 <?= lang('save') ?>
                             </button>
                             <button id="cancel-admin" class="btn btn-light">
-                                <i class="fas fa-ban"></i>
+                                <i class="fas fa-ban mr-2"></i>
                                 <?= lang('cancel') ?>
                             </button>
                         </div>
diff --git a/assets/js/backend_calendar_appointments_modal.js b/assets/js/backend_calendar_appointments_modal.js
index ec265064..3662ce74 100755
--- a/assets/js/backend_calendar_appointments_modal.js
+++ b/assets/js/backend_calendar_appointments_modal.js
@@ -182,7 +182,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
             var $list = $('#existing-customers-list');
 
             if (!$list.is(':visible')) {
-                $(this).text(EALang.hide);
+                $(this).find('span').text(EALang.hide);
                 $list.empty();
                 $list.slideDown('slow');
                 $('#filter-existing-customers').fadeIn('slow');
@@ -197,7 +197,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
             } else {
                 $list.slideUp('slow');
                 $('#filter-existing-customers').fadeOut('slow');
-                $(this).text(EALang.select);
+                $(this).find('span').text(EALang.select);
             }
         });
 
@@ -380,7 +380,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
         // Close existing customers-filter frame.
         $('#existing-customers-list').slideUp('slow');
         $('#filter-existing-customers').fadeOut('slow');
-        $('#select-customer').text(EALang.select);
+        $('#select-customer span').text(EALang.select);
 
         // Setup start and datetimepickers.
         // Get the selected service duration. It will be needed in order to calculate the appointment end datetime.
diff --git a/assets/js/backend_calendar_default_view.js b/assets/js/backend_calendar_default_view.js
index 258ceb9f..6bd4abb4 100755
--- a/assets/js/backend_calendar_default_view.js
+++ b/assets/js/backend_calendar_default_view.js
@@ -350,15 +350,36 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                         'html': [
                             $('<button/>', {
                                 'class': 'edit-popover btn btn-primary ' + displayEdit,
-                                'text': EALang.edit
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-edit mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.edit
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'delete-popover btn btn-danger ' + displayDelete,
-                                'text': EALang.delete
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-trash-alt mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.delete
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'close-popover btn btn-light',
-                                'text': EALang.close
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'fas fa-ban mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.close
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -418,7 +439,14 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                             }),
                             $('<button/>', {
                                 'class': 'close-popover btn btn-light',
-                                'text': EALang.close
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'fas fa-ban mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.close
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -526,15 +554,36 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
                         'html': [
                             $('<button/>', {
                                 'class': 'edit-popover btn btn-primary ' + displayEdit,
-                                'text': EALang.edit
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-edit mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.edit
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'delete-popover btn btn-danger ' + displayDelete,
-                                'text': EALang.delete
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-trash-alt mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.delete
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'close-popover btn btn-light',
-                                'text': EALang.close
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'fas fa-ban mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.close
+                                    })
+                                ]
                             })
                         ]
                     })
diff --git a/assets/js/backend_calendar_table_view.js b/assets/js/backend_calendar_table_view.js
index 5f3b0869..bb274b9a 100755
--- a/assets/js/backend_calendar_table_view.js
+++ b/assets/js/backend_calendar_table_view.js
@@ -1071,15 +1071,36 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                         'html': [
                             $('<button/>', {
                                 'class': 'edit-popover btn btn-primary ' + displayEdit,
-                                'text': EALang.edit
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-edit mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.edit
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'delete-popover btn btn-danger ' + displayDelete,
-                                'text': EALang.delete
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-trash-alt mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.delete
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'close-popover btn btn-light',
-                                'text': EALang.close
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'fas fa-ban mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.close
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -1137,13 +1158,38 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                     $('<div/>', {
                         'class': 'd-flex justify-content-center',
                         'html': [
+                            $('<button/>', {
+                                'class': 'edit-popover btn btn-danger ' + displayEdit,
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-edit mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.edit
+                                    })
+                                ]
+                            }),
                             $('<button/>', {
                                 'class': 'delete-popover btn btn-danger ' + displayDelete,
-                                'text': EALang.delete
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-trash-alt mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.delete
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'close-popover btn btn-light',
-                                'text': EALang.close
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'fas fa-ban mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.close
+                                    })
+                                ]
                             })
                         ]
                     })
@@ -1240,15 +1286,36 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
                         'html': [
                             $('<button/>', {
                                 'class': 'edit-popover btn btn-primary ' + displayEdit,
-                                'text': EALang.edit
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-edit mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.edit
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'delete-popover btn btn-danger ' + displayDelete,
-                                'text': EALang.delete
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'far fa-trash-alt mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.delete
+                                    })
+                                ]
                             }),
                             $('<button/>', {
                                 'class': 'close-popover btn btn-light',
-                                'text': EALang.close
+                                'html': [
+                                    $('<i/>', {
+                                        'class': 'fas fa-ban mr-2'
+                                    }),
+                                    $('<span/>', {
+                                        'text': EALang.close
+                                    })
+                                ]
                             })
                         ]
                     })