diff --git a/htdocs/blocktype/openbadgedisplayer/js/configform.js b/htdocs/blocktype/openbadgedisplayer/js/configform.js
index 91f81012ea91f8ea91d8ad86af306ee25de38d93..c6c52ecb2fa05649fe0c4a4e3972119f04cd8f9b 100644
--- a/htdocs/blocktype/openbadgedisplayer/js/configform.js
+++ b/htdocs/blocktype/openbadgedisplayer/js/configform.js
@@ -43,16 +43,15 @@ if ((badgegroups_hosts instanceof Array && badgegroups_hosts.length >= 1)
             count++;
             /* Fetching the badge info via ajax and render the pieform checkbox element */
             sendjsonrequest(config['wwwroot'] + '/blocktype/openbadgedisplayer/badgegroupnames.json.php', params, 'POST', function(data) {
-                var icon = jQuery('<span class="icon icon-lg icon-exclamation-triangle left" aria-hidden="true" role="presentation"></span>');
                 var container = jQuery('<div class="alert alert-warning" role="alert">');
                 if (!data.uid) {
                     var msg = jQuery('<span>').text(data.nobackpackmsg);
-                    container.append(icon).append(msg);
+                    container.append(msg);
                     jQuery("div#instconf_loadinginfo_container > div").append(container);
                 }
                 else if (!data.badgegroups || data.badgegroups.length === 0) {
                     var msg = jQuery('<span>').text(data.nobadgegroupsmsg);
-                    container.append(icon).append(msg);
+                    container.append(msg);
                     jQuery("div#instconf_loadinginfo_container > div").append(container);
                 }
                 else {
diff --git a/htdocs/blocktype/openbadgedisplayer/lib.php b/htdocs/blocktype/openbadgedisplayer/lib.php
index 29343401368530f2bd2b63435119eaeb95488155..299cbfeab7cb5c94a247b005eb96e6d196bfec39 100644
--- a/htdocs/blocktype/openbadgedisplayer/lib.php
+++ b/htdocs/blocktype/openbadgedisplayer/lib.php
@@ -352,7 +352,7 @@ class PluginBlocktypeOpenbadgedisplayer extends SystemBlocktype {
                 'message' => array(
                     'type' => 'html',
                     'class' => '',
-                    'value' => '<div class="alert alert-warning" role="alert"><span class="icon icon-lg icon-exclamation-triangle left" aria-hidden="true" role="presentation"></span>' . get_string('missingbadgesources', 'blocktype.openbadgedisplayer') . '</div>'
+                    'value' => '<div class="alert alert-warning" role="alert">' . get_string('missingbadgesources', 'blocktype.openbadgedisplayer') . '</div>'
                 ),
             );
             return $fields;
diff --git a/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss b/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss
index da0e3e98492611fe426042584698182de20033ca..5f5f6d604cfe08994ec3393de278570280a8dacb 100755
--- a/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss
+++ b/htdocs/theme/primaryschool/sass/layout/card/_card-header.scss
@@ -96,8 +96,7 @@
 
 .card {
     .card-header:before {
-        font-family: "Font Awesome 5 Free Solid", "Font Awesome 5 Free" !important;
-        font-weight: 900;
+        @include fonttype(solid);
         color: rgba(255, 255, 255, 0.6);
         padding-right: 5px;
     }
@@ -212,10 +211,8 @@
     }
 }
 .card.card-regular .card-header:before {
-    font-family: "Font Awesome 5 Free Regular", "Font Awesome 5 Free" !important;
-    font-weight: 400;
+    @include fonttype(regular);
 }
 .card.card-brand .card-header:before {
-    font-family: "Font Awesome 5 Brands Regular", "Font Awesome 5 Free" !important;
-    font-weight: 400;
+    @include fonttype(brands);
 }
diff --git a/htdocs/theme/raw/sass/form/_alert.scss b/htdocs/theme/raw/sass/form/_alert.scss
index 617948936a050d5b15d12fb283e38edb382696b3..8ab216a4b31d838261ee41d593f66d4adcaa64ef 100644
--- a/htdocs/theme/raw/sass/form/_alert.scss
+++ b/htdocs/theme/raw/sass/form/_alert.scss
@@ -46,26 +46,56 @@
     color: $gray-500;
 }
 
+.alert {
+    position: relative;
+    padding: .75rem 1.25rem .75rem 3rem;
+
+    &:before {
+      @include fonttype(solid);
+      position: absolute;
+      left: 20px;
+      top: 15px;
+      font-size: 1.33333em;
+      line-height: .75em;
+    }
+}
+
 // overrides bootstrap calculations so this is same as states
 .alert-success {
     color: scale-color($success, $lightness: -30%);
     background-color: scale-color($success, $lightness: 70%);
     border-color: scale-color($success, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-check);
+      color: scale-color($success, $lightness: -30%);
+    }
 }
 .alert-info {
     color: scale-color($info, $lightness: -30%);
     background-color: scale-color($info, $lightness: 70%);
     border-color: scale-color($info, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-info-circle);
+      color: scale-color($info, $lightness: -30%);
+    }
 }
 .alert-warning {
     color: scale-color($warning, $lightness: -40%);
     background-color: scale-color($warning, $lightness: 85%);
     border-color: scale-color($warning, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-exclamation-triangle);
+      color: scale-color($warning, $lightness: -40%);
+    }
 }
 .alert-danger {
     color: scale-color($danger, $lightness: -30%);
     background-color: scale-color($danger, $lightness: 70%);
     border-color: scale-color($danger, $lightness: 50%);
+    &:before {
+      content: fa-content($fa-var-times);
+      color: scale-color($danger, $lightness: -30%);
+    }
 }
 .alert-submitted {
     background-color: $state-submitted-bg;
diff --git a/htdocs/theme/raw/sass/form/_form-group.scss b/htdocs/theme/raw/sass/form/_form-group.scss
index 70a93f81ed5d94f536ae03385c3672ee1d1593ef..47d03fe98fc6dd8e11b2bd87f27ec6cbb36cc9c9 100644
--- a/htdocs/theme/raw/sass/form/_form-group.scss
+++ b/htdocs/theme/raw/sass/form/_form-group.scss
@@ -505,6 +505,14 @@
         font-size: $font-size-base - 1;
         display: block;
         padding-top: 10px;
+        font-size: $font-size-sm;
+
+        &:before {
+          @include fonttype(solid);
+          content: fa-content($fa-var-times);
+          color: scale-color($danger, $lightness: -30%);
+          padding-right: 5px;
+        }
 
         @include media-breakpoint-up(lg) {
             margin-left: 265px;
diff --git a/htdocs/theme/raw/sass/form/_site-messages.scss b/htdocs/theme/raw/sass/form/_site-messages.scss
index ab88a11be7dea24e4e9d5d8e3037aa64acd4c07d..db15905643a85032b05fdc00666e1344229ae572 100755
--- a/htdocs/theme/raw/sass/form/_site-messages.scss
+++ b/htdocs/theme/raw/sass/form/_site-messages.scss
@@ -3,10 +3,42 @@
     top: 0;
     width: 100%;
     z-index: 1001;
+
     .site-message.alert {
         margin-bottom: 0;
         border-radius: 0;
-        padding: 5px 15px;
+        padding: 6px 1.25rem;
+        border: 0;
+
+        // take away default alert icon so it can be aligned with different break points
+        &:before {
+            display: none;
+        }
+        // puts the alert icons into the container with break points
+        .container:before {
+            @include fonttype(solid);
+            position: relative;
+            top: 1px;
+            font-size: 1.33333em;
+            line-height: .75em;
+            padding-right: 5px;
+        }
+        &.alert-success .container:before {
+            content: fa-content($fa-var-check);
+            color: scale-color($success, $lightness: -30%);
+        }
+        &.alert-info .container:before {
+            content: fa-content($fa-var-info-circle);
+            color: scale-color($info, $lightness: -30%);
+        }
+        &.alert-warning .container:before {
+            content: fa-content($fa-var-exclamation-triangle);
+            color: scale-color($warning, $lightness: -40%);
+        }
+        &.alert-danger .container:before {
+            content: fa-content($fa-var-times);
+            color: scale-color($danger, $lightness: -30%);
+        }
     }
     @include media-breakpoint-down(sm) {
         display: none;
diff --git a/htdocs/theme/raw/templates/header.tpl b/htdocs/theme/raw/templates/header.tpl
index e5dd54fedebbda28b80ac490889f90a96defb8e6..8cdac3ce40565b36c94e85e8255ec3cb18cbcf8f 100644
--- a/htdocs/theme/raw/templates/header.tpl
+++ b/htdocs/theme/raw/templates/header.tpl
@@ -9,31 +9,31 @@
     </div>
 
     {if $USERMASQUERADING || !$PRODUCTIONMODE || $SITECLOSED || $SITETOP}
-        <div class="site-messages text-center">
+        <div class="site-messages">
     {/if}
 
         {if $USERMASQUERADING}
             <div class="site-message alert alert-warning" role="alert">
-                <span class="icon icon-lg icon-exclamation-triangle left" role="presentation" aria-hidden="true"></span>
-                <span>{$masqueradedetails}</span>
-                <a href="{$becomeyoulink}">{$becomeyouagain}</a>
+                <div class="container">
+                    <span>{$masqueradedetails}</span>
+                    <a href="{$becomeyoulink}">{$becomeyouagain}</a>
+                </div>
             </div>
         {/if}
         {if !$PRODUCTIONMODE}
             <div class="site-message alert alert-info" role="alert">
-                <span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span>
-                {str tag=notproductionsite section=error}
+                <div class="container">
+                    {str tag=notproductionsite section=error}
+                </div>
             </div>
         {/if}
         {if $SITEOUTOFSYNC}
             <div class="site-message alert alert-warning" role="alert">
-                <span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span>
                 {str tag=siteoutofsyncfor section=error arg1=$SITEOUTOFSYNC}
             </div>
         {/if}
         {if $SITECLOSED}
             <div class="site-message alert alert-danger" role="alert">
-                <span class="icon icon-lg icon-lock left" role="presentation" aria-hidden="true"></span>
                 {if $SITECLOSED == 'logindisabled'}{str tag=siteclosedlogindisabled section=mahara arg1="`$WWWROOT`admin/upgrade.php"}{else}{str tag=siteclosed}{/if}
             </div>
         {/if}
diff --git a/htdocs/theme/raw/templates/styleguide.tpl b/htdocs/theme/raw/templates/styleguide.tpl
index ef50d90dae426afb539ec4eb0d9912d870667fd5..d419235b58a79afcd2969f1d63b0c2703a727262 100644
--- a/htdocs/theme/raw/templates/styleguide.tpl
+++ b/htdocs/theme/raw/templates/styleguide.tpl
@@ -939,8 +939,7 @@ section .card-quarter:nth-child(4n) .page-access .dropdown-menu {
 This is used to indicate that you should make the recommended change.
 ```
 <div class="admin-warning alert alert-warning">
-    <h3>Warning</h3>
-    <span class="icon icon-lg icon-exclamation-triangle left" role="presentation" aria-hidden="true"></span> This is a warning alert.
+    This is a warning alert.
 </div>
 ```
 </section>
@@ -950,8 +949,7 @@ This is used to indicate that you should make the recommended change.
 Used to show that there is an error, which must be fixed before you can continue.
 ```
 <div class="alert alert-danger">
-    <h3>Danger</h3>
-    <span class="icon icon-lg icon-times text-danger left" role="presentation" aria-hidden="true"></span>This is a danger alert.
+    This is a danger alert.
 </div>
 ```
 </section>
@@ -961,8 +959,7 @@ Used to show that there is an error, which must be fixed before you can continue
 Used to show that an action was successful.
 ```
 <div class="alert alert-success">
-    <h3>Success</h3>
-    <span class="icon icon-lg icon-check text-success left" role="presentation" aria-hidden="true"></span> This is a success alert.
+    This is a success alert.
 </div>
 ```
 </section>
@@ -972,8 +969,7 @@ Used to show that an action was successful.
 Used to show information about Mahara. Usually, this is only shown to administrators.
 ```
 <div class="alert alert-info">
-    <h3>Info</h3>
-    <span class="icon icon-lg icon-info-circle left" role="presentation" aria-hidden="true"></span> This is a info alert.
+    This is a info alert.
 </div>
 ```
 </section>