diff --git a/frontend/src/components/accounts/AssetAccountRole.vue b/frontend/src/components/accounts/AssetAccountRole.vue
index 82eeda859f..7cf2f1de95 100644
--- a/frontend/src/components/accounts/AssetAccountRole.vue
+++ b/frontend/src/components/accounts/AssetAccountRole.vue
@@ -24,7 +24,7 @@
       {{ $t('form.account_role') }}
     </div>
     <div class="input-group" v-if="loading">
-      <i class="fas fa-spinner fa-spin"></i>
+      <span class="fas fa-spinner fa-spin"></span>
     </div>
     <div class="input-group" v-if="!loading">
       <select
diff --git a/frontend/src/components/accounts/Currency.vue b/frontend/src/components/accounts/Currency.vue
index 3c4db591dd..f3f0f18364 100644
--- a/frontend/src/components/accounts/Currency.vue
+++ b/frontend/src/components/accounts/Currency.vue
@@ -24,7 +24,7 @@
       {{ $t('form.currency_id') }}
     </div>
     <div class="input-group" v-if="loading">
-      <i class="fas fa-spinner fa-spin"></i>
+      <span class="fas fa-spinner fa-spin"></span>
     </div>
     <div class="input-group" v-if="!loading">
       <select
diff --git a/frontend/src/components/accounts/Delete.vue b/frontend/src/components/accounts/Delete.vue
index 74370196d4..79e269d0ec 100644
--- a/frontend/src/components/accounts/Delete.vue
+++ b/frontend/src/components/accounts/Delete.vue
@@ -24,7 +24,7 @@
       <div class="card card-default card-danger">
         <div class="card-header">
           <h3 class="card-title">
-            <i class="fas fa-exclamation-triangle"></i>
+            <span class="fas fa-exclamation-triangle"></span>
             {{ $t('firefly.delete_account') }}
           </h3>
         </div>
@@ -57,7 +57,7 @@
           </p>
 
           <p v-if="loading || deleting || deleted" class="text-center">
-            <i class="fas fa-spinner fa-spin"></i>
+            <span class="fas fa-spinner fa-spin"></span>
           </p>
 
         </div>
diff --git a/frontend/src/components/accounts/Index.vue b/frontend/src/components/accounts/Index.vue
index e0ea918a9f..c8bc2c0b17 100644
--- a/frontend/src/components/accounts/Index.vue
+++ b/frontend/src/components/accounts/Index.vue
@@ -105,7 +105,7 @@
                   }}
                 </span>
                 <span v-if="'asset' === type && 'loading' === data.item.balance_diff">
