From b41a9a02d12edf8d012d2a992069c94817cc2f3c Mon Sep 17 00:00:00 2001
From: Igor Scheller <igor.scheller@igorshp.de>
Date: Thu, 22 Jul 2021 21:22:21 +0200
Subject: [PATCH] Use bootstrap icons instead of glyphicons

---
 includes/controller/angeltypes_controller.php |  4 +-
 includes/pages/admin_active.php               |  6 +-
 includes/pages/admin_arrive.php               |  2 +-
 includes/pages/admin_free.php                 |  2 +-
 includes/pages/admin_rooms.php                |  2 +-
 includes/pages/admin_shifts.php               |  8 +--
 includes/pages/admin_user.php                 |  2 +-
 includes/pages/guest_login.php                |  2 +-
 includes/pages/user_messages.php              |  2 +-
 includes/pages/user_shifts.php                |  4 +-
 includes/sys_form.php                         | 10 +--
 includes/sys_menu.php                         |  8 +--
 includes/sys_template.php                     | 38 +++++++-----
 includes/view/AngelTypes_view.php             | 42 ++++++-------
 includes/view/PublicDashboard_view.php        | 12 ++--
 includes/view/Rooms_view.php                  |  6 +-
 includes/view/ShiftCalendarShiftRenderer.php  | 10 +--
 includes/view/ShiftEntry_view.php             | 14 ++---
 includes/view/ShiftTypes_view.php             |  4 +-
 includes/view/ShiftsFilterRenderer.php        |  2 +-
 includes/view/Shifts_view.php                 | 22 +++----
 includes/view/UserAngelTypes_view.php         | 24 +++----
 includes/view/UserHintsRenderer.php           |  4 +-
 includes/view/UserWorkLog_view.php            |  4 +-
 includes/view/User_view.php                   | 62 +++++++++----------
 resources/assets/themes/cyborg_variables.scss | 11 ----
 resources/assets/themes/theme15.scss          | 10 ---
 resources/views/admin/schedule/index.twig     |  2 +-
 resources/views/layouts/maintenance.html      |  6 +-
 resources/views/layouts/parts/footer.twig     |  4 +-
 resources/views/layouts/parts/navbar.twig     | 12 ++--
 resources/views/macros/base.twig              |  6 +-
 resources/views/pages/design.twig             |  8 +--
 resources/views/pages/faq/edit.twig           |  8 +--
 resources/views/pages/faq/overview.twig       |  8 +--
 resources/views/pages/login.twig              |  2 +-
 resources/views/pages/news/edit.twig          |  8 +--
 resources/views/pages/news/news.twig          |  2 +-
 resources/views/pages/news/overview.twig      | 10 +--
 resources/views/pages/questions/edit.twig     |  8 +--
 resources/views/pages/questions/overview.twig | 10 +--
 41 files changed, 197 insertions(+), 214 deletions(-)

diff --git a/includes/controller/angeltypes_controller.php b/includes/controller/angeltypes_controller.php
index 3b4ed1be..ee6c2e60 100644
--- a/includes/controller/angeltypes_controller.php
+++ b/includes/controller/angeltypes_controller.php
@@ -320,8 +320,8 @@ function angeltypes_list_controller()
             );
         }
 
-        $angeltype['restricted'] = $angeltype['restricted'] ? glyph('book') : '';
-        $angeltype['no_self_signup'] = $angeltype['no_self_signup'] ? '' : glyph('share');
+        $angeltype['restricted'] = $angeltype['restricted'] ? icon('book') : '';
+        $angeltype['no_self_signup'] = $angeltype['no_self_signup'] ? '' : icon('share');
 
         $angeltype['name'] = '<a href="'
             . page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']])
diff --git a/includes/pages/admin_active.php b/includes/pages/admin_active.php
index a19d5712..15d5a405 100644
--- a/includes/pages/admin_active.php
+++ b/includes/pages/admin_active.php
@@ -216,9 +216,9 @@ function admin_active()
         $userData['shirt_size'] = (isset($tshirt_sizes[$shirtSize]) ? $tshirt_sizes[$shirtSize] : '');
         $userData['work_time'] = round($usr['shift_length'] / 60)
             . ' min (' . sprintf('%.2f', $usr['shift_length'] / 3600) . '&nbsp;h)';
-        $userData['active'] = glyph_bool($usr->state->active == 1);
-        $userData['force_active'] = glyph_bool($usr->state->force_active == 1);
-        $userData['tshirt'] = glyph_bool($usr->state->got_shirt == 1);
+        $userData['active'] = icon_bool($usr->state->active == 1);
+        $userData['force_active'] = icon_bool($usr->state->force_active == 1);
+        $userData['tshirt'] = icon_bool($usr->state->got_shirt == 1);
         $userData['shift_count'] = $usr['shift_count'];
 
         $actions = [];
diff --git a/includes/pages/admin_arrive.php b/includes/pages/admin_arrive.php
index a40cea86..5f340dea 100644
--- a/includes/pages/admin_arrive.php
+++ b/includes/pages/admin_arrive.php
@@ -98,7 +98,7 @@ function admin_arrive()
         $usr['rendered_planned_departure_date'] = $plannedDepartureDate ? $plannedDepartureDate->format(__('Y-m-d')) : '-';
         $usr['rendered_planned_arrival_date'] = $plannedArrivalDate ? $plannedArrivalDate->format(__('Y-m-d')) : '-';
         $usr['rendered_arrival_date'] = $arrivalDate ? $arrivalDate->format(__('Y-m-d')) : '-';
-        $usr['arrived'] = glyph_bool($usr->state->arrived);
+        $usr['arrived'] = icon_bool($usr->state->arrived);
         $usr['actions'] = form([
             form_hidden('action', $usr->state->arrived ? 'reset' : 'arrived'),
             form_hidden('user', $usr->id),
diff --git a/includes/pages/admin_free.php b/includes/pages/admin_free.php
index 7ef1d9ed..4b2e6586 100644
--- a/includes/pages/admin_free.php
+++ b/includes/pages/admin_free.php
@@ -94,7 +94,7 @@ function admin_free()
             'dect'        => sprintf('<a href="tel:%s">%1$s</a>', $usr->contact->dect),
             'email'       => $usr->settings->email_human
                 ? sprintf('<a href="email:%s">%1$s</a>', $email)
-                : glyph('eye-close'),
+                : icon('eye-slash'),
             'actions'     =>
                 auth()->can('admin_user')
                     ? button(page_link_to('admin_user', ['id' => $usr->id]), __('edit'), 'btn-xs')
diff --git a/includes/pages/admin_rooms.php b/includes/pages/admin_rooms.php
index be11c5fc..017fea58 100644
--- a/includes/pages/admin_rooms.php
+++ b/includes/pages/admin_rooms.php
@@ -22,7 +22,7 @@ function admin_rooms()
     foreach ($rooms_source as $room) {
         $rooms[] = [
             'name'      => Room_name_render($room),
-            'map_url'   => glyph_bool($room->map_url),
+            'map_url'   => icon_bool($room->map_url),
             'actions'   => table_buttons([
                 button(
                     page_link_to('admin_rooms', ['show' => 'edit', 'id' => $room->id]),
diff --git a/includes/pages/admin_shifts.php b/includes/pages/admin_shifts.php
index 0e0df1c6..cf5ed47b 100644
--- a/includes/pages/admin_shifts.php
+++ b/includes/pages/admin_shifts.php
@@ -291,7 +291,7 @@ function admin_shifts()
             foreach ($shifts as $shift) {
                 $shifts_table_entry = [
                     'timeslot'      =>
-                        '<span class="glyphicon glyphicon-time"></span> '
+                        icon('clock') . ' '
                         . date('Y-m-d H:i', $shift['start'])
                         . ' - '
                         . date('H:i', $shift['end'])
@@ -332,13 +332,13 @@ function admin_shifts()
                     form_hidden('change_hours', implode(', ', $change_hours)),
                     form_hidden('angelmode', $angelmode),
                     form_hidden('shift_over_midnight', $shift_over_midnight ? 'true' : 'false'),
-                    form_submit('back', glyph('menu-left') . __('back')),
+                    form_submit('back', icon('chevron-left') . __('back')),
                     table([
                         'timeslot'      => __('Time and location'),
                         'title'         => __('Type and title'),
                         'needed_angels' => __('Needed angels')
                     ], $shifts_table),
-                    form_submit('submit', glyph('floppy-disk') . __('Save'))
+                    form_submit('submit', icon('save') . __('Save'))
                 ])
             ]);
         }
@@ -468,7 +468,7 @@ function admin_shifts()
                     ])
                 ])
             ]),
-            form_submit('preview', glyph('search') . __('Preview'))
+            form_submit('preview', icon('search') . __('Preview'))
         ])
     ]);
 }
