Switch to Font Awesome CSS

It's lighter than the JS

Signed-off-by: XhmikosR <xhmikosr@gmail.com>

scripts/js/login.js

@@ -134,7 +134,7 @@ $("#totp").on("input", function () {
 // Toggle password visibility button
 $("#toggle-password").on("click", function () {
   // Toggle font-awesome classes to change the svg icon on the button
-  $("svg", this).toggleClass("fa-eye fa-eye-slash");
+  $(".field-icon", this).toggleClass("fa-eye fa-eye-slash");
 
   // Password field
   var $pwd = $("#current-password");

scripts/lua/header.lp

@@ -88,6 +88,7 @@ is_authenticated = mg.request_info.is_authenticated
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bootstrap/css/bootstrap.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/animate/animate.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/bstreeview/bstreeview.min.css')?>">
+    <link rel="stylesheet" href="<?=pihole.fileversion('vendor/font-awesome/css/all.min.css')?>">
 <?
 if startsWith(scriptname, 'groups') then
     -- Group management styles
@@ -115,7 +116,6 @@ if startsWith(scriptname, 'groups') then
     <script src="<?=pihole.fileversion('vendor/bootstrap/js/bootstrap.min.js')?>"></script>
     <script src="<?=pihole.fileversion('vendor/adminLTE/adminlte.min.js')?>"></script>
     <script src="<?=pihole.fileversion('vendor/bootstrap-notify/bootstrap-notify.min.js')?>"></script>
-    <script src="<?=pihole.fileversion('vendor/font-awesome/all.min.js')?>"></script>
     <script src="<?=pihole.fileversion('scripts/js/utils.js')?>"></script>
     <script src="<?=pihole.fileversion('vendor/waitMe/waitMe.min.js')?>"></script>
     <link rel="stylesheet" href="<?=pihole.fileversion('vendor/waitMe/waitMe.min.css')?>">

style/pi-hole.css

@@ -459,6 +459,12 @@ tfoot.add-new-item > tr > th {
   padding: 5px;
 }
 
+.main-header .navbar .nav > li.user > a > .fa,
+.main-header .navbar .nav > li.user > a > .glyphicon,
+.main-header .navbar .nav > li.user > a > .ion {
+  margin-right: 0;
+}
+
 .box {
   border-radius: 8px;
   overflow: hidden;
@@ -502,7 +508,7 @@ tfoot.add-new-item > tr > th {
   }
 }
 
-.small-box-footer svg {
+.small-box-footer i {
   margin: 0 5px;
   font-size: 13px;
 }
@@ -847,16 +853,16 @@ body:not([class*="lcars"])
 }
 
 /* reverse side menu collapse arrows when menu is closed */
-.sidebar-collapse .sidebar-toggle-svg svg {
+.sidebar-collapse .sidebar-toggle-svg i {
   transform: scaleX(-1);
 }
 
 /* reverse side menu collapse arrows on mobile screens */
 @media (max-width: 767px) {
-  .sidebar-toggle-svg svg {
+  .sidebar-toggle-svg i {
     transform: scaleX(-1);
   }
-  .sidebar-open .sidebar-toggle-svg svg {
+  .sidebar-open .sidebar-toggle-svg i {
     transform: scaleX(1);
   }
 }
@@ -996,6 +1002,11 @@ body:not([class*="lcars"])
   margin-right: 0.5em;
 }
 
+.user-footer .menu-icon {
+  max-height: 1.75rem;
+  vertical-align: middle;
+}
+
 div.dt-buttons {
   margin: 2px 0 5px;
 }
@@ -1564,7 +1575,7 @@ table.dataTable tbody > tr > .selected {
   margin: 0 5px;
 }
 
-.box-icons svg {
+.box-icons i {
   margin: 0 4px;
 }
 

style/themes/lcars.css

@@ -931,7 +931,7 @@ p.login-box-msg,
   margin-right: -9px;
 }
 
-.sidebar-menu li a > svg {
+.sidebar-menu li a > i {
   display: none;
 }
 
@@ -939,7 +939,7 @@ p.login-box-msg,
   margin-right: 0;
 }
 
-.treeview-menu li a svg {
+.treeview-menu li a i {
   display: inherit;
   position: absolute;
   right: 16px;
@@ -990,7 +990,7 @@ p.login-box-msg,
   position: absolute !important;
 }
 
-.sidebar-collapse .treeview-menu li a svg {
+.sidebar-collapse .treeview-menu li a i {
   top: auto;
   right: auto;
   bottom: 6px;
@@ -2190,8 +2190,7 @@ td.highlight {
 }
 
 /*** 🖖 ***/
-svg.fa-hand path {
-  d: path(
-    "M247 24a32 32 0 1 0-62 16l53 198c3 9-4 18-14 18-6 0-12-4-14-10l-43-143a32 32 0 0 0-62 18l63 207c3 8-7 13-13 8l-55-53a40 40 0 0 0-56 58l113 107c43 41 100 64 160 64h19c58-4 109-43 125-100l82-275c5-17-5-35-22-40s-35 5-40 22l-37 128c-2 5-7 9-12 9-8 0-14-7-13-15l36-170c4-18-7-35-24-38s-35 7-38 24l-38 178a26 26 0 0 1-51 1z"
-  ) !important;
+.fas.fa-hand-paper {
+  --fa: "\f259" !important;
+  --fa--fa: "\f259\f259" !important;
 }