From 6dfa3625dfec711a6fb20d0ea826ce9f65fc06cb Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Thu, 27 Jul 2017 15:03:41 -0400
Subject: [PATCH] REFACTOR: Replace `fa-*` in SCSS with `d-icon-*`

---
 .../stylesheets/common/admin/admin_base.scss   | 18 +++++++++---------
 .../stylesheets/common/admin/customize.scss    |  2 +-
 .../stylesheets/common/base/_topic-list.scss   |  4 ++--
 .../stylesheets/common/base/combobox.scss      |  2 +-
 .../stylesheets/common/base/compose.scss       |  2 +-
 .../stylesheets/common/base/directory.scss     |  4 ++--
 app/assets/stylesheets/common/base/emoji.scss  |  4 ++--
 .../stylesheets/common/base/exception.scss     |  2 +-
 app/assets/stylesheets/common/base/header.scss |  5 +++--
 .../stylesheets/common/base/history.scss       |  2 +-
 .../stylesheets/common/base/menu-panel.scss    |  4 ++--
 app/assets/stylesheets/common/base/modal.scss  |  2 +-
 app/assets/stylesheets/common/base/rtl.scss    |  4 ++--
 .../stylesheets/common/base/tagging.scss       |  2 +-
 .../stylesheets/common/base/topic-post.scss    |  2 +-
 app/assets/stylesheets/common/base/user.scss   |  6 +++---
 .../stylesheets/common/components/badges.scss  |  2 +-
 .../stylesheets/common/components/buttons.scss |  6 +++---
 app/assets/stylesheets/desktop/discourse.scss  |  2 +-
 app/assets/stylesheets/desktop/header.scss     |  2 +-
 app/assets/stylesheets/desktop/topic-list.scss | 10 +++++-----
 app/assets/stylesheets/desktop/topic-post.scss | 14 +++++++-------
 app/assets/stylesheets/desktop/topic.scss      |  2 +-
 app/assets/stylesheets/mobile/directory.scss   |  2 +-
 app/assets/stylesheets/mobile/discourse.scss   |  2 +-
 app/assets/stylesheets/mobile/topic-list.scss  |  4 ++--
 app/assets/stylesheets/mobile/topic-post.scss  |  8 ++++----
 app/assets/stylesheets/mobile/topic.scss       |  2 +-
 app/assets/stylesheets/wizard.scss             |  6 +++---
 29 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 58ee43ef773..6ad6b69dcec 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -51,8 +51,8 @@ $mobile-breakpoint: 700px;
         background-color: lighten($primary, 80%);
       }
 
-      i.fa-chevron-down,
-      i.fa-chevron-up {
+      .d-icon-chevron-down,
+      .d-icon-chevron-up {
         margin-left: 0.5em;
       }
     }