diff --git a/includes/pages/admin_user.php b/includes/pages/admin_user.php
index e5ba9a2b..5c690226 100644
--- a/includes/pages/admin_user.php
+++ b/includes/pages/admin_user.php
@@ -181,7 +181,7 @@ function admin_user()
         }
 
         $html .= buttons([
-            button(user_delete_link($user_source->id), glyph('lock') . __('delete'), 'btn-danger')
+            button(user_delete_link($user_source->id), icon('trash') . __('delete'), 'btn-danger')
         ]);
 
         $html .= "<hr />";
diff --git a/includes/pages/guest_login.php b/includes/pages/guest_login.php
index 1e486135..25eb8f42 100644
--- a/includes/pages/guest_login.php
+++ b/includes/pages/guest_login.php
@@ -440,5 +440,5 @@ function guest_register()
  */
 function entry_required()
 {
-    return '<span class="text-info glyphicon glyphicon-warning-sign"></span>';
+    return icon('exclamation-triangle', 'text-info');
 }
diff --git a/includes/pages/user_messages.php b/includes/pages/user_messages.php
index 4b611fbc..48dc651c 100644
--- a/includes/pages/user_messages.php
+++ b/includes/pages/user_messages.php
@@ -75,7 +75,7 @@ function user_messages()
             $receiver_user_source = $message->receiver;
 
             $messages_table_entry = [
-                'new'       => !$message->read ? '<span class="glyphicon glyphicon-envelope"></span>' : '',
+                'new'       => !$message->read ? icon('envelope') : '',
                 'timestamp' => $message->created_at->format(__('Y-m-d H:i')),
                 'from'      => User_Nick_render($sender_user_source),
                 'to'        => User_Nick_render($receiver_user_source),
diff --git a/includes/pages/user_shifts.php b/includes/pages/user_shifts.php
index be43b67e..ec896eaa 100644
--- a/includes/pages/user_shifts.php
+++ b/includes/pages/user_shifts.php
@@ -287,7 +287,7 @@ function view_user_shifts()
                 'set_next_8h'   => __('next 8h'),
                 'buttons'       => button(
                     public_dashboard_link(),
-                    glyph('dashboard') . __('Public Dashboard')
+                    icon('speedometer2') . __('Public Dashboard')
                 )
             ])
         ])
@@ -357,7 +357,7 @@ function make_select($items, $selected, $name, $title = null, $additionalButtons
             . '<label><input type="checkbox" name="' . $name . '[]" value="' . $i['id'] . '" '
             . (in_array($i['id'], $selected) ? ' checked="checked"' : '')
             . ' > ' . $i['name'] . '</label>'
-            . (!isset($i['enabled']) || $i['enabled'] ? '' : glyph('lock'))
+            . (!isset($i['enabled']) || $i['enabled'] ? '' : icon('lock'))
             . '</div>';
     }
     $html .= '<div id="selection_' . $name . '" class="selection ' . $name . '">' . "\n";
diff --git a/includes/sys_form.php b/includes/sys_form.php
index 1a09a58a..874ccc51 100644
--- a/includes/sys_form.php
+++ b/includes/sys_form.php
@@ -31,10 +31,10 @@ function form_spinner($name, $label, $value)
             <input id="spinner-' . $name . '" class="form-control" name="' . $name . '" value="' . $value . '" />
             <div class="input-group-btn">
                 <button id="spinner-' . $name . '-down" class="btn btn-default" type="button">
-                    <span class="glyphicon glyphicon-minus"></span>
+                   ' . icon('dash-lg') . '
                 </button>
                 <button id="spinner-' . $name . '-up" class="btn btn-default" type="button">
-                    <span class="glyphicon glyphicon-plus"></span>
+                    ' . icon('plus-lg') . '
                 </button>
             </div>
         </div>
@@ -72,7 +72,7 @@ function form_date($name, $label, $value, $start_date = '', $end_date = '')
     return form_element($label, '
     <div class="input-group date" id="' . $dom_id . '" data-min-date="' . $start_date . '" data-max-date="' . $end_date . '">
         <input type="date" placeholder="YYYY-MM-DD" name="' . $name . '" class="form-control" value="' . htmlspecialchars($value) . '" autocomplete="off">'
-        . '<span class="input-group-addon">' . glyph('th') . '</span>
+        . '<span class="input-group-addon">' . icon('grid-3x3-gap-fill') . '</span>
     </div>
     ', $dom_id);
 }
@@ -97,7 +97,7 @@ function form_datetime(string $name, string $label, $value)
     <div class="input-group datetime" id="%s">
         <input type="datetime-local" placeholder="YYYY-MM-DD HH:MM" name="%s"
             class="form-control" value="%s" autocomplete="off">'
-        . '<span class="input-group-addon">' . glyph('th') . '</span>
+        . '<span class="input-group-addon">' . icon('grid-3x3-gap-fill') . '</span>
     </div>
     ', $dom_id, $name, htmlspecialchars($value ? $value->format('Y-m-d H:i') : '')), $dom_id);
 }
@@ -214,7 +214,7 @@ function form_radio($name, $label, $selected, $value)
 function form_info($label, $text = '')
 {
     if ($label == '') {
-        return '<span class="help-block">' . glyph('info-sign') . $text . '</span>';
+        return '<span class="help-block">' . icon('info-lg') . $text . '</span>';
     }
     if ($text == '') {
         return '<h4>' . $label . '</h4>';
diff --git a/includes/sys_menu.php b/includes/sys_menu.php
index c8f69ac0..0d653b2f 100644
--- a/includes/sys_menu.php
+++ b/includes/sys_menu.php
@@ -68,7 +68,7 @@ function make_user_submenu()
             page_link_to('user_settings'),
             __('Settings'),
             $page == 'user_settings',
-            'bi-gear'
+            'gear'
         );
     }
 
@@ -77,7 +77,7 @@ function make_user_submenu()
             page_link_to('logout'),
             __('Logout'),
             $page == 'logout',
-            'bi-box-arrow-left',
+            'box-arrow-left',
         );
     }
 
@@ -116,7 +116,7 @@ function make_navigation()
         // path              => [name, permission]
         'admin_arrive'       => 'Arrive angels',
         'admin_active'       => 'Active angels',
-        'admin_user'         => 'All Angels',
+        'users'              => ['All Angels', 'admin_user'],
         'admin_free'         => 'Free angels',
         'admin/questions'    => ['Answer questions', 'question.edit'],
         'shifttypes'         => 'Shifttypes',