-                  <i class="fas fa-spinner fa-spin"></i>
+                  <span class="fas fa-spinner fa-spin"></span>
                 </span>
                 <span v-if="'asset' === type && 'loading' !== data.item.balance_diff">
                    (<span class="text-success" v-if="parseFloat(data.item.balance_diff) > 0">{{
@@ -137,9 +137,9 @@
                       {{ $t('firefly.actions') }}
                     </button>
                     <div class="dropdown-menu" :aria-labelledby="'dropdownMenuButton' + data.item.id">
-                      <a class="dropdown-item" :href="'./accounts/edit/' + data.item.id"><i class="fa fas fa-pencil-alt"></i> {{ $t('firefly.edit') }}</a>
-                      <a class="dropdown-item" :href="'./accounts/delete/' + data.item.id"><i class="fa far fa-trash"></i> {{ $t('firefly.delete') }}</a>
-                      <a v-if="'asset' === type" class="dropdown-item" :href="'./accounts/reconcile/' + data.item.id + '/index'"><i class="fas fa-check"></i>
+                      <a class="dropdown-item" :href="'./accounts/edit/' + data.item.id"><span class="fa fas fa-pencil-alt"></span> {{ $t('firefly.edit') }}</a>
+                      <a class="dropdown-item" :href="'./accounts/delete/' + data.item.id"><span class="fa far fa-trash"></span> {{ $t('firefly.delete') }}</a>
+                      <a v-if="'asset' === type" class="dropdown-item" :href="'./accounts/reconcile/' + data.item.id + '/index'"><span class="fas fa-check"></span>
                         {{ $t('firefly.reconcile_this_account') }}</a>
                     </div>
                   </div>
diff --git a/frontend/src/components/accounts/Interest.vue b/frontend/src/components/accounts/Interest.vue
index f55900d2e0..2d63db0915 100644
--- a/frontend/src/components/accounts/Interest.vue
+++ b/frontend/src/components/accounts/Interest.vue
@@ -35,7 +35,7 @@
       />
       <div class="input-group-append">
         <div class="input-group-text">%</div>
-        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
+        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
       </div>
     </div>
     <span v-if="errors.length > 0">
diff --git a/frontend/src/components/accounts/InterestPeriod.vue b/frontend/src/components/accounts/InterestPeriod.vue
index 69a3d84b7c..ec3f5e8a63 100644
--- a/frontend/src/components/accounts/InterestPeriod.vue
+++ b/frontend/src/components/accounts/InterestPeriod.vue
@@ -24,7 +24,7 @@
       {{ $t('form.interest_period') }}
     </div>
     <div class="input-group" v-if="loading">
-      <i class="fas fa-spinner fa-spin"></i>
+      <span class="fas fa-spinner fa-spin"></span>
     </div>
     <div class="input-group" v-if="!loading">
       <select
diff --git a/frontend/src/components/accounts/LiabilityAmount.vue b/frontend/src/components/accounts/LiabilityAmount.vue
index fad9345395..3845a94546 100644
--- a/frontend/src/components/accounts/LiabilityAmount.vue
+++ b/frontend/src/components/accounts/LiabilityAmount.vue
@@ -33,7 +33,7 @@
           type="number" step="any" min="0"
       />
       <div class="input-group-append">
-        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
+        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
       </div>
     </div>
     <span v-if="errors.length > 0">
diff --git a/frontend/src/components/accounts/LiabilityDate.vue b/frontend/src/components/accounts/LiabilityDate.vue
index 1ab34045f9..83ff9b645b 100644
--- a/frontend/src/components/accounts/LiabilityDate.vue
+++ b/frontend/src/components/accounts/LiabilityDate.vue
@@ -33,7 +33,7 @@
           type="date"
       />
       <div class="input-group-append">
-        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
+        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
       </div>
     </div>
     <span v-if="errors.length > 0">
diff --git a/frontend/src/components/accounts/LiabilityType.vue b/frontend/src/components/accounts/LiabilityType.vue
index d48d032455..9b9f8620b6 100644
--- a/frontend/src/components/accounts/LiabilityType.vue
+++ b/frontend/src/components/accounts/LiabilityType.vue
@@ -24,7 +24,7 @@
       {{ $t('form.liability_type') }}
     </div>
     <div class="input-group" v-if="loading">
-      <i class="fas fa-spinner fa-spin"></i>
+      <span class="fas fa-spinner fa-spin"></span>
     </div>
     <div class="input-group" v-if="!loading">
       <select
diff --git a/frontend/src/components/dashboard/BudgetListGroup.vue b/frontend/src/components/dashboard/BudgetListGroup.vue
index 93cee3383b..641db20602 100644
--- a/frontend/src/components/dashboard/BudgetListGroup.vue
+++ b/frontend/src/components/dashboard/BudgetListGroup.vue
@@ -40,7 +40,7 @@
       </table>
     </div>
     <div class="card-footer">
-      <a class="btn btn-default button-sm" href="./budgets"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_budgets') }}</a>
+      <a class="btn btn-default button-sm" href="./budgets"><span class="far fa-money-bill-alt"></span> {{ $t('firefly.go_to_budgets') }}</a>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/dashboard/Calendar.vue b/frontend/src/components/dashboard/Calendar.vue
index 6c4c0b163b..d88342e4ef 100644
--- a/frontend/src/components/dashboard/Calendar.vue
+++ b/frontend/src/components/dashboard/Calendar.vue
@@ -41,16 +41,16 @@
               <button
                   :title="$t('firefly.custom_period')" class="btn btn-secondary btn-sm"
                   @click="togglePopover({ placement: 'auto-start', positionFixed: true })"
-              ><i class="fas fa-calendar-alt"></i></button>
+              ><span class="fas fa-calendar-alt"></span></button>
               <button :title="$t('firefly.reset_to_current')"
                       class="btn btn-secondary"
                       @click="resetDate"
-              ><i class="fas fa-history"></i></button>
+              ><span class="fas fa-history"></span></button>
               <button id="dropdownMenuButton" :title="$t('firefly.select_period')" aria-expanded="false" aria-haspopup="true"
                       class="btn btn-secondary dropdown-toggle"
                       data-toggle="dropdown"
                       type="button">
-                <i class="fas fa-list"></i>
+                <span class="fas fa-list"></span>
               </button>
               <div aria-labelledby="dropdownMenuButton" class="dropdown-menu">
                 <a v-for="period in periods" class="dropdown-item" href="#" @click="customDate(period.start, period.end)">{{ period.title }}</a>
diff --git a/frontend/src/components/dashboard/MainAccount.vue b/frontend/src/components/dashboard/MainAccount.vue
index 72dc7aa9a8..39e38f928e 100644
--- a/frontend/src/components/dashboard/MainAccount.vue
+++ b/frontend/src/components/dashboard/MainAccount.vue
@@ -28,14 +28,14 @@
         <canvas id="canvas" ref="canvas" width="400" height="400"></canvas>
       </div>
       <div v-if="loading && !error" class="text-center">
-        <i class="fas fa-spinner fa-spin"></i>
+        <span class="fas fa-spinner fa-spin"></span>
       </div>
       <div v-if="error" class="text-center">
-        <i class="fas fa-exclamation-triangle text-danger"></i>
+        <span class="fas fa-exclamation-triangle text-danger"></span>
       </div>
     </div>
     <div class="card-footer">
-      <a class="btn btn-default button-sm" href="./accounts/asset"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_asset_accounts') }}</a>
+      <a class="btn btn-default button-sm" href="./accounts/asset"><span class="far fa-money-bill-alt"></span> {{ $t('firefly.go_to_asset_accounts') }}</a>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/dashboard/MainAccountList.vue b/frontend/src/components/dashboard/MainAccountList.vue
index afbbf8636d..8c73df0e35 100644
--- a/frontend/src/components/dashboard/MainAccountList.vue
+++ b/frontend/src/components/dashboard/MainAccountList.vue
@@ -26,7 +26,7 @@
         <div class="card">
           <div class="card-body">
             <div class="text-center">
-              <i class="fas fa-spinner fa-spin"></i>
+              <span class="fas fa-spinner fa-spin"></span>
             </div>
           </div>
         </div>
@@ -39,7 +39,7 @@
         <div class="card">
           <div class="card-body">
             <div class="text-center">
-              <i class="fas fa-exclamation-triangle text-danger"></i>
+              <span class="fas fa-exclamation-triangle text-danger"></span>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/dashboard/MainBillsList.vue b/frontend/src/components/dashboard/MainBillsList.vue
index d15566c818..ae43cdf0ff 100644
--- a/frontend/src/components/dashboard/MainBillsList.vue
+++ b/frontend/src/components/dashboard/MainBillsList.vue
@@ -26,13 +26,13 @@
     <!-- body if loading -->
     <div v-if="loading && !error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-spinner fa-spin"></i>
+        <span class="fas fa-spinner fa-spin"></span>
       </div>
     </div>
     <!-- body if error -->
     <div v-if="error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-exclamation-triangle text-danger"></i>
+        <span class="fas fa-exclamation-triangle text-danger"></span>
       </div>
     </div>
     <!-- body if normal -->
@@ -71,7 +71,7 @@
       </table>
     </div>
     <div class="card-footer">
-      <a class="btn btn-default button-sm" href="./bills"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_bills') }}</a>
+      <a class="btn btn-default button-sm" href="./bills"><span class="far fa-money-bill-alt"></span> {{ $t('firefly.go_to_bills') }}</a>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/dashboard/MainBudgetList.vue b/frontend/src/components/dashboard/MainBudgetList.vue
index 0c728f4736..6cb483b909 100644
--- a/frontend/src/components/dashboard/MainBudgetList.vue
+++ b/frontend/src/components/dashboard/MainBudgetList.vue
@@ -56,7 +56,7 @@
         <div class="card">
           <div class="card-body">
             <div class="text-center">
-              <i class="fas fa-spinner fa-spin"></i>
+              <span class="fas fa-spinner fa-spin"></span>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/dashboard/MainCategoryList.vue b/frontend/src/components/dashboard/MainCategoryList.vue
index fdf0ed1109..515cd57c32 100644
--- a/frontend/src/components/dashboard/MainCategoryList.vue
+++ b/frontend/src/components/dashboard/MainCategoryList.vue
@@ -26,13 +26,13 @@
     <!-- body if loading -->
     <div v-if="loading && !error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-spinner fa-spin"></i>
+        <span class="fas fa-spinner fa-spin"></span>
       </div>
     </div>
     <!-- body if error -->
     <div v-if="error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-exclamation-triangle text-danger"></i>
+        <span class="fas fa-exclamation-triangle text-danger"></span>
       </div>
     </div>
     <!-- body if normal -->
diff --git a/frontend/src/components/dashboard/MainCreditList.vue b/frontend/src/components/dashboard/MainCreditList.vue
index 91fe797cfd..3edfe805ad 100644
--- a/frontend/src/components/dashboard/MainCreditList.vue
+++ b/frontend/src/components/dashboard/MainCreditList.vue
@@ -26,13 +26,13 @@
     <!-- body if loading -->
     <div v-if="loading && !error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-spinner fa-spin"></i>
+        <span class="fas fa-spinner fa-spin"></span>
       </div>
     </div>
     <!-- body if error -->
     <div v-if="error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-exclamation-triangle text-danger"></i>
+        <span class="fas fa-exclamation-triangle text-danger"></span>
       </div>
     </div>
     <!-- body if normal -->
@@ -67,7 +67,7 @@
       </table>
     </div>
     <div class="card-footer">
-      <a class="btn btn-default button-sm" href="./transactions/deposit"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_deposits') }}</a>
+      <a class="btn btn-default button-sm" href="./transactions/deposit"><span class="far fa-money-bill-alt"></span> {{ $t('firefly.go_to_deposits') }}</a>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/dashboard/MainDebitList.vue b/frontend/src/components/dashboard/MainDebitList.vue
index ada8c12276..15dcf36f2b 100644
--- a/frontend/src/components/dashboard/MainDebitList.vue
+++ b/frontend/src/components/dashboard/MainDebitList.vue
@@ -26,13 +26,13 @@
     <!-- body if loading -->
     <div v-if="loading && !error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-spinner fa-spin"></i>
+        <span class="fas fa-spinner fa-spin"></span>
       </div>
     </div>
     <!-- body if error -->
     <div v-if="error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-exclamation-triangle text-danger"></i>
+        <span class="fas fa-exclamation-triangle text-danger"></span>
       </div>
     </div>
     <!-- body if normal -->
@@ -67,7 +67,7 @@
       </table>
     </div>
     <div class="card-footer">
-      <a class="btn btn-default button-sm" href="./transactions/withdrawal"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_withdrawals') }}</a>
+      <a class="btn btn-default button-sm" href="./transactions/withdrawal"><span class="far fa-money-bill-alt"></span> {{ $t('firefly.go_to_withdrawals') }}</a>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/dashboard/MainPiggyList.vue b/frontend/src/components/dashboard/MainPiggyList.vue
index 2467bc9a58..092c240de4 100644
--- a/frontend/src/components/dashboard/MainPiggyList.vue
+++ b/frontend/src/components/dashboard/MainPiggyList.vue
@@ -27,13 +27,13 @@
     <!-- body if loading -->
     <div v-if="loading && !error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-spinner fa-spin"></i>
+        <span class="fas fa-spinner fa-spin"></span>
       </div>
     </div>
     <!-- body if error -->
     <div v-if="error" class="card-body">
       <div class="text-center">
-        <i class="fas fa-exclamation-triangle text-danger"></i>
+        <span class="fas fa-exclamation-triangle text-danger"></span>
       </div>
     </div>
     <!-- body if normal -->
@@ -81,7 +81,7 @@
       </table>
     </div>
     <div class="card-footer">
-      <a class="btn btn-default button-sm" href="./piggy-banks"><i class="far fa-money-bill-alt"></i> {{ $t('firefly.go_to_piggies') }}</a>
+      <a class="btn btn-default button-sm" href="./piggy-banks"><span class="far fa-money-bill-alt"></span> {{ $t('firefly.go_to_piggies') }}</a>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/dashboard/TopBoxes.vue b/frontend/src/components/dashboard/TopBoxes.vue
index b1b6a58019..7b3b6c299a 100644
--- a/frontend/src/components/dashboard/TopBoxes.vue
+++ b/frontend/src/components/dashboard/TopBoxes.vue
@@ -26,8 +26,8 @@
 
         <div class="info-box-content">
           <span v-if="!loading && !error" class="info-box-text">{{ $t("firefly.balance") }}</span>
-          <span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
-          <span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
+          <span v-if="loading && !error" class="info-box-text"><span class="fas fa-spinner fa-spin"></span></span>
+          <span v-if="error" class="info-box-text"><span class="fas fa-exclamation-triangle text-danger"></span></span>
           <!-- balance in preferred currency -->
           <span v-for="balance in prefCurrencyBalances" :title="balance.sub_title" class="info-box-number">{{ balance.value_parsed }}</span>
           <span v-if="0 === prefCurrencyBalances.length" class="info-box-number">&nbsp;</span>
@@ -51,8 +51,8 @@
 
         <div class="info-box-content">
           <span v-if="!loading && !error" class="info-box-text">{{ $t('firefly.bills_to_pay') }}</span>
-          <span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
-          <span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
+          <span v-if="loading && !error" class="info-box-text"><span class="fas fa-spinner fa-spin"></span></span>
+          <span v-if="error" class="info-box-text"><span class="fas fa-exclamation-triangle text-danger"></span></span>
           <!-- bills unpaid, in preferred currency. -->
           <span v-for="balance in prefBillsUnpaid" class="info-box-number">{{ balance.value_parsed }}</span>
 
@@ -76,8 +76,8 @@
 
         <div class="info-box-content">
           <span v-if="!loading && !error" class="info-box-text">{{ $t('firefly.left_to_spend') }}</span>
-          <span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
-          <span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
+          <span v-if="loading && !error" class="info-box-text"><span class="fas fa-spinner fa-spin"></span></span>
+          <span v-if="error" class="info-box-text"><span class="fas fa-exclamation-triangle text-danger"></span></span>
           <!-- left to spend in preferred currency -->
           <span v-for="left in prefLeftToSpend" :title="left.sub_title" class="info-box-number">{{ left.value_parsed }}</span>
           <span v-if="0 === prefLeftToSpend.length" class="info-box-number">&nbsp;</span>
@@ -103,8 +103,8 @@
 
         <div class="info-box-content">
           <span v-if="!loading && !error" class="info-box-text">{{ $t('firefly.net_worth') }}</span>
-          <span v-if="loading && !error" class="info-box-text"><i class="fas fa-spinner fa-spin"></i></span>
-          <span v-if="error" class="info-box-text"><i class="fas fa-exclamation-triangle text-danger"></i></span>
+          <span v-if="loading && !error" class="info-box-text"><span class="fas fa-spinner fa-spin"></span></span>
+          <span v-if="error" class="info-box-text"><span class="fas fa-exclamation-triangle text-danger"></span></span>
           <span v-for="nw in prefNetWorth" :title="nw.sub_title" class="info-box-number">{{ nw.value_parsed }}</span>
           <span v-if="0===prefNetWorth.length">&nbsp;</span>
           <div class="progress bg-success">
diff --git a/frontend/src/components/form/GenericTextInput.vue b/frontend/src/components/form/GenericTextInput.vue
index 2368c31b33..f1d3186d1d 100644
--- a/frontend/src/components/form/GenericTextInput.vue
+++ b/frontend/src/components/form/GenericTextInput.vue
@@ -34,7 +34,7 @@
           :step="fieldStep"
       />
       <div class="input-group-append">
-        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
+        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
       </div>
     </div>
     <span v-if="errors.length > 0">
diff --git a/frontend/src/components/partials/Alert.vue b/frontend/src/components/partials/Alert.vue
index 2b851f0194..59fd9e5561 100644
--- a/frontend/src/components/partials/Alert.vue
+++ b/frontend/src/components/partials/Alert.vue
@@ -21,8 +21,8 @@
   <div v-if="message.length > 0" :class="'alert alert-' + type + ' alert-dismissible'">
     <button aria-hidden="true" class="close" data-dismiss="alert" type="button">×</button>
     <h5>
-      <i v-if="'danger' === type" class="icon fas fa-ban"></i>
-      <i v-if="'success' === type" class="icon fas fa-thumbs-up"></i>
+      <span v-if="'danger' === type" class="icon fas fa-ban"></span>
+      <span v-if="'success' === type" class="icon fas fa-thumbs-up"></span>
       <span v-if="'danger' === type">{{ $t("firefly.flash_error") }}</span>
       <span v-if="'success' === type">{{ $t("firefly.flash_success") }}</span>
     </h5>
diff --git a/frontend/src/components/transactions/Create.vue b/frontend/src/components/transactions/Create.vue
index a2bd27cc3f..ccf954acbd 100644
--- a/frontend/src/components/transactions/Create.vue
+++ b/frontend/src/components/transactions/Create.vue
@@ -69,7 +69,7 @@
                   <div class="text-xs d-none d-lg-block d-xl-block">
                     &nbsp;
                   </div>
-                  <button type="button" class="btn btn-outline-primary btn-block" @click="addTransactionArray"><i class="far fa-clone"></i> {{
+                  <button type="button" class="btn btn-outline-primary btn-block" @click="addTransactionArray"><span class="far fa-clone"></span> {{
                       $t('firefly.add_another_split')
                     }}
                   </button>
@@ -79,8 +79,8 @@
                     &nbsp;
                   </div>
                   <button :disabled="!enableSubmit" class="btn btn-success btn-block" @click="submitTransaction">
-                    <span v-if="enableSubmit"><i class="far fa-save"></i> {{ $t('firefly.store_transaction') }}</span>
-                    <span v-if="!enableSubmit"><i class="fas fa-spinner fa-spin"></i></span>
+                    <span v-if="enableSubmit"><span class="far fa-save"></span> {{ $t('firefly.store_transaction') }}</span>
+                    <span v-if="!enableSubmit"><span class="fas fa-spinner fa-spin"></span></span>
                   </button>
                 </div>
               </div>
diff --git a/frontend/src/components/transactions/Edit.vue b/frontend/src/components/transactions/Edit.vue
index d720b0ea1a..1048aa1963 100644
--- a/frontend/src/components/transactions/Edit.vue
+++ b/frontend/src/components/transactions/Edit.vue
@@ -79,7 +79,7 @@
                   <div class="text-xs d-none d-lg-block d-xl-block">
                     &nbsp;
                   </div>
-                  <button type="button" class="btn btn-outline-primary btn-block" @click="addTransaction"><i class="far fa-clone"></i>
+                  <button type="button" class="btn btn-outline-primary btn-block" @click="addTransaction"><span class="far fa-clone"></span>
                     {{ $t('firefly.add_another_split') }}
                   </button>
                 </div>
@@ -88,8 +88,8 @@
                     &nbsp;
                   </div>
                   <button :disabled="!enableSubmit" class="btn btn-info btn-block" @click="submitTransaction">
-                    <span v-if="enableSubmit"><i class="far fa-save"></i> {{ $t('firefly.update_transaction') }}</span>
-                    <span v-if="!enableSubmit"><i class="fas fa-spinner fa-spin"></i></span>
+                    <span v-if="enableSubmit"><span class="far fa-save"></span> {{ $t('firefly.update_transaction') }}</span>
+                    <span v-if="!enableSubmit"><span class="fas fa-spinner fa-spin"></span></span>
                   </button>
                 </div>
               </div>
diff --git a/frontend/src/components/transactions/SplitForm.vue b/frontend/src/components/transactions/SplitForm.vue
index 64ba777d3a..99f6eed30a 100644
--- a/frontend/src/components/transactions/SplitForm.vue
+++ b/frontend/src/components/transactions/SplitForm.vue
@@ -29,7 +29,7 @@
               <span v-if="count > 1">({{ index + 1 }} / {{ count }}) </span>
             </h3>
             <div v-if="count>1" class="card-tools">
-              <button type="button" class="btn btn-danger btn-xs" @click="removeTransaction"><i class="fas fa-trash-alt"></i></button>
+              <button type="button" class="btn btn-danger btn-xs" @click="removeTransaction"><span class="fas fa-trash-alt"></span></button>
             </div>
           </div>
 
diff --git a/frontend/src/components/transactions/TransactionAccount.vue b/frontend/src/components/transactions/TransactionAccount.vue
index 9654084ab5..0fd5799550 100644
--- a/frontend/src/components/transactions/TransactionAccount.vue
+++ b/frontend/src/components/transactions/TransactionAccount.vue
@@ -50,7 +50,7 @@
       </template>
       <template slot="append">
         <div class="input-group-append">
-          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearAccount"><i class="far fa-trash-alt"></i></button>
+          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearAccount"><span class="far fa-trash-alt"></span></button>
         </div>
       </template>
     </vue-typeahead-bootstrap>
diff --git a/frontend/src/components/transactions/TransactionCategory.vue b/frontend/src/components/transactions/TransactionCategory.vue
index 5e7a567c23..d80cfcc870 100644
--- a/frontend/src/components/transactions/TransactionCategory.vue
+++ b/frontend/src/components/transactions/TransactionCategory.vue
@@ -38,7 +38,7 @@
     >
       <template slot="append">
         <div class="input-group-append">
-          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearCategory"><i class="far fa-trash-alt"></i></button>
+          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearCategory"><span class="far fa-trash-alt"></span></button>
         </div>
       </template>
     </vue-typeahead-bootstrap>
diff --git a/frontend/src/components/transactions/TransactionDescription.vue b/frontend/src/components/transactions/TransactionDescription.vue
index 6143f1279f..b81e140d9b 100644
--- a/frontend/src/components/transactions/TransactionDescription.vue
+++ b/frontend/src/components/transactions/TransactionDescription.vue
@@ -34,7 +34,7 @@
     >
       <template slot="append">
         <div class="input-group-append">
-          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearDescription"><i class="far fa-trash-alt"></i></button>
+          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearDescription"><span class="far fa-trash-alt"></span></button>
         </div>
       </template>
     </vue-typeahead-bootstrap>
diff --git a/frontend/src/components/transactions/TransactionExternalUrl.vue b/frontend/src/components/transactions/TransactionExternalUrl.vue
index df722e3fc7..2aa1ecb22d 100644
--- a/frontend/src/components/transactions/TransactionExternalUrl.vue
+++ b/frontend/src/components/transactions/TransactionExternalUrl.vue
@@ -32,7 +32,7 @@
           type="url"
       />
       <div class="input-group-append">
-        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
+        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/transactions/TransactionGroupTitle.vue b/frontend/src/components/transactions/TransactionGroupTitle.vue
index 9bffdbad48..ce08f862e6 100644
--- a/frontend/src/components/transactions/TransactionGroupTitle.vue
+++ b/frontend/src/components/transactions/TransactionGroupTitle.vue
@@ -36,7 +36,7 @@
     >
       <template slot="append">
         <div class="input-group-append">
-          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearDescription"><i class="far fa-trash-alt"></i></button>
+          <button class="btn btn-outline-secondary" tabindex="-1" type="button" v-on:click="clearDescription"><span class="far fa-trash-alt"></span></button>
         </div>
       </template>
     </vue-typeahead-bootstrap>
diff --git a/frontend/src/components/transactions/TransactionInternalReference.vue b/frontend/src/components/transactions/TransactionInternalReference.vue
index a06a28ffa1..0652fd82c7 100644
--- a/frontend/src/components/transactions/TransactionInternalReference.vue
+++ b/frontend/src/components/transactions/TransactionInternalReference.vue
@@ -32,7 +32,7 @@
           type="text"
       />
       <div class="input-group-append">
-        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><i class="far fa-trash-alt"></i></button>
+        <button class="btn btn-outline-secondary" tabindex="-1" type="button"><span class="far fa-trash-alt"></span></button>
       </div>
     </div>
   </div>
diff --git a/frontend/src/components/transactions/TransactionLinks.vue b/frontend/src/components/transactions/TransactionLinks.vue
index 9f45b2b331..9ad37419f2 100644
--- a/frontend/src/components/transactions/TransactionLinks.vue
+++ b/frontend/src/components/transactions/TransactionLinks.vue
@@ -27,7 +27,7 @@
       <div class="row">
         <div class="col">
           <p v-if="links.length === 0">
-            <button type="button" class="btn btn-default btn-xs" data-target="#linkModal" @click="resetModal" data-toggle="modal"><i class="fas fa-plus"></i> Add transaction link</button>
+            <button type="button" class="btn btn-default btn-xs" data-target="#linkModal" @click="resetModal" data-toggle="modal"><span class="fas fa-plus"></span> Add transaction link</button>
           </p>
           <ul v-if="links.length > 0" class="list-group">
             <li v-for="(transaction, index) in links" class="list-group-item" v-bind:key="index">
@@ -59,12 +59,12 @@
                 }}</span>)
                         </span>
               <div class="btn-group btn-group-xs float-right">
-                <button type="button" class="btn btn-xs btn-danger" @click="removeLink(index)" tabindex="-1"><i class="far fa-trash-alt"></i></button>
+                <button type="button" class="btn btn-xs btn-danger" @click="removeLink(index)" tabindex="-1"><span class="far fa-trash-alt"></span></button>
               </div>
             </li>
           </ul>
           <div v-if="links.length > 0" class="form-text">
-            <button type="button" class="btn btn-default" @click="resetModal" data-target="#linkModal" data-toggle="modal"><i class="fas fa-plus"></i></button>
+            <button type="button" class="btn btn-default" @click="resetModal" data-target="#linkModal" data-toggle="modal"><span class="fas fa-plus"></span></button>
           </div>
         </div>
       </div>
@@ -96,7 +96,7 @@
                       <input id="query" v-model="query" autocomplete="off" class="form-control" maxlength="255" name="search"
                              placeholder="Search query" type="text">
                       <div class="input-group-append">
-                        <button class="btn btn-default" type="submit"><i class="fas fa-search"></i> Search</button>
+                        <button class="btn btn-default" type="submit"><span class="fas fa-search"></span> Search</button>
                       </div>
                     </div>
                   </form>
@@ -104,7 +104,7 @@
               </div>
               <div class="row">
                 <div class="col">
-                  <span v-if="searching"><i class="fas fa-spinner fa-spin"></i></span>
+                  <span v-if="searching"><span class="fas fa-spinner fa-spin"></span></span>
                   <h4 v-if="searchResults.length > 0">{{ $t('firefly.search_results') }}</h4>
                   <table v-if="searchResults.length > 0" class="table table-sm">
                     <caption style="display:none;">{{ $t('firefly.search_results') }}</caption>
diff --git a/resources/views/v1/pagination/semantic-ui.blade.php b/resources/views/v1/pagination/semantic-ui.blade.php
index ef0dbb184c..8d7f8249d6 100644
--- a/resources/views/v1/pagination/semantic-ui.blade.php
+++ b/resources/views/v1/pagination/semantic-ui.blade.php
@@ -2,9 +2,9 @@
     <div class="ui pagination menu" role="navigation">
         {{-- Previous Page Link --}}
         @if ($paginator->onFirstPage())
-            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <span class="left chevron icon"></span> </a>
         @else
-            <a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
+            <a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')"> <span class="left chevron icon"></span> </a>
         @endif
 
         {{-- Pagination Elements --}}
@@ -28,9 +28,9 @@
 
         {{-- Next Page Link --}}
         @if ($paginator->hasMorePages())
-            <a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
+            <a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')"> <span class="right chevron icon"></span> </a>
         @else
-            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <span class="right chevron icon"></span> </a>
         @endif
     </div>
 @endif