@@ -869,7 +869,7 @@ section.details {
 }
 
 .update-nag {
-  i.fa {
+  .d-icon {
     font-size: 1.429em;
   }
 }
@@ -904,10 +904,10 @@ table.api-keys {
     width: 100%;
 
     .title {
-      i.fa {
+      .d-icon {
         color: $primary;
       }
-      i.fa-heart {
+      .d-icon-heart {
         color: $love;
       }
     }
@@ -1363,10 +1363,10 @@ table.api-keys {
 }
 
 .tl3-requirements {
-  .fa-check {
+  .d-icon-check {
     color: $success;
   }
-  .fa-times {
+  .d-icon-times {
     color: $danger;
   }
 }
@@ -1860,11 +1860,11 @@ table#user-badges {
 .watched-word {
   display: inline-block;
   cursor: pointer;
-  i.fa {
+  .d-icon {
     margin-right: 0.25em;
     color: dark-light-diff($primary, $secondary, 50%, -50%);
   }
-  &:hover i.fa {
+  &:hover .d-icon {
     color: $primary;
   }
 }
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index b550f65b3fb..1ba3bbc507f 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -98,7 +98,7 @@
       li.mobile a {
         padding-right: 25px;
       }
-      .fa-mobile {
+      .d-icon-mobile {
         position: absolute;
         right: 10px;
         top: 3px;
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 6a202efceab..f918da40ee2 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -72,7 +72,7 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-
     color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
     font-weight: normal;
     font-size: 1em;
-    button i.fa {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));}
+    button .d-icon {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));}
 
   }
   td {
@@ -257,7 +257,7 @@ ol.category-breadcrumb {
   }
 }
 
-.fa-thumb-tack.unpinned {
+.d-icon-thumb-tack.unpinned {
   @include fa-icon-rotate(180deg, 1);
   color: $primary;
   /* because it is rotated, right becomes left! */
diff --git a/app/assets/stylesheets/common/base/combobox.scss b/app/assets/stylesheets/common/base/combobox.scss
index e9c2fcda7b4..4c80abc5c6d 100644
--- a/app/assets/stylesheets/common/base/combobox.scss
+++ b/app/assets/stylesheets/common/base/combobox.scss
@@ -25,7 +25,7 @@
 
 .select2-drop {
   background: $secondary;
-  i.fa {
+  .d-icon {
     color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
   }
 }
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index d0079f72346..233519fcc8c 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -10,7 +10,7 @@
     margin: 0;
 
     li {
-      .fa-users {
+      .d-icon-users {
         color: lighten($primary, 40%);
         padding: 0 2px;
       }
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index b0c7ae08983..8a31885b8cb 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -49,11 +49,11 @@
       white-space: nowrap;
 
       width: 13%;
-      i.fa-heart {
+      .d-icon-heart {
         color: $love;
         margin-right: 0.5em;
       }
-      i.fa-chevron-down, i.fa-chevron-up {
+      .d-icon-chevron-down, .d-icon-chevron-up {
         margin-left: 0.5em;
       }
 
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index cfbfbaff504..df240bc38fc 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -140,7 +140,7 @@ body img.emoji {
   display: none;
 }
 
-.emoji-picker .diversity-picker i.fa {
+.emoji-picker .diversity-picker .d-icon {
   color: #fff;
   font-size: 12px;
   text-shadow: 0.5px 1.5px 0 rgba(0,0,0,0.3);
@@ -196,7 +196,7 @@ body img.emoji {
   align-items: center;
 }
 
-.emoji-picker .filter .fa.fa-search {
+.emoji-picker .filter .d-icon-search {
   color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
   font-size: 16px;
   margin-left: 5px;
diff --git a/app/assets/stylesheets/common/base/exception.scss b/app/assets/stylesheets/common/base/exception.scss
index c9a70876513..9bdc0df4bb8 100644
--- a/app/assets/stylesheets/common/base/exception.scss
+++ b/app/assets/stylesheets/common/base/exception.scss
@@ -16,7 +16,7 @@
   }
   .desc {
     margin-top: 16px;
-    .fa-check-circle {
+    .d-icon-check-circle {
       color: $success;
     }
   }
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 4a674e8d1f9..2245734e849 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -26,7 +26,7 @@
       max-height: 40px;
     }
 
-    .fa-home {
+    .d-icon-home {
       font-size: 1.643em;
     }
 
@@ -113,7 +113,8 @@
           }
         }
       }
-      [class^="fa fa-"] {
+
+      .d-icon {
         width: 32px;
         height: 32px;
         font-size: 1.714em;
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index 23a094624fc..0de3abad178 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/app/assets/stylesheets/common/base/history.scss
@@ -80,7 +80,7 @@
     background-color: lighten($highlight, 23%);
     padding: 3px 5px 5px 5px;
   }
-  .fa-ban {
+  .d-icon-ban {
     color: #f00;
   }
   .hidden-revision-either {
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 0e19a8a1175..21e80fb44e6 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@@ -226,7 +226,7 @@
       }
     }
     .is-warning {
-      i.fa-envelope-o {
+      .d-icon-envelope-o {
         &:before {
           content: "\f0e0";
         }
@@ -301,7 +301,7 @@ div.menu-links-header {
   a {
     font-size: 1.1em;
   }
-  .fa-user {
+  .d-icon-user {
     margin-right: 0.2em;
   }
 }
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index c5a6647d07f..0a73791b3e1 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -292,7 +292,7 @@
   .permission {
     margin-left: 20px;
   }
-  .fa-times-circle {
+  .d-icon-times-circle {
     margin-left: 5px;
   }
   li {
diff --git a/app/assets/stylesheets/common/base/rtl.scss b/app/assets/stylesheets/common/base/rtl.scss
index 045df633a6f..71163ef835c 100644
--- a/app/assets/stylesheets/common/base/rtl.scss
+++ b/app/assets/stylesheets/common/base/rtl.scss
@@ -7,7 +7,7 @@
   right: 0 !important;
 }
 
-// This is used to flip the .fa-caret-right icon
+// This is used to flip the .d-icon-caret-right 
 @mixin rotate( $degrees ) {
   -webkit-transform: rotate(#{$degrees}deg);
   -moz-transform: rotate(#{$degrees}deg);
@@ -21,7 +21,7 @@
 }
 
 // Get the right caret to point left
-.rtl .fa-caret-right {
+.rtl .d-icon-caret-right {
   @include rotate(180);
 }
 
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index f26c0623175..be2a28cc3f3 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -207,7 +207,7 @@ header .discourse-tag {color: $tag-color }
 }
 
 .autocomplete {
-  .fa-tag {
+  .d-icon-tag {
    color: dark-light-choose($primary, scale-color($primary, $lightness: 70%));
    padding-right: 5px;
   }
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index ce52e4bb19e..3f34809d20a 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -242,7 +242,7 @@ aside.quote {
 .post-info {
   &.via-email, &.whisper {
     margin-right: 5px;
-    i.fa {
+    .d-icon {
       font-size: 1em;
     }
   }
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 72316b34ad1..70926d68a3e 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -21,7 +21,7 @@
 }
 
 .user-main {
-  i.fa-heart {
+  .d-icon-heart {
     color: $love !important;
   }
   .nav-pills {
@@ -177,10 +177,10 @@
 .user-nav {
   margin: 5px 0px;
   padding-top: 10px;
-  .fa {
+  .d-icon {
     margin-right: 5px;
   }
-  .fa.fa-comment {
+  .d-icon-comment {
     margin-right: 2px;
   }
 }
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index c160fc53538..0dd3a5d3a4d 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@@ -158,7 +158,7 @@
       padding: 5px;
       width: 13px;
 
-      .fa-caret-right {
+      .d-icon-caret-right {
         margin-left: 2px;
         }
       }
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index bce45c1263a..f73c5e3ea09 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -61,10 +61,10 @@
     cursor: not-allowed;
   }
 
-  i.fa {
+  .d-icon {
     opacity: 0.7;
   }
-  &.btn-primary i.fa {
+  &.btn-primary .d-icon {
     opacity: 1;
   }
 }
@@ -194,7 +194,7 @@
   background: transparent;
   border: 0;
   outline: 0;
-  i.fa {
+  .d-icon {
     opacity: 0.7;
   }
 }
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index aac66f0295a..aa120ec8a95 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -96,7 +96,7 @@ body {
       }
   }
 
-  i.fa-envelope {
+  .d-icon-envelope {
     color: $danger;
   }
 }
diff --git a/app/assets/stylesheets/desktop/header.scss b/app/assets/stylesheets/desktop/header.scss
index f4ce15a0222..4c4d3da302a 100644
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@@ -7,7 +7,7 @@
   z-index: 1000;
   padding-top: 3px;
   height: 60px;
-  .fa-home {
+  .d-icon-home {
     padding:8px;
     font-size: 2.1em;
   }
diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
index edd58ce1e0c..de6b1ef496e 100644
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@@ -36,10 +36,10 @@
 
 .topic-list {
   margin: 0 0 10px;
-  .fa-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
-  .fa-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
+  .d-icon-thumb-tack { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
+  .d-icon-thumb-tack.unpinned { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
   a.title {color: $primary;}
-  .fa-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
+  .d-icon-bookmark { color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
   th,
   td {
     padding: 12px 5px;
@@ -51,7 +51,7 @@
     }
   }
   th {
-    button i.fa {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
+    button .d-icon {color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%)); }
   }
 
   > tbody > tr {
@@ -68,7 +68,7 @@
   .star {
     width: 20px;
     padding-right: 0;
-    .fa-star {
+    .d-icon-star {
       position: relative;
     }
     + .main-link {
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index fd0dea67181..5229331141f 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -67,7 +67,7 @@ nav.post-controls {
   a, button {
     color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
 
-    i.fa {
+    .d-icon {
       opacity: 1.0;
     }
     margin-right: 2px;
@@ -207,7 +207,7 @@ nav.post-controls {
       width: 176px;
       margin-bottom: 5px;
 
-      i.fa {
+      .d-icon {
         width: 14px;
         margin-right: 14px;
       }
@@ -261,7 +261,7 @@ nav.post-controls {
   }
 
   .post-date { color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%)); }
-  .fa-arrow-up, .fa-arrow-down { margin-left: 5px; }
+  .d-icon-arrow-up, .d-icon-arrow-down { margin-left: 5px; }
   .reply:first-of-type .row { border-top: none; }
 
   .topic-meta-data {
@@ -385,7 +385,7 @@ a.star {
       font-weight: bold;
       font-size: 0.929em;
     }
-    i.fa-times {
+    .d-icon-times {
       color: dark-light-choose(scale-color($primary, $lightness: 60%), scale-color($secondary, $lightness: 40%));
     }
   }
@@ -446,10 +446,10 @@ a.star {
   .btn {
     margin-bottom: 5px;
     margin-right: 10px;
-    .fa-bookmark.bookmarked { color: $tertiary; }
+    .d-icon-bookmark.bookmarked { color: $tertiary; }
   }
 
-  .bookmark.bookmarked .fa-bookmark {
+  .bookmark.bookmarked .d-icon-bookmark {
     color: $tertiary;
   }
 
@@ -526,7 +526,7 @@ video {
 
   .topic-statuses {
     i { color: $header_primary; }
-    i.fa-envelope { color: $danger; }
+    .d-icon-envelope { color: $danger; }
     .unpinned { color: $header_primary; }
   }
 
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index af7c2da9026..4adbbcd4d0d 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -167,7 +167,7 @@
     text-align: center;
     z-index: 1;
   }
-  i.fa {
+  .d-icon {
     position: absolute;
     right: 8px;
     bottom: 9px;
diff --git a/app/assets/stylesheets/mobile/directory.scss b/app/assets/stylesheets/mobile/directory.scss
index ba1617ea54a..4cd15c89009 100644
--- a/app/assets/stylesheets/mobile/directory.scss
+++ b/app/assets/stylesheets/mobile/directory.scss
@@ -40,7 +40,7 @@
       margin-left: 0.2em;
       color: blend-primary-secondary(50%);
     }
-    i.fa-heart {
+    .d-icon-heart {
       color: $love;
     }
   }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 39162e34a05..18726ee67e6 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -136,7 +136,7 @@ h2#site-text-logo
     box-sizing: border-box;
     display: block;
   }
-  .fa-caret-down {
+  .d-icon-caret-down {
     position: absolute;
     right: 0px;
   }
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 5c1d3e2bddf..7e8c56da2de 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -47,8 +47,8 @@
 
   }
   .nav-pills > li {
-    background: $primary-low; 
-    i.fa-caret-down {
+    background: $primary-low;
+    .d-icon-caret-down {
       margin-left: 8px;
     }
   }
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index b8227b21c1b..4068eb00aee 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -47,7 +47,7 @@ span.badge-posts {
 
 nav.post-controls {
   clear: both;
-  i.fa {
+  .d-icon {
     opacity: 1.0;
   }
 }
@@ -134,7 +134,7 @@ nav.post-controls {
     width: 176px;
     margin-bottom: 5px;
 
-    i.fa {
+    .d-icon {
       width: 14px;
       margin-right: 14px;
     }
@@ -323,7 +323,7 @@ a.star {
 #topic-footer-buttons {
   @include clearfix;
   padding: 20px 0 0 0;
-  .fa-bookmark.bookmarked { color: $tertiary; }
+  .d-icon-bookmark.bookmarked { color: $tertiary; }
 
   .combobox {
     float: left;
@@ -371,7 +371,7 @@ span.post-count {
   .btn {
     margin-bottom: 5px;
     margin-right: 10px;
-    .fa-star {margin-right: 5px;}
+    .d-icon-star {margin-right: 5px;}
   }
 }
 
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 0d719d7f032..f52b3ce0fc8 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -133,7 +133,7 @@
     font-size: 1.286em;
     line-height: 15px;
   }
-  i.fa {
+  .d-icon {
     position: absolute;
     right: 8px;
     bottom: 9px;
diff --git a/app/assets/stylesheets/wizard.scss b/app/assets/stylesheets/wizard.scss
index 245478866a7..922f5afe5db 100644
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@@ -224,11 +224,11 @@ body.wizard {
       background-color: #ccc;
     }
 
-    i.fa-chevron-right {
+    .d-icon-chevron-right {
       margin-left: 0.25em;
       font-size: 0.8em;
     }
-    i.fa-chevron-left {
+    .d-icon-chevron-left {
       margin-right: 0.25em;
       font-size: 0.8em;
     }
@@ -287,7 +287,7 @@ body.wizard {
     .wizard-btn.next {
       min-width: 70px;
 
-      i.fa-chevron-right {
+      .d-icon-chevron-right {
         margin-left: 0.25em;
         font-size: 0.8em;
       }