add support for fontawesome svg icons (#2920)

* add support for fontawesome svg icons
* bump bundlewatch sizes

.bundlewatch.config.json

@@ -6,7 +6,7 @@
     },
     {
       "path": "./dist/css/adminlte.min.css",
-      "maxSize": "72.5 kB"
+      "maxSize": "74 kB"
     },
     {
       "path": "./dist/css/alt/adminlte.components.css",

build/scss/_buttons.scss

@@ -76,11 +76,16 @@
   > .fab,
   > .fal,
   > .fad,
+  > .svg-inline--fa,
   > .ion {
     display: block;
     font-size: 20px;
   }
 
+  > .svg-inline--fa {
+    margin: 0 auto;
+  }
+
   &:hover {
     background-color: $button-default-background-color;
     border-color: darken($button-default-border-color, 20%);

build/scss/_cards.scss

@@ -418,6 +418,7 @@ html.maximized-card {
       > .fab,
       > .fal,
       > .fad,
+      > .svg-inline--fa,
       > .ion {
         cursor: pointer;
         margin-right: 5px;

build/scss/_carousel.scss

@@ -2,10 +2,12 @@
 // Component: Carousel
 //
 
-.carousel-control {
-  &.left,
-  &.right {
-    background-image: none;
+.carousel-control-custom-icon {
+  .carousel-control-prev & {
+    margin-left: -20px;
+  }
+  .carousel-control-next & {
+    margin-right: 20px;
   }
 
   > .fa,
@@ -14,6 +16,7 @@
   > .fab,
   > .fal,
   > .fad,
+  > .svg-inline--fa,
   > .ion {
     display: inline-block;
     font-size: 40px;

build/scss/_forms.scss

@@ -42,6 +42,7 @@
   &.fab,
   &.fal,
   &.fad,
+  &.svg-inline--fa,
   &.ion {
     line-height: $input-height;
   }
@@ -55,6 +56,7 @@
   &.fab,
   &.fal,
   &.fad,
+  &.svg-inline--fa,
   &.ion {
     line-height: $input-height-lg;
   }
@@ -68,6 +70,7 @@
     &.fab,
     &.fal,
     &.fad,
+    &.svg-inline--fa,
     &.ion {
       line-height: $input-height-lg;
     }
@@ -82,6 +85,7 @@
   &.fab,
   &.fal,
   &.fad,
+  &.svg-inline--fa,
   &.ion {
     line-height: $input-height-sm;
   }
@@ -95,6 +99,7 @@
     &.fab,
     &.fal,
     &.fad,
+    &.svg-inline--fa,
     &.ion {
       line-height: $input-height-sm;
     }

build/scss/_main-header.scss

@@ -23,6 +23,7 @@
       > .fab,
       > .fal,
       > .fad,
+      > .svg-inline--fa,
       > .ion {
         font-size: $font-size-sm;
       }

build/scss/_main-sidebar.scss

@@ -126,6 +126,7 @@
       &.fab,
       &.fal,
       &.fad,
+      &.svg-inline--fa,
       &.ion {
         font-size: 1.1rem;
       }

build/scss/_miscellaneous.scss

@@ -270,6 +270,7 @@
     > .fab,
     > .fal,
     > .fad,
+    > .svg-inline--fa,
     > .ion {
       color: $gray-800;
     }
@@ -283,6 +284,7 @@
       > .fab,
       > .fal,
       > .fad,
+      > .svg-inline--fa,
       > .ion {
         color: $gray-400;
       }

build/scss/_small-box.scss

@@ -115,6 +115,13 @@
       }
     }
 
+    svg {
+      font-size: 70px;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      transition: transform $transition-speed linear;
+    }
   }
 
   // Small box hover state
@@ -122,15 +129,20 @@
     text-decoration: none;
 
     // Animate icons on small box hover
-    .icon > i {
-      &,
-      &.fa,
-      &.fas,
-      &.far,
-      &.fab,
-      &.fal,
-      &.fad,
-      &.ion {
+    .icon {
+      > i {
+        &,
+        &.fa,
+        &.fas,
+        &.far,
+        &.fab,
+        &.fal,
+        &.fad,
+        &.ion {
+          transform: scale(1.1);
+        }
+      }
+      > svg {
         transform: scale(1.1);
       }
     }

build/scss/_timeline.scss

@@ -90,10 +90,11 @@
     > .fab,
     > .fal,
     > .fad,
+    > .svg-inline--fa,
     > .ion {
       background-color: $gray-500;
       border-radius: 50%;
-      font-size: 15px;
+      font-size: 16px;
       height: 30px;
       left: 18px;
       line-height: 30px;
@@ -102,6 +103,9 @@
       top: 0;
       width: 30px;
     }
+    > .svg-inline--fa {
+      padding: 7px;
+    }
   }
   // Time label
   > .time-label {

build/scss/plugins/_fullcalendar.scss

@@ -103,6 +103,7 @@
     .fab,
     .fal,
     .fad,
+    .svg-inline--fa,
     .ion {
       transition: transform linear .3s;
 

pages/UI/general.html

@@ -1447,11 +1447,15 @@
                     </div>
                   </div>
                   <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
-                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                    <span class="carousel-control-custom-icon" aria-hidden="true">
+                      <i class="fas fa-chevron-left"></i>
+                    </span>
                     <span class="sr-only">Previous</span>
                   </a>
                   <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
-                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                    <span class="carousel-control-custom-icon" aria-hidden="true">
+                      <i class="fas fa-chevron-right"></i>
+                    </span>
                     <span class="sr-only">Next</span>
                   </a>
                 </div>