@@ -192,7 +192,7 @@ function make_room_navigation($menu)
         $room_menu[] = toolbar_dropdown_item_divider();
     }
     foreach ($rooms as $room) {
-        $room_menu[] = toolbar_dropdown_item(room_link($room), $room->name, false, 'map-marker');
+        $room_menu[] = toolbar_dropdown_item(room_link($room), $room->name, false, 'geo-alt');
     }
     if (count($room_menu) > 0) {
         $menu[] = toolbar_dropdown('map-marker', __('Rooms'), $room_menu);
diff --git a/includes/sys_template.php b/includes/sys_template.php
index 0a7aeb98..c18eeda5 100644
--- a/includes/sys_template.php
+++ b/includes/sys_template.php
@@ -108,14 +108,16 @@ function progress_bar($valuemin, $valuemax, $valuenow, $class = '', $content = '
 }
 
 /**
- * Render glyphicon
+ * Render bootstrap icon
+ *
+ * @param string $icon_name
+ * @param string $class
  *
- * @param string $glyph_name
  * @return string
  */
-function glyph($glyph_name)
+function icon(string $icon_name, string $class = ''): string
 {
-    return ' <span class="glyphicon glyphicon-' . $glyph_name . '"></span> ';
+    return ' <span class="bi bi-' . $icon_name . ($class ? ' ' . $class : '') . '"></span> ';
 }
 
 /**
@@ -124,10 +126,10 @@ function glyph($glyph_name)
  * @param boolean $boolean
  * @return string
  */
-function glyph_bool($boolean)
+function icon_bool($boolean)
 {
     return '<span class="text-' . ($boolean ? 'success' : 'danger') . '">'
-        . glyph($boolean ? 'ok' : 'remove')
+        . icon($boolean ? 'check-lg' : 'x-lg')
         . '</span>';
 }
 
@@ -187,10 +189,10 @@ function toolbar_item_link($href, $icon, $label, $active = false)
 function toolbar_dropdown_item(string $href, string $label, bool $active, string $icon = null): string
 {
     return strtr(
-        '<li><a class="dropdown-item{active}" href="{href}">{icon}{label}</a></li>',
+        '<li><a class="dropdown-item{active}" href="{href}">{icon} {label}</a></li>',
         [
             '{href}'   => $href,
-            '{icon}'   => $icon === null ? '' : '<i class="bi ' . $icon . '"></i>',
+            '{icon}'   => $icon === null ? '' : '<i class="bi bi-' . $icon . '"></i>',
             '{label}'  => $label,
             '{active}' => $active ? ' active' : ''
         ]
@@ -234,18 +236,19 @@ EOT;
 }
 
 /**
- * @param string   $glyphicon
+ * @param string   $icon
  * @param string   $label
  * @param string[] $content
  * @param string   $class
+ *
  * @return string
  */
-function toolbar_popover($glyphicon, $label, $content, $class = '')
+function toolbar_popover($icon, $label, $content, $class = '')
 {
-    $dom_id = md5(microtime() . $glyphicon . $label);
+    $dom_id = md5(microtime() . $icon . $label);
     return '<li class="dropdown messages ' . $class . '">'
         . '<a id="' . $dom_id . '" href="#" tabindex="0">'
-        . ($glyphicon != '' ? '<span class="glyphicon glyphicon-' . $glyphicon . '"></span> ' : '')
+        . ($icon ? icon($icon) : '')
         . $label
         . ' <span class="caret"></span></a>'
         . '<script type="text/javascript">
@@ -400,16 +403,17 @@ function button_js($javascript, $label, $class = '')
 }
 
 /**
- * Rendert einen Knopf mit Glyph
+ * Renders a button with an icon
  *
  * @param string $href
- * @param string $glyph
+ * @param string $icon
  * @param string $class
+ *
  * @return string
  */
-function button_glyph($href, $glyph, $class = '')
+function button_icon($href, $icon, $class = '')
 {
-    return button($href, glyph($glyph), $class);
+    return button($href, icon($icon), $class);
 }
 
 /**
@@ -420,7 +424,7 @@ function button_glyph($href, $glyph, $class = '')
  */
 function button_help($topic = '')
 {
-    return button(config('documentation_url') . $topic, glyph('question-sign'), 'btn-sm');
+    return button(config('documentation_url') . $topic, icon('question-circle'), 'btn-sm');
 }
 
 /**
diff --git a/includes/view/AngelTypes_view.php b/includes/view/AngelTypes_view.php
index d43e2d19..9f4d3f03 100644
--- a/includes/view/AngelTypes_view.php
+++ b/includes/view/AngelTypes_view.php
@@ -22,7 +22,7 @@ function AngelType_name_render($angeltype, $plain = false)
     }
 
     return '<a href="' . angeltype_link($angeltype['id']) . '">'
-        . ($angeltype['restricted'] ? glyph('book') : '') . $angeltype['name']
+        . ($angeltype['restricted'] ? icon('book') : '') . $angeltype['name']
         . '</a>';
 }
 
@@ -37,17 +37,17 @@ function AngelType_render_membership($user_angeltype)
     if (!empty($user_angeltype['user_angeltype_id'])) {
         if ($user_angeltype['restricted']) {
             if (empty($user_angeltype['confirm_user_id'])) {
-                return glyph('book') . __('Unconfirmed');
+                return icon('book') . __('Unconfirmed');
             } elseif ($user_angeltype['supporter']) {
-                return glyph_bool(true) . __('Supporter');
+                return icon_bool(true) . __('Supporter');
             }
-            return glyph_bool(true) . __('Member');
+            return icon_bool(true) . __('Member');
         } elseif ($user_angeltype['supporter']) {
-            return glyph_bool(true) . __('Supporter');
+            return icon_bool(true) . __('Supporter');
         }
-        return glyph_bool(true) . __('Member');
+        return icon_bool(true) . __('Member');
     }
-    return glyph_bool(false);
+    return icon_bool(false);
 }
 
 /**
@@ -60,8 +60,8 @@ function AngelType_delete_view($angeltype)
         info(sprintf(__('Do you want to delete angeltype %s?'), $angeltype['name']), true),
         form([
             buttons([
-                button(page_link_to('angeltypes'), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false),
+                button(page_link_to('angeltypes'), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false),
             ])
         ]),
     ], true);
@@ -142,7 +142,7 @@ function AngelType_view_buttons($angeltype, $user_angeltype, $admin_angeltypes,
     if ($angeltype['requires_driver_license']) {
         $buttons[] = button(
             user_driver_license_edit_link($user),
-            glyph('road') . __('my driving license')
+            icon('wallet2') . __('my driving license')
         );
     }
 
@@ -205,13 +205,13 @@ function AngelType_view_members($angeltype, $members, $admin_user_angeltypes, $a
         $member->name = User_Nick_render($member) . User_Pronoun_render($member);
         $member['dect'] = $member->contact->dect;
         if ($angeltype['requires_driver_license']) {
-            $member['wants_to_drive'] = glyph_bool($member['wants_to_drive']);
-            $member['has_car'] = glyph_bool($member['has_car']);
-            $member['has_license_car'] = glyph_bool($member['has_license_car']);
-            $member['has_license_3_5t_transporter'] = glyph_bool($member['has_license_3_5t_transporter']);
-            $member['has_license_7_5t_truck'] = glyph_bool($member['has_license_7_5t_truck']);
-            $member['has_license_12_5t_truck'] = glyph_bool($member['has_license_12_5t_truck']);
-            $member['has_license_forklift'] = glyph_bool($member['has_license_forklift']);
+            $member['wants_to_drive'] = icon_bool($member['wants_to_drive']);
+            $member['has_car'] = icon_bool($member['has_car']);
+            $member['has_license_car'] = icon_bool($member['has_license_car']);
+            $member['has_license_3_5t_transporter'] = icon_bool($member['has_license_3_5t_transporter']);
+            $member['has_license_7_5t_truck'] = icon_bool($member['has_license_7_5t_truck']);
+            $member['has_license_12_5t_truck'] = icon_bool($member['has_license_12_5t_truck']);
+            $member['has_license_forklift'] = icon_bool($member['has_license_forklift']);
         }
 
         if ($angeltype['restricted'] && empty($member['confirm_user_id'])) {
@@ -455,11 +455,11 @@ function AngelType_view_info(
         $info[] = buttons([
             button(
                 page_link_to('user_angeltypes', ['action' => 'confirm_all', 'angeltype_id' => $angeltype['id']]),
-                glyph('ok') . __('confirm all')
+                icon('check-lg') . __('confirm all')
             ),
             button(
                 page_link_to('user_angeltypes', ['action' => 'delete_all', 'angeltype_id' => $angeltype['id']]),
-                glyph('remove') . __('deny all')
+                icon('trash') . __('deny all')
             )
         ]);
         $info[] = table($table_headers, $members_unconfirmed);
@@ -502,8 +502,8 @@ function AngelTypes_list_view($angeltypes, $admin_angeltypes)
         ]),
         table([
             'name'           => __('Name'),
-            'restricted'     => glyph('book') . __('Requires introduction'),
-            'no_self_signup' => glyph('share') . __('Self Sign Up Allowed'),
+            'restricted'     => icon('book') . __('Requires introduction'),
+            'no_self_signup' => icon('share') . __('Self Sign Up Allowed'),
             'membership'     => __('Membership'),
             'actions'        => ''
         ], $angeltypes)
diff --git a/includes/view/PublicDashboard_view.php b/includes/view/PublicDashboard_view.php
index ab30b6cd..9e56b8a0 100644
--- a/includes/view/PublicDashboard_view.php
+++ b/includes/view/PublicDashboard_view.php
@@ -56,11 +56,11 @@ function public_dashboard_view($stats, $free_shifts)
                 $(\'#navbar-collapse-1,.navbar-nav,.navbar-toggle,#footer,#fullscreen-button\').remove();
                 $(\'.navbar-brand\').append(\' ' . __('Public Dashboard') . '\');
                 ',
-                glyph('fullscreen') . __('Fullscreen')
+                icon('fullscreen') . __('Fullscreen')
             ),
             auth()->user() ? button(
                 public_dashboard_link($isFiltered ? [] : ['filtered' => 1] + $filter),
-                glyph('filter') . ($isFiltered ? __('All') : __('Filtered'))
+                icon('filter') . ($isFiltered ? __('All') : __('Filtered'))
             ) : ''
         ])], 'fullscreen-button'),
     ]);
@@ -74,18 +74,18 @@ function public_dashboard_view($stats, $free_shifts)
  */
 function public_dashboard_shift_render($shift)
 {
-    $panel_body = glyph('time') . $shift['start'] . ' - ' . $shift['end'];
+    $panel_body = icon('clock') . $shift['start'] . ' - ' . $shift['end'];
     $panel_body .= ' (' . $shift['duration'] . '&nbsp;h)';
 
-    $panel_body .= '<br>' . glyph('tasks') . $shift['shifttype_name'];
+    $panel_body .= '<br>' . icon('list-task') . $shift['shifttype_name'];
     if (!empty($shift['title'])) {
         $panel_body .= ' (' . $shift['title'] . ')';
     }
 
-    $panel_body .= '<br>' . glyph('map-marker') . $shift['room_name'];
+    $panel_body .= '<br>' . icon('geo-alt') . $shift['room_name'];
 
     foreach ($shift['needed_angels'] as $needed_angels) {
-        $panel_body .= '<br>' . glyph('user')
+        $panel_body .= '<br>' . icon('person')
             . '<span class="text-' . $shift['style'] . '">'
             . $needed_angels['need'] . ' &times; ' . $needed_angels['angeltype_name']
             . '</span>';
diff --git a/includes/view/Rooms_view.php b/includes/view/Rooms_view.php
index 5bd81bc8..337d1666 100644
--- a/includes/view/Rooms_view.php
+++ b/includes/view/Rooms_view.php
@@ -51,7 +51,7 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
         $selected_tab = count($tabs) - 1;
     }
 
-    return page_with_title(glyph('map-marker') . $room->name, [
+    return page_with_title(icon('geo-alt') . $room->name, [
         $assignNotice,
         $description,
         auth()->can('admin_rooms') ? buttons([
@@ -78,8 +78,8 @@ function Room_view(Room $room, ShiftsFilterRenderer $shiftsFilterRenderer, Shift
 function Room_name_render(Room $room)
 {
     if (auth()->can('view_rooms')) {
-        return '<a href="' . room_link($room) . '">' . glyph('map-marker') . $room->name . '</a>';
+        return '<a href="' . room_link($room) . '">' . icon('geo-alt') . $room->name . '</a>';
     }
 
-    return glyph('map-marker') . $room->name;
+    return icon('geo-alt') . $room->name;
 }
diff --git a/includes/view/ShiftCalendarShiftRenderer.php b/includes/view/ShiftCalendarShiftRenderer.php
index 5f2bb328..3502b3e5 100644
--- a/includes/view/ShiftCalendarShiftRenderer.php
+++ b/includes/view/ShiftCalendarShiftRenderer.php
@@ -23,7 +23,7 @@ class ShiftCalendarShiftRenderer
     {
         $info_text = '';
         if ($shift['title'] != '') {
-            $info_text = glyph('info-sign') . $shift['title'] . '<br>';
+            $info_text = icon('info') . $shift['title'] . '<br>';
         }
         list($shift_signup_state, $shifts_row) = $this->renderShiftNeededAngeltypes(
             $shift,
@@ -135,7 +135,7 @@ class ShiftCalendarShiftRenderer
         if (auth()->can('user_shifts_admin')) {
             $html .= '<li class="list-group-item">';
             $html .= button(shift_entry_create_link_admin($shift),
-                glyph('plus') . __('Add more angels'),
+                icon('plus-lg') . __('Add more angels'),
                 'btn-xs'
             );
             $html .= '</li>';
@@ -214,7 +214,7 @@ class ShiftCalendarShiftRenderer
             case ShiftSignupState::ANGELTYPE:
                 if ($angeltype['restricted'] == 1) {
                     // User has to be confirmed on the angeltype first
-                    $entry_list[] = $inner_text . glyph('book');
+                    $entry_list[] = $inner_text . icon('book');
                 } else {
                     // Add link to join the angeltype first
                     $entry_list[] = $inner_text . '<br />'
@@ -264,12 +264,12 @@ class ShiftCalendarShiftRenderer
             $header_buttons = '<div class="pull-right hidden-print">' . table_buttons([
                     button(
                         page_link_to('user_shifts', ['edit_shift' => $shift['SID']]),
-                        glyph('edit'),
+                        icon('pencil'),
                         "btn-$class btn-xs"
                     ),
                     button(
                         page_link_to('user_shifts', ['delete_shift' => $shift['SID']]),
-                        glyph('trash'),
+                        icon('trash'),
                         "btn-$class btn-xs"
                     )
                 ]) . '</div>';
diff --git a/includes/view/ShiftEntry_view.php b/includes/view/ShiftEntry_view.php
index eed89ded..b19b12a4 100644
--- a/includes/view/ShiftEntry_view.php
+++ b/includes/view/ShiftEntry_view.php
@@ -25,8 +25,8 @@ function ShiftEntry_delete_view_admin($shift, $angeltype, $signoff_user)
         ), true),
         form([
             buttons([
-                button(user_link($signoff_user->id), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false)
+                button(user_link($signoff_user->id), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false)
             ]),
         ]),
     ]);
@@ -54,8 +54,8 @@ function ShiftEntry_delete_view($shift, $angeltype, $signoff_user_id)
 
         form([
             buttons([
-                button(user_link($signoff_user_id), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('delete'), 'btn-danger', false),
+                button(user_link($signoff_user_id), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('trash') . __('delete'), 'btn-danger', false),
             ]),
         ]),
     ]);
@@ -91,7 +91,7 @@ function ShiftEntry_create_view_admin($shift, Room $room, $angeltype, $angeltype
             form([
                 form_select('angeltype_id', __('Angeltype'), $angeltypes_select, $angeltype['id']),
                 form_select('user_id', __('User'), $users_select, $signup_user->id),
-                form_submit('submit', glyph('ok') . __('Save'))
+                form_submit('submit', icon('check-lg') . __('Save'))
             ])
         ]);
 }
@@ -116,7 +116,7 @@ function ShiftEntry_create_view_supporter($shift, Room $room, $angeltype, $signu
                 AngelType_name_render($angeltype)), true),
             form([
                 form_select('user_id', __('User'), $users_select, $signup_user->id),
-                form_submit('submit', glyph('ok') . __('Save'))
+                form_submit('submit', icon('check-lg') . __('Save'))
             ])
         ]);
 }
@@ -139,7 +139,7 @@ function ShiftEntry_create_view_user($shift, Room $room, $angeltype, $comment)
             info(sprintf(__('Do you want to sign up for this shift as %s?'), AngelType_name_render($angeltype)), true),
             form([
                 form_textarea('comment', __('Comment (for your eyes only):'), $comment),
-                form_submit('submit', glyph('ok') . __('Save'))
+                form_submit('submit', icon('check-lg') . __('Save'))
             ])
         ]);
 }
