Bug 1838915: Make all instances of font-awesome correct font-weight

By making a fonttype mixin

behatnotneeded

Change-Id: I4f0938795c3b5f8ab93751915227d0c5370ba48f
Signed-off-by: Robert Lyon <robertl@catalyst.net.nz>

htdocs/theme/raw/sass/_custom.scss

@@ -408,7 +408,7 @@
 
 .table thead {
     a::after {
-        font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
+        @include fonttype(solid);
         position: relative;
         top: -3px;
         margin-left: 3px;

htdocs/theme/raw/sass/features/_timeline.scss

@@ -187,8 +187,8 @@ ul.cd-timeline-navigation-second {
   outline: 0;
   text-decoration: none;
   &::after {
+    @include fonttype(solid);
     content: fa-content($fa-var-chevron-circle-right);
-    font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
     color: $theme-primary-color;
     font-size: 28px;
     top: -5px;

htdocs/theme/raw/sass/form/_dropdown-group.scss

@@ -65,8 +65,8 @@
         z-index: 1;
         background: rgba(#fff, 0.8);
         &:before {
+            @include fonttype(solid);
             content: fa-content($fa-var-caret-down);
-            font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
             margin-top: 9px;
             position: absolute;
             right: 0%;

htdocs/theme/raw/sass/form/_dropdown.scss

@@ -25,8 +25,8 @@
             display:none;
         }
         &:before {
+            @include fonttype(solid);
             content: fa-content($fa-var-caret-down);
-            font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
             margin-top: 9px;
             position: absolute;
             right: 0%;

htdocs/theme/raw/sass/form/_form.scss

@@ -254,8 +254,8 @@ textarea.resizable {
     padding-right: 20px;
 }
 .hasDatepickerwrapper:after {
+    @include fonttype(regular);
     content: fa-content($fa-var-calendar-alt);
-    font-family: "Font Awesome 5 Free Regular", "Font Awesome 5 Free" !important;
     font-size: 18px;
     color: scale-color($theme-text-color, $lightness: 25%);
     position:relative;
@@ -264,9 +264,8 @@ textarea.resizable {
     cursor: text;
 }
 .hasDatepickerwrapperacl:after {
+    @include fonttype(regular);
     content: fa-content($fa-var-calendar-alt);
-    font-family: "Font Awesome 5 Free Regular", "Font Awesome 5 Free" !important;
-    font-size: 18px;
     color: scale-color($theme-text-color, $lightness: 25%);
     right: 10px;
     position: absolute;

htdocs/theme/raw/sass/lib/_draggable.scss

@@ -22,8 +22,8 @@
     border-radius: 0;
 
     &:before {
+        @include fonttype(solid);
         content: fa-content($fa-var-arrows-alt);
-        font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
         box-sizing: border-box;
         color: $gray-300;
         opacity: 0.7;

htdocs/theme/raw/sass/lib/_mahara-select2.scss

@@ -12,7 +12,7 @@
     color: $input-color;
     &.select2-selection--multiple {
         &:after {
-            font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
+            @include fonttype(solid);
             content: fa-content($fa-var-search);
             color: scale-color($theme-text-color, $lightness: 62.5%);
             font-size: 1em;
@@ -73,7 +73,7 @@
         .select2-search {
             position: relative;
             &:after {
-                font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
+                @include fonttype(solid);
                 content: fa-content($fa-var-search);
                 color: scale-color($theme-text-color, $lightness: 62.5%);
                 font-size: 1em;

htdocs/theme/raw/sass/typography/_icons.scss

 // Extra icons to fit db defiend tyopes (cf pagebuilder)
 .icon { //fontawesome solid is the default
-    font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
-    font-weight: 900;
+    @include fonttype(solid);
     &.icon-regular {
-        font-family: "Font Awesome 5 Free Regular", "Font Awesome 5 Free" !important;
-        font-weight: 400;
+        @include fonttype(regular);
     }
     &.icon-brand {
-        font-family: "Font Awesome 5 Brands Regular", "Font Awesome 5 Free" !important;
-        font-weight: 400;
+        @include fonttype(brands);
     }
     &.right {
         padding-left: 5px;

htdocs/theme/raw/sass/utilities/_mixins.scss

@@ -60,6 +60,21 @@
     -moz-appearance: $var;
 }
 
+@mixin fonttype($type: solid) {
+    @if $type == regular {
+        font-family: "Font Awesome 5 Free Regular", "Font Awesome 5 Free";
+        font-weight: 400;
+    }
+    @else if $type == brands {
+        font-family: "Font Awesome 5 Brands Regular", "Font Awesome 5 Free";
+        font-weight: 400;
+    }
+    @else {
+        font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free";
+        font-weight: 900;
+    }
+}
+
 /*
 * BOOTSTRAP 3 MIXINS that Mahara uses
 */