diff --git a/includes/view/ShiftTypes_view.php b/includes/view/ShiftTypes_view.php
index 3e10be29..c81a6c47 100644
--- a/includes/view/ShiftTypes_view.php
+++ b/includes/view/ShiftTypes_view.php
@@ -22,10 +22,10 @@ function ShiftType_delete_view($shifttype)
         info(sprintf(__('Do you want to delete shifttype %s?'), $shifttype['name']), true),
         form([
             buttons([
-                button(page_link_to('shifttypes'), glyph('remove') . __('cancel')),
+                button(page_link_to('shifttypes'), icon('x-lg') . __('cancel')),
                 form_submit(
                     'delete',
-                    glyph('ok') . __('delete'),
+                    icon('trash') . __('delete'),
                     'btn-danger',
                     false
                 ),
diff --git a/includes/view/ShiftsFilterRenderer.php b/includes/view/ShiftsFilterRenderer.php
index b18a8ae0..d531c765 100644
--- a/includes/view/ShiftsFilterRenderer.php
+++ b/includes/view/ShiftsFilterRenderer.php
@@ -60,7 +60,7 @@ class ShiftsFilterRenderer
                 $toolbar[] = sprintf(
                     '<li role="presentation"><a href="%s">%s</a></li>',
                     url('/public-dashboard', ['filtered' => true] + $dashboardFilter),
-                    glyph('dashboard') . __('Dashboard')
+                    icon('speedometer2') . __('Dashboard')
                 );
             }
         }
diff --git a/includes/view/Shifts_view.php b/includes/view/Shifts_view.php
index a21a74a0..dc3236df 100644
--- a/includes/view/Shifts_view.php
+++ b/includes/view/Shifts_view.php
@@ -26,17 +26,17 @@ function Shift_view_header($shift, Room $room)
         div('col-sm-3 col-xs-6', [
             '<h4>' . __('Start') . '</h4>',
             '<p class="lead' . (time() >= $shift['start'] ? ' text-success' : '') . '">',
-            glyph('calendar') . date(__('Y-m-d'), $shift['start']),
+            icon('calendar') . date(__('Y-m-d'), $shift['start']),
             '<br />',
-            glyph('time') . date('H:i', $shift['start']),
+            icon('clock') . date('H:i', $shift['start']),
             '</p>'
         ]),
         div('col-sm-3 col-xs-6', [
             '<h4>' . __('End') . '</h4>',
             '<p class="lead' . (time() >= $shift['end'] ? ' text-success' : '') . '">',
-            glyph('calendar') . date(__('Y-m-d'), $shift['end']),
+            icon('calendar') . date(__('Y-m-d'), $shift['end']),
             '<br />',
-            glyph('time') . date('H:i', $shift['end']),
+            icon('clock') . date('H:i', $shift['end']),
             '</p>'
         ]),
         div('col-sm-3 col-xs-6', [
@@ -55,14 +55,14 @@ function Shift_editor_info_render($shift)
     $info = [];
     if (!empty($shift['created_by_user_id'])) {
         $info[] = sprintf(
-            glyph('plus') . __('created at %s by %s'),
+            icon('plus-lg') . __('created at %s by %s'),
             date('Y-m-d H:i', $shift['created_at_timestamp']),
             User_Nick_render(User::find($shift['created_by_user_id']))
         );
     }
     if (!empty($shift['edited_by_user_id'])) {
         $info[] = sprintf(
-            glyph('pencil') . __('edited at %s by %s'),
+            icon('pencil') . __('edited at %s by %s'),
             date('Y-m-d H:i', $shift['edited_at_timestamp']),
             User_Nick_render(User::find($shift['edited_by_user_id']))
         );
@@ -159,10 +159,10 @@ function Shift_view($shift, $shifttype, Room $room, $angeltypes_source, ShiftSig
     $buttons = [];
     if ($shift_admin || $admin_shifttypes || $admin_rooms) {
         $buttons = [
-            $shift_admin ? button(shift_edit_link($shift), glyph('pencil') . __('edit')) : '',
-            $shift_admin ? button(shift_delete_link($shift), glyph('trash') . __('delete')) : '',
+            $shift_admin ? button(shift_edit_link($shift), icon('pencil') . __('edit')) : '',
+            $shift_admin ? button(shift_delete_link($shift), icon('trash') . __('delete')) : '',
             $admin_shifttypes ? button(shifttype_link($shifttype), $shifttype['name']) : '',
-            $admin_rooms ? button(room_link($room), glyph('map-marker') . $room->name) : '',
+            $admin_rooms ? button(room_link($room), icon('geo-alt') . $room->name) : '',
         ];
     }
     $buttons[] = button(user_link(auth()->user()->id), '<span class="icon-icon_angel"></span> ' . __('My shifts'));
@@ -255,13 +255,13 @@ function Shift_view_render_shift_entry($shift_entry, $user_shift_admin, $angelty
     if ($user_shift_admin || $angeltype_supporter || $isUser) {
         $entry .= ' <div class="btn-group">';
         if ($user_shift_admin || $isUser) {
-            $entry .= button_glyph(
+            $entry .= button_icon(
                 page_link_to('user_myshifts', ['edit' => $shift_entry['id'], 'id' => $shift_entry['UID']]),
                 'pencil',
                 'btn-xs'
             );
         }
-        $entry .= button_glyph(shift_entry_delete_link($shift_entry), 'trash', 'btn-xs');
+        $entry .= button_icon(shift_entry_delete_link($shift_entry), 'trash', 'btn-xs');
         $entry .= '</div>';
     }
     return $entry;
diff --git a/includes/view/UserAngelTypes_view.php b/includes/view/UserAngelTypes_view.php
index 8cba2060..fef46876 100644
--- a/includes/view/UserAngelTypes_view.php
+++ b/includes/view/UserAngelTypes_view.php
@@ -24,9 +24,9 @@ function UserAngelType_update_view($user_angeltype, $user, $angeltype, $supporte
             buttons([
                 button(
                     page_link_to('angeltypes', ['action' => 'view', 'angeltype_id' => $angeltype['id']]),
-                    glyph('remove') . __('cancel')
+                    icon('x-lg') . __('cancel')
                 ),
-                form_submit('submit', glyph('ok') . __('yes'), 'btn-primary', false),
+                form_submit('submit', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', [
             'action'            => 'update',
@@ -52,9 +52,9 @@ function UserAngelTypes_delete_all_view($angeltype)
                         'angeltypes',
                         ['action' => 'view', 'angeltype_id' => $angeltype['id']]
                     ),
-                    glyph('remove') . __('cancel')
+                    icon('x-lg') . __('cancel')
                 ),
-                form_submit('deny_all', glyph('ok') . __('yes'), 'btn-primary', false)
+                form_submit('deny_all', icon('check-lg') . __('yes'), 'btn-primary', false)
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'delete_all', 'angeltype_id' => $angeltype['id']])),
     ]);
@@ -71,8 +71,8 @@ function UserAngelTypes_confirm_all_view($angeltype)
         info(sprintf(__('Do you really want to confirm all users for %s?'), $angeltype['name']), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('confirm_all', glyph('ok') . __('yes'), 'btn-primary', false),
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('confirm_all', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'confirm_all', 'angeltype_id' => $angeltype['id']])),
     ]);
@@ -95,8 +95,8 @@ function UserAngelType_confirm_view($user_angeltype, $user, $angeltype)
         ), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('confirm_user', glyph('ok') . __('yes'), 'btn-primary', false),
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('confirm_user', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'confirm', 'user_angeltype_id' => $user_angeltype['id']])),
     ]);
@@ -119,8 +119,8 @@ function UserAngelType_delete_view($user_angeltype, $user, $angeltype)
         ), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('delete', glyph('ok') . __('yes'), 'btn-primary', false),
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('delete', icon('check-lg') . __('yes'), 'btn-primary', false),
             ]),
         ], page_link_to('user_angeltypes', ['action' => 'delete', 'user_angeltype_id' => $user_angeltype['id']])),
     ], true);
@@ -172,8 +172,8 @@ function UserAngelType_join_view($user, $angeltype)
         ), true),
         form([
             buttons([
-                button(angeltype_link($angeltype['id']), glyph('remove') . __('cancel')),
-                form_submit('submit', glyph('ok') . __('save'), 'btn-primary', false)
+                button(angeltype_link($angeltype['id']), icon('x-lg') . __('cancel')),
+                form_submit('submit', icon('check-lg') . __('save'), 'btn-primary', false)
             ]),
         ], page_link_to(
             'user_angeltypes',
diff --git a/includes/view/UserHintsRenderer.php b/includes/view/UserHintsRenderer.php
index 8d749ee9..3c016426 100644
--- a/includes/view/UserHintsRenderer.php
+++ b/includes/view/UserHintsRenderer.php
@@ -18,10 +18,10 @@ class UserHintsRenderer
     {
         if (count($this->hints) > 0) {
             $hint_class = $this->important ? 'danger' : 'info';
-            $glyphicon = $this->important ? 'warning-sign' : 'info-sign';
+            $icon = $this->important ? 'exclamation-triangle' : 'info-circle';
 
             return toolbar_popover(
-                $glyphicon . ' text-' . $hint_class, '', $this->hints, 'bg-' . $hint_class
+                $icon . ' text-' . $hint_class, '', $this->hints, 'bg-' . $hint_class
             );
         }
 
diff --git a/includes/view/UserWorkLog_view.php b/includes/view/UserWorkLog_view.php
index 8185bad9..3ad51877 100644
--- a/includes/view/UserWorkLog_view.php
+++ b/includes/view/UserWorkLog_view.php
@@ -18,8 +18,8 @@ function UserWorkLog_delete_view(User $user)
         ), true),
         form([
             buttons([
-                button(user_link($user->id), glyph('remove') . __('cancel')),
-                form_submit('submit', glyph('ok') . __('delete'), 'btn-danger', false),
+                button(user_link($user->id), icon('x-lg') . __('cancel')),
+                form_submit('submit', icon('check-lg') . __('delete'), 'btn-danger', false),
             ]),
         ]),
     ]);
diff --git a/includes/view/User_view.php b/includes/view/User_view.php
index c8cef972..4eb7d9d1 100644
--- a/includes/view/User_view.php
+++ b/includes/view/User_view.php
@@ -140,7 +140,7 @@ function User_delete_view($user)
     return page_with_title(sprintf(__('Delete %s'), User_Nick_render($user)), [
         msg(),
         buttons([
-            button(user_edit_link($user->id), glyph('chevron-left') . __('back'))
+            button(user_edit_link($user->id), icon('chevron-left') . __('back'))
         ]),
         error(
             __('Do you really want to delete the user including all his shifts and every other piece of his data?'),
@@ -164,7 +164,7 @@ function User_edit_vouchers_view($user)
     return page_with_title(sprintf(__('%s\'s vouchers'), User_Nick_render($user)), [
         msg(),
         buttons([
-            button(user_link($user->id), glyph('chevron-left') . __('back'))
+            button(user_link($user->id), icon('chevron-left') . __('back'))
         ]),
         info(sprintf(
             __('Angel should receive at least  %d vouchers.'),
@@ -208,12 +208,12 @@ function Users_view(
         $u['first_name'] = $user->personalData->first_name;
         $u['last_name'] = $user->personalData->last_name;
         $u['dect'] = sprintf('<a href="tel:%s">%1$s</a>', $user->contact->dect);
-        $u['arrived'] = glyph_bool($user->state->arrived);
+        $u['arrived'] = icon_bool($user->state->arrived);
         $u['got_voucher'] = $user->state->got_voucher;
         $u['freeloads'] = $user->getAttribute('freeloads');
-        $u['active'] = glyph_bool($user->state->active);
-        $u['force_active'] = glyph_bool($user->state->force_active);
-        $u['got_shirt'] = glyph_bool($user->state->got_shirt);
+        $u['active'] = icon_bool($user->state->active);
+        $u['force_active'] = icon_bool($user->state->force_active);
+        $u['got_shirt'] = icon_bool($user->state->got_shirt);
         $u['shirt_size'] = $user->personalData->shirt_size;
         $u['arrival_date'] = $user->personalData->planned_arrival_date
             ? $user->personalData->planned_arrival_date->format(__('Y-m-d')) : '';
@@ -221,7 +221,7 @@ function Users_view(
             ? $user->personalData->planned_departure_date->format(__('Y-m-d')) : '';
         $u['last_login_at'] = $user->last_login_at ? $user->last_login_at->format(__('m/d/Y h:i a')) : '';
         $u['actions'] = table_buttons([
-            button_glyph(page_link_to('admin_user', ['id' => $user->id]), 'edit', 'btn-xs')
+            button_icon(page_link_to('admin_user', ['id' => $user->id]), 'pencil-square', 'btn-xs')
         ]);
         $usersList[] = $u;
     }
@@ -269,7 +269,7 @@ function Users_view(
     return page_with_title(__('All users'), [
         msg(),
         buttons([
-            button(page_link_to('register'), glyph('plus') . __('New user'))
+            button(page_link_to('register'), icon('plus-lg') . __('New user'))
         ]),
         table($user_table_headers, $usersList)
     ]);
@@ -390,9 +390,9 @@ function User_view_myshift($shift, $user_source, $its_me)
     }
 
     $myshift = [
-        'date'       => glyph('calendar')
+        'date'       => icon('calendar')
             . date('Y-m-d', $shift['start']) . '<br>'
-            . glyph('time') . date('H:i', $shift['start'])
+            . icon('clock') . date('H:i', $shift['start'])
             . ' - '
             . date('H:i', $shift['end']),
         'duration'   => sprintf('%.2f', ($shift['end'] - $shift['start']) / 3600) . '&nbsp;h',
@@ -418,19 +418,19 @@ function User_view_myshift($shift, $user_source, $its_me)
     }
 
     $myshift['actions'] = [
-        button(shift_link($shift), glyph('eye-open') . __('view'), 'btn-xs')
+        button(shift_link($shift), icon('eye') . __('view'), 'btn-xs')
     ];
     if ($its_me || auth()->can('user_shifts_admin')) {
         $myshift['actions'][] = button(
             page_link_to('user_myshifts', ['edit' => $shift['id'], 'id' => $user_source->id]),
-            glyph('edit') . __('edit'),
+            icon('pencil-square') . __('edit'),
             'btn-xs'
         );
     }
     if (Shift_signout_allowed($shift, ['id' => $shift['TID']], $user_source->id)) {
         $myshift['actions'][] = button(
             shift_entry_delete_link($shift),
-            glyph('trash') . __('sign off'),
+            icon('trash') . __('sign off'),
             'btn-xs'
         );
     }
@@ -518,19 +518,19 @@ function User_view_worklog(Worklog $worklog, $admin_user_worklog_privilege)
         $actions = table_buttons([
             button(
                 user_worklog_edit_link($worklog),
-                glyph('edit') . __('edit'),
+                icon('pencil-square') . __('edit'),
                 'btn-xs'
             ),
             button(
                 user_worklog_delete_link($worklog),
-                glyph('trash') . __('delete'),
+                icon('trash') . __('delete'),
                 'btn-xs'
             )
         ]);
     }
 
     return [
-        'date'       => glyph('calendar') . date('Y-m-d', $worklog->worked_at->timestamp),
+        'date'       => icon('calendar') . date('Y-m-d', $worklog->worked_at->timestamp),
         'duration'   => sprintf('%.2f', $worklog->hours) . ' h',
         'room'       => '',
         'shift_info' => __('Work log entry'),
@@ -620,11 +620,11 @@ function User_view(
                     buttons([
                         $admin_user_privilege ? button(
                             page_link_to('admin_user', ['id' => $user_source->id]),
-                            glyph('edit') . __('edit')
+                            icon('pencil-square') . __('edit')
                         ) : '',
                         $admin_user_privilege ? button(
                             user_driver_license_edit_link($user_source),
-                            glyph('road') . __('driving license')
+                            icon('wallet2') . __('driving license')
                         ) : '',
                         (($admin_user_privilege || $auth->can('admin_arrive')) && !$user_source->state->arrived) ?
                             form([
@@ -637,23 +637,23 @@ function User_view(
                                 'users',
                                 ['action' => 'edit_vouchers', 'user_id' => $user_source->id]
                             ),
-                            glyph('cutlery') . __('Edit vouchers')
+                            icon('file-binary-fill') . __('Edit vouchers')
                         ) : '',
                         $admin_user_worklog_privilege ? button(
                             user_worklog_add_link($user_source),
-                            glyph('list') . __('Add work log')
+                            icon('list') . __('Add work log')
                         ) : '',
                         $its_me ? button(
                             page_link_to('user_settings'),
-                            glyph('list-alt') . __('Settings')
+                            icon('gear') . __('Settings')
                         ) : '',
                         ($its_me && $auth->can('ical')) ? button(
                             page_link_to('ical', ['key' => $user_source->api_key]),
-                            glyph('calendar') . __('iCal Export')
+                            icon('calendar') . __('iCal Export')
                         ) : '',
                         ($its_me && $auth->can('shifts_json_export')) ? button(
                             page_link_to('shifts_json_export', ['key' => $user_source->api_key]),
-                            glyph('export') . __('JSON Export')
+                            icon('box-arrow-up-right') . __('JSON Export')
                         ) : '',
                         ($its_me && (
                             $auth->can('shifts_json_export')
@@ -661,14 +661,14 @@ function User_view(
                             || $auth->can('atom')
                         )) ? button(
                             page_link_to('user_myshifts', ['reset' => 1]),
-                            glyph('repeat') . __('Reset API key')
+                            icon('arrow-repeat') . __('Reset API key')
                         ) : ''
                     ])
                 ])
             ]),
             div('row', [
                 div('col-md-2', [
-                    heading(glyph('phone')
+                    heading(icon('phone')
                         . '<a href="tel:' . $user_source->contact->dect . '">'
                         . $user_source->contact->dect, 1)
                         . '</a>'
@@ -681,7 +681,7 @@ function User_view(
             ($its_me || $admin_user_privilege) ? '<h2>' . __('Shifts') . '</h2>' : '',
             $myshifts_table,
             ($its_me && $nightShiftsConfig['enabled']) ? info(
-                glyph('info-sign') . sprintf(
+                icon('info-lg') . sprintf(
                     __('Your night shifts between %d and %d am count twice.'),
                     $nightShiftsConfig['start'],
                     $nightShiftsConfig['end']
@@ -734,7 +734,7 @@ function User_view_state_user($user_source)
     ];
 
     if ($user_source->state->arrived) {
-        $state[] = '<span class="text-success">' . glyph('home') . __('Arrived') . '</span>';
+        $state[] = '<span class="text-success">' . icon('house') . __('Arrived') . '</span>';
     } else {
         $state[] = '<span class="text-danger">' . __('Not arrived') . '</span>';
     }
@@ -755,13 +755,13 @@ function User_view_state_admin($freeloader, $user_source)
     $state = [];
 
     if ($freeloader) {
-        $state[] = '<span class="text-danger">' . glyph('exclamation-sign') . __('Freeloader') . '</span>';
+        $state[] = '<span class="text-danger">' . icon('exclamation-circle') . __('Freeloader') . '</span>';
     }
 
     $state[] = User_shift_state_render($user_source);
 
     if ($user_source->state->arrived) {
-        $state[] = '<span class="text-success">' . glyph('home')
+        $state[] = '<span class="text-success">' . icon('house')
             . sprintf(
                 __('Arrived at %s'),
                 $user_source->state->arrival_date ? $user_source->state->arrival_date->format('Y-m-d') : ''
@@ -791,7 +791,7 @@ function User_view_state_admin($freeloader, $user_source)
     $availableCount = max($voucherCount, $availableCount);
     if ($user_source->state->got_voucher > 0) {
         $state[] = '<span class="text-success">'
-            . glyph('cutlery')
+            . icon('file-binary-fill')
             . __('Got %s of %s vouchers', [$voucherCount, $availableCount])
             . '</span>';
     } else {
@@ -817,7 +817,7 @@ function User_angeltypes_render($user_angeltypes)
             $class = 'text-warning';
         }
         $output[] = '<a href="' . angeltype_link($angeltype['id']) . '" class="' . $class . '">'
-            . ($angeltype['supporter'] ? glyph('education') : '') . $angeltype['name']
+            . ($angeltype['supporter'] ? icon('patch-check') : '') . $angeltype['name']
             . '</a>';
     }
     return div('col-md-2', [
diff --git a/resources/assets/themes/cyborg_variables.scss b/resources/assets/themes/cyborg_variables.scss
index 72280259..0a18042e 100644
--- a/resources/assets/themes/cyborg_variables.scss
+++ b/resources/assets/themes/cyborg_variables.scss
@@ -95,17 +95,6 @@ $headings-line-height:    1.1;
 $headings-color:          #fff;
 
 
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font.
-//## Useful for those including Bootstrap via Bower.
-
-//** File name for all font files.
-$icon-font-name:          "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-$icon-font-svg-id:        "glyphicons_halflingsregular";
-
-
 //== Components
 //
 //## Define common padding and border radius sizes and more.
diff --git a/resources/assets/themes/theme15.scss b/resources/assets/themes/theme15.scss
index 6f04ea26..d9bea874 100644
--- a/resources/assets/themes/theme15.scss
+++ b/resources/assets/themes/theme15.scss
@@ -107,16 +107,6 @@ $headings-font-weight: 500;
 $headings-line-height: 1.1;
 $headings-color: $brand-info;
 
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font.
-//## Useful for those including Bootstrap via Bower.
-
-//** File name for all font files.
-$icon-font-name: "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-$icon-font-svg-id: "glyphicons_halflingsregular";
-
 //== Components
 //
 //## Define common padding and border radius sizes and more.
diff --git a/resources/views/admin/schedule/index.twig b/resources/views/admin/schedule/index.twig
index 99a1a226..120faf10 100644
--- a/resources/views/admin/schedule/index.twig
+++ b/resources/views/admin/schedule/index.twig
@@ -10,7 +10,7 @@
             {% block content_title %}{{ title }}{% endblock %}
 
             {% if is_index|default(false) %}
-                {{ m.button(m.glyphicon('plus'), url('/admin/schedule/edit')) }}
+                {{ m.button(m.icon('plus-lg'), url('/admin/schedule/edit'), 'secondary') }}
             {% endif %}
         </h1>
 
diff --git a/resources/views/layouts/maintenance.html b/resources/views/layouts/maintenance.html
index 85b95168..c0b52b44 100644
--- a/resources/views/layouts/maintenance.html
+++ b/resources/views/layouts/maintenance.html
@@ -34,9 +34,9 @@
         <div class="jumbotron">
             <div class="container text-center">
                 <h1>
-                    <span class="glyphicon glyphicon-scissors"></span>
-                    <span class="glyphicon glyphicon-wrench"></span>
-                    <span class="glyphicon glyphicon-fire"></span>
+                    <span class="bi bi-scissors"></span>
+                    <span class="bi bi-wrench"></span>
+                    <span class="bi bi-cloud-lightning-rain"></span>
                 </h1>
                 <div class="col-md-6">
                     <h2>
diff --git a/resources/views/layouts/parts/footer.twig b/resources/views/layouts/parts/footer.twig
index d848764c..9c2a95cc 100644
--- a/resources/views/layouts/parts/footer.twig
+++ b/resources/views/layouts/parts/footer.twig
@@ -1,3 +1,5 @@
+{% import 'macros/base.twig' as m %}
+
 <div class="col-md-12">
     <hr/>
     <div class="text-center footer" style="margin-bottom: 10px;">
@@ -27,7 +29,7 @@
 
         {% for name,url in config('footer_items') %}
             <a href="{% if url starts with '/' %}{{ url(url) }}{% else %}{{ url }}{% endif %}">
-                {% if '@' in url %}<span class="glyphicon glyphicon-envelope"></span>{% endif %}
+                {% if '@' in url %}{{ m.icon('envelope') }}{% endif %}
                 {{ __(name) }}
             </a> ·
         {% endfor %}
diff --git a/resources/views/layouts/parts/navbar.twig b/resources/views/layouts/parts/navbar.twig
index 846f89c9..3024bf82 100644
--- a/resources/views/layouts/parts/navbar.twig
+++ b/resources/views/layouts/parts/navbar.twig
@@ -1,7 +1,9 @@
+{% import 'macros/base.twig' as m %}
+
 {% macro toolbar_item(label, link, active_page, icon) %}
     <li class="nav-item">
         <a class="nav-link{% if page() == active_page %} active{% endif %}" href="{{ link }}">
-            {% if icon %}<span class="bi {{ icon }}"></span>{% endif %}
+            {% if icon %}{{ m.icon(icon) }}{% endif %}
             {{ label|raw }}
         </a>
     </li>
@@ -32,17 +34,17 @@
             {% endif %}
             <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                 {% if is_user() %}
-                    {{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'bi-clock') }}
+                    {{ _self.toolbar_item(menuUserShiftState(user), url('shifts', {'action': 'next'}), '', 'clock') }}
                 {% elseif has_permission_to('register') and config('registration_enabled') %}
-                    {{ _self.toolbar_item(__('Register'), url('register'), 'register', 'bi-plus') }}
+                    {{ _self.toolbar_item(__('Register'), url('register'), 'register', 'plus') }}
                 {% endif %}
 
                 {% if has_permission_to('login') %}
-                    {{ _self.toolbar_item(__('Login'), url('login'), 'login', 'bi-box-arrow-in-right') }}
+                    {{ _self.toolbar_item(__('Login'), url('login'), 'login', 'box-arrow-in-right') }}
                 {% endif %}
 
                 {% if is_user() and has_permission_to('user_messages') %}
-                    {{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'bi-envelope') }}
+                    {{ _self.toolbar_item(menuUserMessages(), url('user-messages'), 'user-messages', 'envelope') }}
                 {% endif %}
 
                 {{ menuUserHints() }}
diff --git a/resources/views/macros/base.twig b/resources/views/macros/base.twig
index 3c07ea59..0ea91efe 100644
--- a/resources/views/macros/base.twig
+++ b/resources/views/macros/base.twig
@@ -2,10 +2,6 @@
     <span class="icon-icon_angel bg-light"></span>
 {% endmacro %}
 
-{% macro glyphicon(glyph) %}
-    <span class="glyphicon glyphicon-{{ glyph }}"></span>
-{% endmacro %}
-
 {% macro icon(icon) %}
     <span class="bi bi-{{ icon }}"></span>
 {% endmacro %}
@@ -29,5 +25,5 @@
 {% endmacro %}
 
 {% macro info(text) %}
-    <span class="help-block">{{ _self.glyphicon('info-sign') }}{{ text }}</span>
+    <span class="help-block">{{ _self.icon('info-lg') }}{{ text }}</span>
 {%- endmacro %}
diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
index 9c27152b..0e83674b 100644
--- a/resources/views/pages/design.twig
+++ b/resources/views/pages/design.twig
@@ -86,12 +86,12 @@
                     <tr>
                         <td>Table content</td>
                         <td>{{ lipsum }}</td>
-                        <td><span class="text-success">{{ m.glyphicon('ok') }}</span></td>
+                        <td><span class="text-success">{{ m.icon('check-lg') }}</span></td>
                     </tr>
                     <tr>
                         <td>Another content</td>
                         <td></td>
-                        <td><span class="text-danger">{{ m.glyphicon('remove') }}</span></td>
+                        <td><span class="text-danger">{{ m.icon('x-lg') }}</span></td>
                     </tr>
                 </table>
             </div>
@@ -255,8 +255,8 @@
                 <p>{{ m.angel() }}</p>
             </div>
             <div class="col-md-3">
-                <h4><code>glyphicon(glyph)</code></h4>
-                <p>{{ m.glyphicon('star') }}</p>
+                <h4><code>icon(icon_name)</code></h4>
+                <p>{{ m.icon('star') }}</p>
             </div>
             <div class="col-md-3">
                 <h4><code>alert(message, type)</code></h4>
diff --git a/resources/views/pages/faq/edit.twig b/resources/views/pages/faq/edit.twig
index cd988f7c..9be91605 100644
--- a/resources/views/pages/faq/edit.twig
+++ b/resources/views/pages/faq/edit.twig
@@ -14,12 +14,12 @@
             <div class="row">
                 <div class="col-md-6">
                     <p>
-                        {{ m.glyphicon('time') }} {{ faq.updated_at.format(__('Y-m-d H:i')) }}
+                        {{ m.icon('clock') }} {{ faq.updated_at.format(__('Y-m-d H:i')) }}
 
                         {% if faq.updated_at != faq.created_at %}
                             &emsp;{{ __('form.updated') }}
                             <br>
-                            {{ m.glyphicon('time') }} {{ faq.created_at.format(__('Y-m-d H:i')) }}
+                            {{ m.icon('clock') }} {{ faq.created_at.format(__('Y-m-d H:i')) }}
                         {% endif %}
                     </p>
                 </div>
@@ -38,10 +38,10 @@
 
                     {{ f.submit() }}
 
-                    {{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
+                    {{ f.submit(m.icon('eye-slash'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
 
                     {% if faq and faq.id %}
-                        {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
+                        {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
                     {% endif %}
                 </div>
             </div>
diff --git a/resources/views/pages/faq/overview.twig b/resources/views/pages/faq/overview.twig
index 3e547774..dacfd9ed 100644
--- a/resources/views/pages/faq/overview.twig
+++ b/resources/views/pages/faq/overview.twig
@@ -11,7 +11,7 @@
             {{ block('title') }}
 
             {%- if has_permission_to('faq.edit') -%}
-                {{ m.button(m.glyphicon('plus'), url('admin/faq')) }}
+                {{ m.button(m.icon('plus-lg'), url('admin/faq'), 'secondary') }}
             {%- endif %}
         </h1>
 
@@ -35,7 +35,7 @@
                                 <h3>
                                     {{ item.question }}
                                     <small class="text-muted">
-                                        <a class="ref-link" href="#faq-{{ item.id }}">{{ m.glyphicon('link') }}</a>
+                                        <a class="ref-link" href="#faq-{{ item.id }}">{{ m.icon('link') }}</a>
                                     </small>
                                 </h3>
                             </div>
@@ -45,11 +45,11 @@
                             </div>
 
                             <div class="panel-footer">
-                                {{ m.glyphicon('time') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
+                                {{ m.icon('clock') }} {{ item.updated_at.format(__('Y-m-d H:i')) }}
 
                                 {% if has_permission_to('faq.edit') %}
                                     <span class="pull-right">
-                                        {{ m.button(m.glyphicon('edit'), url('admin/faq/' ~ item.id), null, 'xs') }}
+                                        {{ m.button(m.icon('pencil-square'), url('admin/faq/' ~ item.id), null, 'xs') }}
                                     </span>
                                 {% endif %}
                             </div>
diff --git a/resources/views/pages/login.twig b/resources/views/pages/login.twig
index 6c1f9e1d..7a9407b5 100644
--- a/resources/views/pages/login.twig
+++ b/resources/views/pages/login.twig
@@ -118,7 +118,7 @@
             </div>
 
             <div class="col-md-12 text-center">
-                {{ m.glyphicon('info-sign') }} {{ __('Please note: You have to activate cookies!') }}
+                {{ m.icon('info-lg') }} {{ __('Please note: You have to activate cookies!') }}
             </div>
         </div>
     </div>
diff --git a/resources/views/pages/news/edit.twig b/resources/views/pages/news/edit.twig
index 0e10b883..1921fe8a 100644
--- a/resources/views/pages/news/edit.twig
+++ b/resources/views/pages/news/edit.twig
@@ -14,12 +14,12 @@
             <div class="row">
                 <div class="col-md-6">
                     <p>
-                        {{ m.glyphicon('time') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
+                        {{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
 
                         {% if news.updated_at != news.created_at %}
                             &emsp;{{ __('news.updated') }}
                             <br>
-                            {{ m.glyphicon('time') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
+                            {{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
                         {% endif %}
 
                         &emsp;{{ m.user(news.user) }}
@@ -52,10 +52,10 @@
 
                     {{ f.submit() }}
 
-                    {{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
+                    {{ f.submit(m.icon('eye-slash'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
 
                     {% if news and news.id %}
-                        {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
+                        {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
                     {% endif %}
                 </div>
             </div>
diff --git a/resources/views/pages/news/news.twig b/resources/views/pages/news/news.twig
index 93d21628..e3f8f456 100644
--- a/resources/views/pages/news/news.twig
+++ b/resources/views/pages/news/news.twig
@@ -18,7 +18,7 @@
                     {{ comment.text|nl2br }}
                 </div>
                 <div class="panel-footer text-muted">
-                    {{ m.glyphicon('time') }}
+                    {{ m.icon('clock') }}
                     {{ comment.created_at.format(__('Y-m-d H:i')) }}
 
                     {{ m.user(comment.user) }}
diff --git a/resources/views/pages/news/overview.twig b/resources/views/pages/news/overview.twig
index b0b5dbd7..091bcee4 100644
--- a/resources/views/pages/news/overview.twig
+++ b/resources/views/pages/news/overview.twig
@@ -53,7 +53,7 @@
             <div class="panel-heading">
                 <h3 class="panel-title">
                     <a href="{{ url('news/' ~ news.id) }}">
-                        {% if news.is_pinned %}{{ m.glyphicon('pushpin') }}{% endif %}
+                        {% if news.is_pinned %}{{ m.icon('pin-angle') }}{% endif %}
                         {% if news.is_meeting %}{{ __('news.is_meeting') }}{% endif %}
                         {{ news.title }}
                     </a>
@@ -66,13 +66,13 @@
         </div>
 
         <div class="panel-footer text-muted">
-            {{ m.glyphicon('time') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
+            {{ m.icon('clock') }} {{ news.updated_at.format(__('Y-m-d H:i')) }}
 
             {% if news.updated_at != news.created_at and not is_overview %}
                 &emsp;{{ __('news.updated') }}
 
                 <br>
-                {{ m.glyphicon('time') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
+                {{ m.icon('clock') }} {{ news.created_at.format(__('Y-m-d H:i')) }}
             {% endif %}
 
             &emsp;{{ m.user(news.user) }}
@@ -80,14 +80,14 @@
             {% if show_comments_link|default(false) %}
                 &ensp;
                 <a href="{{ url('news/' ~ news.id) }}">
-                    {{ m.glyphicon('comment') }} {{ __('news.comments') }} &raquo;
+                    {{ m.icon('chat-left-text') }} {{ __('news.comments') }} &raquo;
                 </a>
                 <span class="badge">{{ news.comments.count() }}</span>
             {% endif %}
 
             {% if has_permission_to('admin_news') %}
                 <div class="pull-right">
-                    {{ m.button(m.glyphicon('edit'), url('admin/news/' ~ news.id), null, 'xs') }}
+                    {{ m.button(m.icon('pencil-square'), url('admin/news/' ~ news.id), null, 'xs') }}
                 </div>
             {% endif %}
         </div>
diff --git a/resources/views/pages/questions/edit.twig b/resources/views/pages/questions/edit.twig
index 343ac12f..16fa7e2e 100644
--- a/resources/views/pages/questions/edit.twig
+++ b/resources/views/pages/questions/edit.twig
@@ -14,12 +14,12 @@
             <div class="row">
                 <div class="col-md-6">
                     <p>
-                        {{ m.glyphicon('time') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
+                        {{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
 
                         {% if question.updated_at != question.created_at %}
                             &emsp;{{ __('form.updated') }}
                             <br>
-                            {{ m.glyphicon('time') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
+                            {{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
                         {% endif %}
                     </p>
                 </div>
@@ -41,10 +41,10 @@
                     {{ f.submit() }}
 
                     {% if is_admin|default(false) %}
-                        {{ f.submit(m.glyphicon('eye-close'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
+                        {{ f.submit(m.icon('eye-slash'), {'name': 'preview', 'btn_type': 'info', 'title': __('form.preview')}) }}
 
                         {% if question and question.id %}
-                            {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
+                            {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'title': __('form.delete')}) }}
                         {% endif %}
                     {% endif %}
                 </div>
diff --git a/resources/views/pages/questions/overview.twig b/resources/views/pages/questions/overview.twig
index c7ab960a..64ac448d 100644
--- a/resources/views/pages/questions/overview.twig
+++ b/resources/views/pages/questions/overview.twig
@@ -13,7 +13,7 @@
                 {{ block('title') }}
 
                 {% if not is_admin|default(false) %}
-                    {{ m.button(m.glyphicon('plus'), url('questions/new')) }}
+                    {{ m.button(m.icon('plus-lg'), url('questions/new'), 'secondary') }}
                 {% endif %}
             </h1>
         </div>
@@ -33,7 +33,7 @@
                                         </div>
 
                                         <div class="panel-footer">
-                                            {{ m.glyphicon('time') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
+                                            {{ m.icon('clock') }} {{ question.created_at.format(__('Y-m-d H:i')) }}
 
                                             {% if has_permission_to('question.edit') %}
                                                 &nbsp;{{ m.user(question.user) }}
@@ -48,13 +48,13 @@
                                                 >
                                                     {{ csrf() }}
                                                     {{ f.hidden('id', question.id) }}
-                                                    {{ f.submit(m.glyphicon('trash'), {'name': 'delete', 'btn_type': 'danger', 'btn_size': 'xs', 'title': __('form.delete')}) }}
+                                                    {{ f.submit(m.icon('trash'), {'name': 'delete', 'btn_type': 'danger', 'btn_size': 'xs', 'title': __('form.delete')}) }}
                                                 </form>
                                             {% endif %}
 
                                             {% if has_permission_to('question.edit') %}
                                                 <span class="pull-right">
-                                                    {{ m.button(m.glyphicon('edit'), url('admin/questions/' ~ question.id), null, 'xs') }}
+                                                    {{ m.button(m.icon('pencil-square'), url('admin/questions/' ~ question.id), null, 'xs') }}
                                                 </span>
                                             {% endif %}
                                         </div>
@@ -67,7 +67,7 @@
                                                 {{ question.answer|markdown }}
                                             </div>
                                             <div class="panel-footer">
-                                                {{ m.glyphicon('time') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
+                                                {{ m.icon('clock') }} {{ question.updated_at.format(__('Y-m-d H:i')) }}
                                                 &nbsp;{{ m.user(question.answerer) }}
                                             </div>
                                         </div>