From 38142182774ea772aacc88f26586512d6279267f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 19:38:49 +0300
Subject: [PATCH 01/19] Some initial work on replacing icons with FA5

---
 package.json                                  |   4 +
 src/App.scss                                  |   9 +-
 src/components/emoji_input/emoji_input.js     |   9 +
 src/components/emoji_input/emoji_input.vue    |   2 +-
 src/components/emoji_picker/emoji_picker.js   |  16 +-
 src/components/emoji_picker/emoji_picker.scss |   2 +-
 src/components/emoji_picker/emoji_picker.vue  |   4 +-
 src/components/extra_buttons/extra_buttons.js |   4 +
 .../extra_buttons/extra_buttons.vue           |   6 +-
 .../favorite_button/favorite_button.js        |  14 +-
 .../favorite_button/favorite_button.vue       |  33 ++--
 src/components/media_upload/media_upload.js   |   8 +
 src/components/media_upload/media_upload.vue  |  10 +-
 src/components/nav_panel/nav_panel.js         |  23 +++
 src/components/nav_panel/nav_panel.vue        | 160 +++++++++---------
 src/components/poll/poll_form.js              |  12 ++
 src/components/poll/poll_form.vue             |  16 +-
 .../post_status_form/post_status_form.js      |  17 ++
 .../post_status_form/post_status_form.vue     |  31 ++--
 src/components/react_button/react_button.js   |   4 +
 src/components/react_button/react_button.vue  |   6 +-
 src/components/reply_button/reply_button.js   |   4 +
 src/components/reply_button/reply_button.vue  |  28 ++-
 .../retweet_button/retweet_button.js          |   8 +-
 .../retweet_button/retweet_button.vue         |  48 ++++--
 .../scope_selector/scope_selector.js          |  15 ++
 .../scope_selector/scope_selector.vue         |  50 +++---
 src/components/status/status.js               |  49 +++++-
 src/components/status/status.scss             |  26 +--
 src/components/status/status.vue              |  70 ++++----
 src/components/timeline_menu/timeline_menu.js |  18 ++
 .../timeline_menu/timeline_menu.vue           |  32 ++--
 src/main.js                                   |   4 +
 yarn.lock                                     |  31 ++++
 34 files changed, 528 insertions(+), 245 deletions(-)

diff --git a/package.json b/package.json
index 75d9ee56..6bc285c8 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,10 @@
   "dependencies": {
     "@babel/runtime": "^7.7.6",
     "@chenfengyuan/vue-qrcode": "^1.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^2.0.0",
     "body-scroll-lock": "^2.6.4",
     "chromatism": "^3.0.0",
     "cropperjs": "^1.4.3",
diff --git a/src/App.scss b/src/App.scss
index e1e1bdd0..d34698e2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -318,7 +318,7 @@ option {
   }
 }
 
-i[class*=icon-] {
+i[class*=icon-], .svg-inline--fa  {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon);
 }
@@ -808,7 +808,12 @@ nav {
 }
 
 .button-icon {
-  font-size: 1.2em;
+  &i,
+  &.svg-inline--fa.fa-lg {
+    display: inline-block;
+    padding: 0 0.3em;
+    font-size: 1.1em;
+  }
 }
 
 @keyframes shakeError {
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index f0123447..87303d08 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -3,6 +3,15 @@ import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import { take } from 'lodash'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSmileBeam
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faSmileBeam
+)
+
 /**
  * EmojiInput - augmented inputs for emoji and autocomplete support in inputs
  * without having to give up the comfort of <input/> and <textarea/> elements
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index b9a74572..224e72cf 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -11,7 +11,7 @@
         class="emoji-picker-icon"
         @click.prevent="togglePicker"
       >
-        <i class="icon-smile" />
+        <FAIcon :icon="['far', 'smile-beam']" />
       </div>
       <EmojiPicker
         v-if="enableEmojiPicker"
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 3ad80df3..b1671566 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,4 +1,16 @@
 import Checkbox from '../checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUnderline,
+  faStickyNote,
+  faSmileBeam
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUnderline,
+  faStickyNote,
+  faSmileBeam
+)
 
 // At widest, approximately 20 emoji are visible in a row,
 // loading 3 rows, could be overkill for narrow picker
@@ -177,13 +189,13 @@ const EmojiPicker = {
         {
           id: 'custom',
           text: this.$t('emoji.custom'),
-          icon: 'icon-smile',
+          icon: 'smile-beam',
           emojis: customEmojis
         },
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'icon-picture',
+          icon: 'underline',
           emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       ]
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 8bd07e45..ec711758 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -82,7 +82,7 @@
       &.active {
         border-bottom: 4px solid;
 
-        i {
+        svg {
           color: $fallback--lightText;
           color: var(--lightText, $fallback--lightText);
         }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 191b9fa1..bd093c99 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,7 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
-          <i :class="group.icon" />
+          <FAIcon :icon="group.icon" fixed-width/>
         </span>
       </span>
       <span
@@ -26,7 +26,7 @@
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"
         >
-          <i class="icon-star" />
+          <FAIcon icon="sticky-note" fixed-width/>
         </span>
       </span>
     </div>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 5e0c36bb..6892dabc 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,4 +1,8 @@
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faEllipsisH)
 
 const ExtraButtons = {
   props: [ 'status' ],
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 7a4e8642..0af264a5 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -73,9 +73,11 @@
         </button>
       </div>
     </div>
-    <i
+    <FAIcon
       slot="trigger"
-      class="icon-ellipsis button-icon"
+      class="button-icon"
+      icon="ellipsis-h"
+      size="lg"
     />
   </Popover>
 </template>
diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js
index 5014d84f..2a2ee84a 100644
--- a/src/components/favorite_button/favorite_button.js
+++ b/src/components/favorite_button/favorite_button.js
@@ -1,4 +1,14 @@
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faStar } from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar as faStarRegular
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faStar,
+  faStarRegular
+)
 
 const FavoriteButton = {
   props: ['status', 'loggedIn'],
@@ -23,9 +33,7 @@ const FavoriteButton = {
   computed: {
     classes () {
       return {
-        'icon-star-empty': !this.status.favorited,
-        'icon-star': this.status.favorited,
-        'animate-spin': this.animated
+        '-favorited': this.status.favorited
       }
     },
     ...mapGetters(['mergedConfig'])
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index fbc90f84..6c7bfdab 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,18 +1,23 @@
 <template>
   <div v-if="loggedIn">
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon favorite-button fav-active"
+      class="FavoriteButton button-icon -interactive"
       :title="$t('tool_tip.favorite')"
+      :icon="[status.favorited ? 'fas' : 'far', 'star']"
+      :spin="animated"
+      size="lg"
       @click.prevent="favorite()"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
   <div v-else>
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon favorite-button"
+      class="FavoriteButton button-icon"
       :title="$t('tool_tip.favorite')"
+      :icon="['far', 'star']"
+      size="lg"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
@@ -23,18 +28,20 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.fav-active {
-  cursor: pointer;
-  animation-duration: 0.6s;
+.FavoriteButton {
+  &.-interactive {
+    cursor: pointer;
+    animation-duration: 0.6s;
 
-  &:hover {
+    &:hover {
+      color: $fallback--cOrange;
+      color: var(--cOrange, $fallback--cOrange);
+    }
+  }
+
+  &.-favorited {
     color: $fallback--cOrange;
     color: var(--cOrange, $fallback--cOrange);
   }
 }
-
-.favorite-button.icon-star {
-  color: $fallback--cOrange;
-  color: var(--cOrange, $fallback--cOrange);
-}
 </style>
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 7b8a76cc..669d8190 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -2,6 +2,14 @@
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faUpload, faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUpload,
+  faCircleNotch
+)
+
 const mediaUpload = {
   data () {
     return {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index c8865d77..38e00702 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -7,13 +7,15 @@
       class="label"
       :title="$t('tool_tip.media_upload')"
     >
-      <i
+      <FAIcon
         v-if="uploading"
-        class="progress-icon icon-spin4 animate-spin"
+        class="progress-icon animate-spin"
+        icon="circle-notch"
       />
-      <i
+      <FAIcon
         v-if="!uploading"
-        class="new-icon icon-upload"
+        class="new-icon"
+        icon="upload"
       />
       <input
         v-if="uploadReady"
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 623dfaec..87e54133 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,6 +1,29 @@
 import { timelineNames } from '../timeline_menu/timeline_menu.js'
 import { mapState, mapGetters } from 'vuex'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faComments,
+  faBell,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faComments,
+  faBell,
+  faInfoCircle
+)
+
 const NavPanel = {
   created () {
     if (this.currentUser && this.currentUser.locked) {
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 4f944c95..f3e131ff 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nav-panel">
+  <div class="NavPanel">
     <div class="panel panel-default">
       <ul>
         <li v-if="currentUser || !privateMode">
@@ -7,12 +7,14 @@
             :to="{ name: timelinesRoute }"
             :class="onTimelineRoute && 'router-link-active'"
           >
-            <i class="button-icon icon-home-2" />{{ $t("nav.timelines") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="home" />
+            {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" />{{ $t("nav.interactions") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="bell" />
+            {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
@@ -23,12 +25,14 @@
             >
               {{ unreadChatCount }}
             </div>
-            <i class="button-icon icon-chat" />{{ $t("nav.chats") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="comments" />
+            {{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            <i class="button-icon icon-user-plus" />{{ $t("nav.friend_requests") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="user-plus" />
+            {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -39,7 +43,7 @@
         </li>
         <li>
           <router-link :to="{ name: 'about' }">
-            <i class="button-icon icon-info-circled" />{{ $t("nav.about") }}
+            <FAIcon fixed-width size="lg" class="button-icon" icon="info-circle" />{{ $t("nav.about") }}
           </router-link>
         </li>
       </ul>
@@ -52,84 +56,88 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.nav-panel .panel {
-  overflow: hidden;
-  box-shadow: var(--panelShadow);
-}
-.nav-panel ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.follow-request-count {
-  margin: -6px 10px;
-  background-color: $fallback--bg;
-  background-color: var(--input, $fallback--faint);
-}
-
-.nav-panel li {
-  border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-  padding: 0;
-
-  &:first-child a {
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+.NavPanel {
+  .panel {
+    overflow: hidden;
+    box-shadow: var(--panelShadow);
   }
 
-  &:last-child a {
-    border-bottom-right-radius: $fallback--panelRadius;
-    border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-    border-bottom-left-radius: $fallback--panelRadius;
-    border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-}
-
-.nav-panel li:last-child {
-  border: none;
-}
-
-.nav-panel a {
-  display: block;
-  padding: 0.8em 0.85em;
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
-  &.router-link-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
+  .follow-request-count {
+    margin: -6px 10px;
+    background-color: $fallback--bg;
+    background-color: var(--input, $fallback--faint);
+  }
 
-    &:hover {
-      text-decoration: underline;
+  li {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    padding: 0;
+
+    &:first-child a {
+      border-top-right-radius: $fallback--panelRadius;
+      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-top-left-radius: $fallback--panelRadius;
+      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    }
+
+    &:last-child a {
+      border-bottom-right-radius: $fallback--panelRadius;
+      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
+      border-bottom-left-radius: $fallback--panelRadius;
+      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
     }
   }
-}
 
-.nav-panel .button-icon {
-  margin-right: 0.5em;
-}
+  li:last-child {
+    border: none;
+  }
 
-.nav-panel .button-icon:before {
-  width: 1.1em;
+  a {
+    display: block;
+    padding: 0.8em 0.85em;
+
+    &:hover {
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuText, $fallback--link);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+    }
+
+    &.router-link-active {
+      font-weight: bolder;
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--text;
+      color: var(--selectedMenuText, $fallback--text);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuLightText, $fallback--lightText);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .button-icon {
+    margin-left: -0.1em;
+    margin-right: 0.2em;
+  }
+
+  .button-icon:before {
+    width: 1.1em;
+  }
 }
 </style>
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index df93f038..1f8df3f9 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,5 +1,17 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faChevronDown,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faChevronDown,
+  faPlus
+)
 
 export default {
   name: 'PollForm',
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index d53f3837..3a8a2f42 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -24,8 +24,8 @@
         v-if="options.length > 2"
         class="icon-container"
       >
-        <i
-          class="icon-cancel"
+        <FAIcon
+          icon="times"
           @click="deleteOption(index)"
         />
       </div>
@@ -35,7 +35,8 @@
       class="add-option faint"
       @click="addOption"
     >
-      <i class="icon-plus" />
+      <FAIcon icon="plus" size="sm"/>
+
       {{ $t("polls.add_option") }}
     </a>
     <div class="poll-type-expiry">
@@ -55,7 +56,7 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon class="icon-down-open" icon="chevron-down"/>
         </label>
       </div>
       <div
@@ -83,7 +84,7 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon class="icon-down-open" icon="chevron-down"/>
         </label>
       </div>
     </div>
@@ -103,6 +104,7 @@
   .add-option {
     align-self: flex-start;
     padding-top: 0.25em;
+    padding-left: 0.1em;
     cursor: pointer;
   }
 
@@ -124,8 +126,8 @@
 
   .icon-container {
     // Hack: Move the icon over the input box
-    width: 2em;
-    margin-left: -2em;
+    width: 1.5em;
+    margin-left: -1.5em;
     z-index: 1;
   }
 
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index ad149506..1267225d 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -12,6 +12,23 @@ import suggestor from '../emoji_input/suggestor.js'
 import { mapGetters, mapState } from 'vuex'
 import Checkbox from '../checkbox/checkbox.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown,
+  faSmileBeam,
+  faPollH,
+  faUpload,
+  faBan
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown,
+  faSmileBeam,
+  faPollH,
+  faUpload,
+  faBan
+)
+
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
   let allAttentions = [...attentions]
 
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d67d9ae9..9a5be689 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -12,10 +12,11 @@
         v-show="showDropIcon !== 'hide'"
         :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
         class="drop-indicator"
-        :class="[uploadFileLimitReached ? 'icon-block' : 'icon-upload']"
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
-      />
+      >
+        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'"/>
+      </div>
       <div class="form-group">
         <i18n
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
@@ -198,7 +199,7 @@
                   {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down"/>
             </label>
           </div>
           <div
@@ -235,22 +236,22 @@
           <div
             class="emoji-icon"
           >
-            <i
+            <div
               :title="$t('emoji.add_emoji')"
-              class="icon-smile btn btn-default"
+              class="btn btn-default"
               @click="showEmojiPicker"
-            />
+            >
+              <FAIcon icon="smile-beam"/>
+            </div>
           </div>
           <div
             v-if="pollsAvailable"
             class="poll-icon"
             :class="{ selected: pollFormVisible }"
+            :title="$t('polls.add_poll')"
+            @click="togglePollForm"
           >
-            <i
-              :title="$t('polls.add_poll')"
-              class="icon-chart-bar btn btn-default"
-              @click="togglePollForm"
-            />
+            <FAIcon icon="poll-h" />
           </div>
         </div>
         <button
@@ -392,7 +393,7 @@
     &:hover {
       text-decoration: underline;
     }
-    i {
+    svg, i {
       margin-left: 0.2em;
       font-size: 0.8em;
       transform: rotate(90deg);
@@ -434,18 +435,20 @@
 
   .media-upload-icon, .poll-icon, .emoji-icon {
     font-size: 26px;
+    line-height: 1.1;
     flex: 1;
+    padding: 0 0.1em;
 
     &.selected, &:hover {
       // needs to be specific to override icon default color
-      i, label {
+      svg, i, label {
         color: $fallback--lightText;
         color: var(--lightText, $fallback--lightText);
       }
     }
 
     &.disabled {
-      i {
+      svg, i {
         cursor: not-allowed;
         color: $fallback--icon;
         color: var(--btnDisabledText, $fallback--icon);
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index dd71e546..de0df70c 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,4 +1,8 @@
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
+
+library.add(faSmileBeam)
 
 const ReactButton = {
   props: ['status'],
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 0b34add1..8395d5e3 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -36,9 +36,11 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <i
+    <FAIcon
       slot="trigger"
-      class="icon-smile button-icon add-reaction-button"
+      class="button-icon add-reaction-button"
+      :icon="['far', 'smile-beam']"
+      size="lg"
       :title="$t('tool_tip.add_reaction')"
     />
   </Popover>
diff --git a/src/components/reply_button/reply_button.js b/src/components/reply_button/reply_button.js
index 22957650..c7bd2a2b 100644
--- a/src/components/reply_button/reply_button.js
+++ b/src/components/reply_button/reply_button.js
@@ -1,3 +1,7 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faReply } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faReply)
 
 const ReplyButton = {
   name: 'ReplyButton',
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index b2904b5c..ae7b0e26 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -1,15 +1,19 @@
 <template>
   <div>
-    <i
+    <FAIcon
       v-if="loggedIn"
-      class="button-icon button-reply icon-reply"
+      class="ReplyButton button-icon -interactive"
+      icon="reply"
+      size="lg"
       :title="$t('tool_tip.reply')"
       :class="{'-active': replying}"
       @click.prevent="$emit('toggle')"
     />
-    <i
+    <FAIcon
       v-else
-      class="button-icon button-reply -disabled icon-reply"
+      icon="reply"
+      size="lg"
+      class="ReplyButton button-icon"
       :title="$t('tool_tip.reply')"
     />
     <span v-if="status.replies_count > 0">
@@ -19,3 +23,19 @@
 </template>
 
 <script src="./reply_button.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.ReplyButton {
+  &.-interactive {
+    cursor: pointer;
+
+    &:hover,
+    &.-active {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+  }
+}
+</style>
diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 5a41f22d..5ee4179a 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,3 +1,7 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faRetweet } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faRetweet)
 
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
@@ -22,9 +26,7 @@ const RetweetButton = {
   computed: {
     classes () {
       return {
-        'retweeted': this.status.repeated,
-        'retweeted-empty': !this.status.repeated,
-        'animate-spin': this.animated
+        '-repeated': this.status.repeated
       }
     },
     mergedConfig () {
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 074f7747..3e15f30b 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,26 +1,33 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-      <i
-        :class="classes"
-        class="button-icon retweet-button icon-retweet rt-active"
-        :title="$t('tool_tip.repeat')"
-        @click.prevent="retweet()"
-      />
+    <FAIcon
+      :class="classes"
+      class="RetweetButton button-icon -interactive"
+      icon="retweet"
+      size="lg"
+      :spin="animated"
+      :title="$t('tool_tip.repeat')"
+      @click.prevent="retweet()"
+    />
       <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
     </template>
     <template v-else>
-      <i
+      <FAIcon
         :class="classes"
-        class="button-icon icon-lock"
+        class="RetweetButton button-icon"
+        icon="lock"
+        size="lg"
         :title="$t('timeline.no_retweet_hint')"
       />
     </template>
   </div>
   <div v-else-if="!loggedIn">
-    <i
+    <FAIcon
       :class="classes"
-      class="button-icon icon-retweet"
+      class="button-icon"
+      icon="retweet"
+      size="lg"
       :title="$t('tool_tip.repeat')"
     />
     <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
@@ -31,16 +38,21 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-.rt-active {
-  cursor: pointer;
-  animation-duration: 0.6s;
-  &:hover {
+
+.RetweetButton {
+  &.-interactive {
+    cursor: pointer;
+    animation-duration: 0.6s;
+
+    &:hover {
+      color: $fallback--cGreen;
+      color: var(--cGreen, $fallback--cGreen);
+    }
+  }
+
+  &.-repeated {
     color: $fallback--cGreen;
     color: var(--cGreen, $fallback--cGreen);
   }
 }
-.icon-retweet.retweeted {
-  color: $fallback--cGreen;
-  color: var(--cGreen, $fallback--cGreen);
-}
 </style>
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index e9ccdefc..34efdc00 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -1,3 +1,18 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEnvelope,
+  faLock,
+  faLockOpen,
+  faGlobeEurope
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEnvelope,
+  faGlobeEurope,
+  faLock,
+  faLockOpen
+)
+
 const ScopeSelector = {
   props: [
     'showAll',
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 291236f2..5b9abd64 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -1,36 +1,44 @@
 <template>
   <div
     v-if="!showNothing"
-    class="scope-selector"
-  >
-    <i
+    class="ScopeSelector"
+    >
+    <span
       v-if="showDirect"
-      class="icon-mail-alt"
+      class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
-    />
-    <i
+      >
+      <FAIcon icon="envelope" class="button-icon" size="lg" />
+    </span>
+    <span
+      class="scope"
       v-if="showPrivate"
-      class="icon-lock"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-    />
-    <i
+      >
+      <FAIcon icon="lock" class="button-icon" size="lg" />
+    </span>
+    <span
       v-if="showUnlisted"
-      class="icon-lock-open-alt"
+      class="scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
-    />
-    <i
+      >
+      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+    </span>
+    <span
       v-if="showPublic"
-      class="icon-globe"
+      class="scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
-    />
+      >
+      <FAIcon icon="globe-europe" class="button-icon" size="lg" />
+    </span>
   </div>
 </template>
 
@@ -39,12 +47,16 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.scope-selector {
-  i {
-    font-size: 1.2em;
-    cursor: pointer;
+.ScopeSelector {
 
-    &.selected {
+  .scope {
+    display: inline-block;
+    cursor: pointer;
+    min-width: 1.3em;
+    min-height: 1.3em;
+    text-align: center;
+
+    &.selected svg {
       color: $fallback--lightText;
       color: var(--lightText, $fallback--lightText);
     }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index e48b2eb8..f7a0ff83 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -17,6 +17,47 @@ import { highlightClass, highlightStyle } from '../../services/user_highlighter/
 import { muteWordHits } from '../../services/status_parser/status_parser.js'
 import { unescape, uniqBy } from 'lodash'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEnvelope,
+  faLock,
+  faLockOpen,
+  faGlobeEurope,
+  faTimes,
+  faRetweet,
+  faReply,
+  faExternalLinkSquareAlt,
+  faPlusSquare,
+  faSmileBeam,
+  faEllipsisH,
+  faStar,
+  faEyeSlash,
+  faEye,
+  faThumbtack
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar as faStarRegular
+} from '@fortawesome/free-regular-svg-icons'
+
+library.add(
+  faEnvelope,
+  faGlobeEurope,
+  faLock,
+  faLockOpen,
+  faTimes,
+  faRetweet,
+  faReply,
+  faExternalLinkSquareAlt,
+  faPlusSquare,
+  faStar,
+  faStarRegular,
+  faSmileBeam,
+  faEllipsisH,
+  faEyeSlash,
+  faEye,
+  faThumbtack
+)
+
 const Status = {
   name: 'Status',
   components: {
@@ -227,13 +268,13 @@ const Status = {
     visibilityIcon (visibility) {
       switch (visibility) {
         case 'private':
-          return 'icon-lock'
+          return 'lock'
         case 'unlisted':
-          return 'icon-lock-open-alt'
+          return 'lock-open'
         case 'direct':
-          return 'icon-mail-alt'
+          return 'envelope'
         default:
-          return 'icon-globe'
+          return 'globe-europe'
       }
     },
     showError (error) {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 66a91c1e..cd5366ed 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -200,7 +200,6 @@ $status-margin: 0.75em;
   }
 
   .reply-to {
-    display: flex;
     position: relative;
   }
 
@@ -208,7 +207,6 @@ $status-margin: 0.75em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    margin-left: 0.2em;
   }
 
   .replies-separator {
@@ -232,16 +230,10 @@ $status-margin: 0.75em;
 
   .repeat-info {
     padding: 0.4em $status-margin;
-    line-height: 22px;
 
-    .right-side {
-      display: flex;
-      align-content: center;
-      flex-wrap: wrap;
-    }
-
-    i {
-      padding: 0 0.2em;
+    .repeat-icon {
+      color: $fallback--cGreen;
+      color: var(--cGreen, $fallback--cGreen);
     }
   }
 
@@ -291,18 +283,6 @@ $status-margin: 0.75em;
     }
   }
 
-  .button-reply {
-    &:not(.-disabled) {
-      cursor: pointer;
-    }
-
-    &:not(.-disabled):hover,
-    &.-active {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-  }
-
   .muted {
     padding: 0.25em 0.6em;
     height: 1.2em;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ffae32fc..b9b967cc 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -10,17 +10,20 @@
       class="alert error"
     >
       {{ error }}
-      <i
-        class="button-icon icon-cancel"
+      <span
+        class="button-icon"
         @click="clearError"
-      />
+        >
+        <FAIcon icon="times" />
+      </span>
     </div>
     <template v-if="muted && !isPreview">
       <div class="status-container muted">
         <small class="status-username">
-          <i
+          <FAIcon
             v-if="muted && retweet"
-            class="button-icon icon-retweet"
+            class="button-icon repeat-icon"
+            icon="retweet"
           />
           <router-link :to="userProfileLink">
             {{ status.user.screen_name }}
@@ -46,9 +49,11 @@
         </small>
         <a
           href="#"
-          class="unmute"
+          class="unmute button-icon"
           @click.prevent="toggleMute"
-        ><i class="button-icon icon-eye-off" /></a>
+          >
+          <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+        </a>
       </div>
     </template>
     <template v-else>
@@ -56,7 +61,7 @@
         v-if="showPinned"
         class="pin"
       >
-        <i class="fa icon-pin faint" />
+        <FAIcon icon="thumbtack" class="faint" />
         <span class="faint">{{ $t('status.pinned') }}</span>
       </div>
       <div
@@ -86,8 +91,9 @@
               :to="retweeterProfileLink"
             >{{ retweeter }}</router-link>
           </span>
-          <i
-            class="fa icon-retweet retweeted"
+          <FAIcon
+            icon="retweet"
+            class="repeat-icon"
             :title="$t('tool_tip.repeat')"
           />
           {{ $t('timeline.repeated') }}
@@ -167,15 +173,13 @@
                     :auto-update="60"
                   />
                 </router-link>
-                <div
+                <span
                   v-if="status.visibility"
-                  class="button-icon visibility-icon"
-                >
-                  <i
-                    :class="visibilityIcon(status.visibility)"
-                    :title="status.visibility | capitalize"
-                  />
-                </div>
+                  class="visibility-icon"
+                  :title="status.visibility | capitalize"
+                  >
+                  <FAIcon class="button-icon" :icon="visibilityIcon(status.visibility)" size="lg" />
+                </span>
                 <a
                   v-if="!status.is_local && !isPreview"
                   :href="status.external_url"
@@ -183,22 +187,23 @@
                   class="source_url"
                   title="Source"
                 >
-                  <i class="button-icon icon-link-ext-alt" />
+                  <FAIcon class="button-icon" icon="external-link-square-alt" size="lg" />
+                </a>
+                <a
+                  v-if="expandable && !isPreview"
+                  href="#"
+                  title="Expand"
+                  @click.prevent="toggleExpanded"
+                >
+                  <FAIcon class="button-icon" icon="plus-square" size="lg" />
                 </a>
-                <template v-if="expandable && !isPreview">
-                  <a
-                    href="#"
-                    title="Expand"
-                    @click.prevent="toggleExpanded"
-                  >
-                    <i class="button-icon icon-plus-squared" />
-                  </a>
-                </template>
                 <a
                   v-if="unmuted"
                   href="#"
                   @click.prevent="toggleMute"
-                ><i class="button-icon icon-eye-off" /></a>
+                >
+                  <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+                </a>
               </span>
             </div>
 
@@ -220,7 +225,12 @@
                     :aria-label="$t('tool_tip.reply')"
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
-                    <i class="button-icon reply-button icon-reply" />
+                    <FAIcon
+                      class="button-icon"
+                      icon="reply"
+                      size="lg"
+                      flip="horizontal"
+                      />
                     <span
                       class="faint-link reply-to-text"
                     >
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 2be75b06..991c600d 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -1,5 +1,23 @@
 import Popover from '../popover/popover.vue'
 import { mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUsers,
+  faGlobeEurope,
+  faBookmark,
+  faEnvelope,
+  faHome,
+  faChevronDown
+)
 
 // Route -> i18n key mapping, exported andnot in the computed
 // because nav panel benefits from the same information.
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index b7e5f2da..590752d3 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -1,7 +1,7 @@
 <template>
   <Popover
     trigger="click"
-    class="timeline-menu"
+    class="TimelineMenu"
     :class="{ 'open': isOpen }"
     :margin="{ left: -15, right: -200 }"
     :bound-to="{ x: 'container' }"
@@ -16,27 +16,27 @@
       <ul>
         <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
-            <i class="button-icon icon-home-2" />{{ $t("nav.timeline") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="home" />{{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'bookmarks'}">
-            <i class="button-icon icon-bookmark" />{{ $t("nav.bookmarks") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="bookmark" />{{ $t("nav.bookmarks") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-mail-alt" />{{ $t("nav.dms") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="envelope" />{{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'public-timeline' }">
-            <i class="button-icon icon-users" />{{ $t("nav.public_tl") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="users" />{{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <i class="button-icon icon-globe" />{{ $t("nav.twkn") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="globe-europe" />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
@@ -46,7 +46,7 @@
       class="title timeline-menu-title"
     >
       <span>{{ timelineName() }}</span>
-      <i class="icon-down-open" />
+      <FAIcon size="sm" icon="chevron-down" />
     </div>
   </Popover>
 </template>
@@ -56,17 +56,19 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline-menu {
+.TimelineMenu {
   flex-shrink: 1;
   margin-right: auto;
   min-width: 0;
   width: 24rem;
+
   .timeline-menu-popover-wrap {
     overflow: hidden;
     // Match panel heading padding to line up menu with bottom of heading
     margin-top: 0.6rem;
     padding: 0 15px 15px 15px;
   }
+
   .timeline-menu-popover {
     width: 24rem;
     max-width: 100vw;
@@ -77,10 +79,12 @@
     transform: translateY(-100%);
     transition: transform 100ms;
   }
+
   .panel::after {
     border-top-right-radius: 0;
     border-top-left-radius: 0;
   }
+
   &.open .timeline-menu-popover {
     transform: translateY(0);
   }
@@ -88,7 +92,6 @@
   .timeline-menu-title {
     margin: 0;
     cursor: pointer;
-    display: flex;
     user-select: none;
     width: 100%;
 
@@ -98,15 +101,13 @@
       white-space: nowrap;
     }
 
-    i {
+    svg {
       margin-left: 0.6em;
-      flex-shrink: 0;
-      font-size: 1rem;
       transition: transform 100ms;
     }
   }
 
-  &.open .timeline-menu-title i {
+  &.open .timeline-menu-title svg {
     color: $fallback--text;
     color: var(--panelText, $fallback--text);
     transform: rotate(180deg);
@@ -171,8 +172,9 @@
       }
     }
 
-    i {
-      margin-right: 0.5em;
+    svg {
+      margin-right: 0.4em;
+      margin-left: -0.2em;
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 0a898022..42b6bcb2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,6 +33,8 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
 import afterStoreSetup from './boot/after_store.js'
 
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
@@ -45,6 +47,8 @@ Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
 
+Vue.component('FAIcon', FontAwesomeIcon)
+
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
   locale: 'en',
diff --git a/yarn.lock b/yarn.lock
index 14be84a6..e7ba92e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -884,6 +884,37 @@
   dependencies:
     qrcode "^1.3.0"
 
+"@fortawesome/fontawesome-common-types@^0.2.32":
+  version "0.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz#3436795d5684f22742989bfa08f46f50f516f259"
+  integrity sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w==
+
+"@fortawesome/fontawesome-svg-core@^1.2.32":
+  version "1.2.32"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz#da092bfc7266aa274be8604de610d7115f9ba6cf"
+  integrity sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
+"@fortawesome/free-regular-svg-icons@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.1.tgz#a8897d0ce325352dbba0e943101323e0175ee2b2"
+  integrity sha512-eD9NWFy89e7SVVtrLedJUxIpCBGhd4x7s7dhesokjyo1Tw62daqN5UcuAGu1NrepLLq1IeAYUVfWwnOjZ/j3HA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
+"@fortawesome/free-solid-svg-icons@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz#e1432676ddd43108b41197fee9f86d910ad458ef"
+  integrity sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.32"
+
+"@fortawesome/vue-fontawesome@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.0.tgz#63da3e459147cebb0a8d58eed81d6071db9f5973"
+  integrity sha512-N3VKw7KzRfOm8hShUVldpinlm13HpvLBQgT63QS+aCrIRLwjoEUXY5Rcmttbfb6HkzZaeqjLqd/aZCQ53UjQpg==
+
 "@nodelib/fs.scandir@2.1.3":
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"

From 8b3a7ae8c0fec5f79971745f64aeb3c5ac470894 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Oct 2020 22:35:46 +0300
Subject: [PATCH 02/19] more FA5 stuff with small related refactoring

---
 src/App.scss                                  | 10 +++---
 src/components/chat_panel/chat_panel.js       |  6 ++++
 src/components/chat_panel/chat_panel.vue      |  2 +-
 src/components/exporter/exporter.js           |  7 ++++
 src/components/exporter/exporter.vue          |  4 +--
 src/components/extra_buttons/extra_buttons.js | 20 ++++++++++--
 .../extra_buttons/extra_buttons.vue           | 32 ++++++++++---------
 src/components/media_upload/media_upload.vue  |  3 +-
 src/components/notification/notification.js   | 22 +++++++++++++
 src/components/notification/notification.scss | 32 +++++++++++++++++++
 src/components/notification/notification.vue  | 32 ++++++++++---------
 src/components/notifications/notifications.js |  6 ++++
 .../notifications/notifications.scss          | 31 ------------------
 .../notifications/notifications.vue           |  2 +-
 .../panel_loading/panel_loading.vue           | 14 ++++++--
 src/components/popover/popover.vue            |  6 ++--
 .../scope_selector/scope_selector.js          |  4 +--
 .../scope_selector/scope_selector.vue         |  2 +-
 src/components/search/search.js               |  6 ++++
 src/components/search/search.vue              |  2 +-
 src/components/status/status.js               | 10 ++----
 .../status_popover/status_popover.js          |  6 ++++
 .../status_popover/status_popover.vue         |  2 +-
 src/components/timeline/timeline.js           |  6 ++++
 src/components/timeline/timeline.vue          |  2 +-
 src/components/user_card/user_card.js         | 16 ++++++++++
 src/components/user_card/user_card.vue        | 26 ++++++++++-----
 .../user_list_popover/user_list_popover.js    |  6 ++++
 .../user_list_popover/user_list_popover.vue   |  2 +-
 src/main.js                                   |  3 +-
 30 files changed, 221 insertions(+), 101 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d34698e2..10969abb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -106,7 +106,8 @@ button {
     color: var(--btnPressedText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnPressed, $fallback--fg);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnPressedText, $fallback--text);
     }
@@ -118,7 +119,8 @@ button {
     color: var(--btnDisabledText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnDisabled, $fallback--fg);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnDisabledText, $fallback--text);
     }
@@ -131,7 +133,8 @@ button {
     background-color: var(--btnToggled, $fallback--fg);
     box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
-    i {
+
+    svg, i {
       color: $fallback--text;
       color: var(--btnToggledText, $fallback--text);
     }
@@ -808,7 +811,6 @@ nav {
 }
 
 .button-icon {
-  &i,
   &.svg-inline--fa.fa-lg {
     display: inline-block;
     padding: 0 0.3em;
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index f2e3adf0..3dfec6df 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,4 +1,10 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faBullhorn
+)
 
 const chatPanel = {
   props: [ 'floating' ],
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 570435e7..b64535b0 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -63,7 +63,7 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <i class="icon-megaphone" />
+          <FAIcon icon="bullhorn" />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js
index 8f507416..51912ac3 100644
--- a/src/components/exporter/exporter.js
+++ b/src/components/exporter/exporter.js
@@ -1,3 +1,10 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const Exporter = {
   props: {
     getContent: {
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index f5126dc1..156db9a3 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="exporter">
     <div v-if="processing">
-      <i class="icon-spin4 animate-spin exporter-processing" />
+      <FAIcon icon="circle-notch" size="lg" spin />
+
       <span>{{ processingMessage }}</span>
     </div>
     <button
@@ -19,7 +20,6 @@
 <style lang="scss">
 .exporter {
   &-processing {
-    font-size: 1.5em;
     margin: 0.25em;
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 6892dabc..f325b2b4 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,8 +1,24 @@
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
+import {
+  faEllipsisH,
+  faBookmark,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faBookmark as faBookmarkReg,
+} from '@fortawesome/free-regular-svg-icons'
 
-library.add(faEllipsisH)
+library.add(
+  faEllipsisH,
+  faBookmark,
+  faBookmarkReg,
+  faEyeSlash,
+  faThumbtack,
+  faShareAlt
+)
 
 const ExtraButtons = {
   props: [ 'status' ],
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 0af264a5..1889eaed 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -15,14 +15,14 @@
           class="dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
-          <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
         </button>
         <button
           v-if="canMute && status.thread_muted"
           class="dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
-          <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
         </button>
         <button
           v-if="!status.pinned && canPin"
@@ -30,7 +30,7 @@
           @click.prevent="pinStatus"
           @click="close"
         >
-          <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
@@ -38,7 +38,7 @@
           @click.prevent="unpinStatus"
           @click="close"
         >
-          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
         </button>
         <button
           v-if="!status.bookmarked"
@@ -46,7 +46,7 @@
           @click.prevent="bookmarkStatus"
           @click="close"
         >
-          <i class="icon-bookmark-empty" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
         </button>
         <button
           v-if="status.bookmarked"
@@ -54,7 +54,7 @@
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
-          <i class="icon-bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
         </button>
         <button
           v-if="canDelete"
@@ -62,23 +62,24 @@
           @click.prevent="deleteStatus"
           @click="close"
         >
-          <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
           class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
-          <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
         </button>
       </div>
     </div>
-    <FAIcon
-      slot="trigger"
-      class="button-icon"
-      icon="ellipsis-h"
-      size="lg"
-    />
+    <span slot="trigger">
+      <FAIcon
+        class="ExtraButtons button-icon"
+        icon="ellipsis-h"
+        size="md"
+      />
+    </span>
   </Popover>
 </template>
 
@@ -87,8 +88,9 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.icon-ellipsis {
+.ExtraButtons {
   cursor: pointer;
+  position: static;
 
   &:hover,
   .extra-button-popover.open & {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 38e00702..15b2b8e4 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -9,8 +9,9 @@
     >
       <FAIcon
         v-if="uploading"
-        class="progress-icon animate-spin"
+        class="progress-icon"
         icon="circle-notch"
+        spin
       />
       <FAIcon
         v-if="!uploading"
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index bb906b50..4aa9affd 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -7,6 +7,28 @@ import Timeago from '../timeago/timeago.vue'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faEyeSlash,
+  faUser,
+  faSuitcaseRolling
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCheck,
+  faTimes,
+  faStar,
+  faRetweet,
+  faUserPlus,
+  faUser,
+  faEyeSlash,
+  faSuitcaseRolling
+)
 
 const Notification = {
   data () {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index d0e63d81..f5905560 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,3 +1,5 @@
+@import '../../_variables.scss';
+
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   &.-muted {
@@ -49,4 +51,34 @@
       display: block;
     }
   }
+
+  .type-icon {
+    margin: 0 0.1em;
+  }
+
+  &.-type--repeat .type-icon {
+    color: $fallback--cGreen;
+    color: var(--cGreen, $fallback--cGreen);
+  }
+
+  &.-type--follow .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--follow-request .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+
+  &.-type--like .type-icon {
+    color: orange;
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+
+  &.-type--move .type-icon {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 7fac3840..857727a4 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,5 +1,5 @@
 <template>
-  <status
+  <Status
     v-if="notification.type === 'mention'"
     :compact="true"
     :statusoid="notification.status"
@@ -18,12 +18,12 @@
         href="#"
         class="unmute"
         @click.prevent="toggleMute"
-      ><i class="button-icon icon-eye-off" /></a>
+      ><FAIcon class="button-icon" icon="eye-slash" /></a>
     </div>
     <div
       v-else
-      class="non-mention"
-      :class="[userClass, { highlighted: userStyle }]"
+      class="Notification non-mention"
+      :class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
       :style="[ userStyle ]"
     >
       <a
@@ -60,26 +60,26 @@
               :title="'@'+notification.from_profile.screen_name"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
-              <i class="fa icon-star lit" />
+              <FAIcon class="type-icon" icon="star" />
               <small>{{ $t('notifications.favorited_you') }}</small>
             </span>
             <span v-if="notification.type === 'repeat'">
-              <i
-                class="fa icon-retweet lit"
+              <FAIcon
+                class="type-icon" icon="retweet"
                 :title="$t('tool_tip.repeat')"
               />
               <small>{{ $t('notifications.repeated_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow'">
-              <i class="fa icon-user-plus lit" />
+              <FAIcon class="type-icon" icon="user-plus" />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow_request'">
-              <i class="fa icon-user lit" />
+              <FAIcon class="type-icon" icon="user" />
               <small>{{ $t('notifications.follow_request') }}</small>
             </span>
             <span v-if="notification.type === 'move'">
-              <i class="fa icon-arrow-curved lit" />
+              <FAIcon class="type-icon" icon="suitcase-rolling" />
               <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
             <span v-if="notification.type === 'pleroma:emoji_reaction'">
@@ -120,7 +120,7 @@
             v-if="needMute"
             href="#"
             @click.prevent="toggleMute"
-          ><i class="button-icon icon-eye-off" /></a>
+          ><FAIcon class="button-icon" icon="eye-slash" /></a>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
@@ -136,13 +136,15 @@
             v-if="notification.type === 'follow_request'"
             style="white-space: nowrap;"
           >
-            <i
-              class="icon-ok button-icon follow-request-accept"
+            <FAIcon
+              icon="check"
+              class="button-icon follow-request-accept"
               :title="$t('tool_tip.accept_follow_request')"
               @click="approveUser()"
             />
-            <i
-              class="icon-cancel button-icon follow-request-reject"
+            <FAIcon
+              icon="times"
+              class="button-icon follow-request-reject"
               :title="$t('tool_tip.reject_follow_request')"
               @click="denyUser()"
             />
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d951e2a8..4b479e13 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -6,6 +6,12 @@ import {
   filteredNotificationsFromStore,
   unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
 
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index c6b2a5b5..682ae127 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -158,37 +158,6 @@
       margin-right: .2em;
     }
 
-    .icon-retweet.lit {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
-    }
-
-    .icon-user.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-user-plus.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-reply.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
-    .icon-star.lit {
-      color: orange;
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
-    }
-
-    .icon-arrow-curved.lit {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
-    }
-
     .status-content {
       margin: 0;
       max-height: 300px;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d477a41b..57972854 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -61,7 +61,7 @@
           v-else
           class="new-status-notification text-center panel-footer"
         >
-          <i class="icon-spin3 animate-spin" />
+          <FAIcon icon="circle-notch" spin size="lg"/>
         </div>
       </div>
     </div>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 4efebb3c..9bf3ab32 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,12 +1,21 @@
 <template>
   <div class="panel-loading">
     <span class="loading-text">
-      <i class="icon-spin4 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="3x"/>
       {{ $t('general.loading') }}
     </span>
   </div>
 </template>
 
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+</script>
+
 <style lang="scss">
 @import 'src/_variables.scss';
 
@@ -18,8 +27,7 @@
   font-size: 2em;
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  .loading-text i {
-    font-size: 3em;
+  .loading-text svg {
     line-height: 0;
     vertical-align: middle;
     color: $fallback--text;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 5c99c509..9b8680e5 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -27,7 +27,7 @@
 
 <script src="./popover.js" />
 
-<style lang=scss>
+<style lang="scss">
 @import '../../_variables.scss';
 
 .popover {
@@ -96,7 +96,7 @@
     &-icon {
       padding-left: 0.5rem;
 
-      i {
+      svg {
         margin-right: 0.25rem;
         color: var(--menuPopoverIcon, $fallback--icon)
       }
@@ -111,7 +111,7 @@
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      i {
+      svg {
         color: var(--selectedMenuPopoverIcon, $fallback--icon);
       }
     }
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 34efdc00..ddb20ff2 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faGlobeEurope
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -10,7 +10,7 @@ library.add(
   faEnvelope,
   faGlobeEurope,
   faLock,
-  faLockOpen
+  faUnlock
 )
 
 const ScopeSelector = {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 5b9abd64..ddd89422 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -28,7 +28,7 @@
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
       >
-      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+      <FAIcon icon="unlock" class="button-icon" size="lg" />
     </span>
     <span
       v-if="showPublic"
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 8e903052..3eb92fc1 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -2,6 +2,12 @@ import FollowCard from '../follow_card/follow_card.vue'
 import Conversation from '../conversation/conversation.vue'
 import Status from '../status/status.vue'
 import map from 'lodash/map'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const Search = {
   components: {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 746bbaa2..a6677e4b 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -24,7 +24,7 @@
       v-if="loading"
       class="text-center loading-icon"
     >
-      <i class="icon-spin3 animate-spin" />
+      <FAIcon icon="circle-notch" spin size="lg"/>
     </div>
     <div v-else-if="loaded">
       <div class="search-nav-heading">
diff --git a/src/components/status/status.js b/src/components/status/status.js
index f7a0ff83..5b93054f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faGlobeEurope,
   faTimes,
   faRetweet,
@@ -35,22 +35,18 @@ import {
   faEye,
   faThumbtack
 } from '@fortawesome/free-solid-svg-icons'
-import {
-  faStar as faStarRegular
-} from '@fortawesome/free-regular-svg-icons'
 
 library.add(
   faEnvelope,
   faGlobeEurope,
   faLock,
-  faLockOpen,
+  faUnlock,
   faTimes,
   faRetweet,
   faReply,
   faExternalLinkSquareAlt,
   faPlusSquare,
   faStar,
-  faStarRegular,
   faSmileBeam,
   faEllipsisH,
   faEyeSlash,
@@ -270,7 +266,7 @@ const Status = {
         case 'private':
           return 'lock'
         case 'unlisted':
-          return 'lock-open'
+          return 'unlock'
         case 'direct':
           return 'envelope'
         default:
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 51e7680c..c47f5631 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -1,4 +1,10 @@
 import { find } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const StatusPopover = {
   name: 'StatusPopover',
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 162eb210..f6432687 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -27,7 +27,7 @@
         v-else
         class="status-preview-no-content"
       >
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="2x"/>
       </div>
     </div>
   </Popover>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 17680542..a443340f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -3,6 +3,12 @@ import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.se
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 import { throttle, keyBy } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
   const ids = []
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c1e2f44b..ab17cbbc 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -92,7 +92,7 @@
         v-else
         class="new-status-notification text-center panel-footer"
       >
-        <i class="icon-spin3 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="lg"/>
       </div>
     </div>
   </div>
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 8e6b9d7f..3a8efafc 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -6,6 +6,22 @@ import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faBell,
+  faRss,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faRss,
+  faBell,
+  faChevronDown,
+  faSearchPlus,
+  faExternalLinkAlt
+)
 
 export default {
   props: [
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 041bb80f..cfdeaa17 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -21,7 +21,7 @@
               :user="user"
             />
             <div class="user-info-avatar-link-overlay">
-              <i class="button-icon icon-zoom-in" />
+              <FAIcon class="button-icon" icon="search-plus" size="lg" />
             </div>
           </a>
           <router-link
@@ -55,7 +55,7 @@
                 :href="user.statusnet_profile_url"
                 target="_blank"
               >
-                <i class="icon-link-ext usersettings" />
+                <FAIcon class="usersettings" icon="external-link-alt" />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -85,7 +85,9 @@
                   bot
                 </span>
               </template>
-              <span v-if="user.locked"><i class="icon icon-lock" /></span>
+              <span v-if="user.locked">
+               <FAIcon class="lock-icon" icon="lock" size="sm"/>
+              </span>
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
                 class="dailyAvg"
@@ -133,7 +135,7 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </div>
@@ -150,7 +152,7 @@
                 :click="subscribeUser"
                 :title="$t('user_card.subscribe')"
               >
-                <i class="icon-bell-alt" />
+                <FAIcon icon="bell" />
               </ProgressButton>
               <ProgressButton
                 v-else
@@ -158,7 +160,11 @@
                 :click="unsubscribeUser"
                 :title="$t('user_card.unsubscribe')"
               >
-                <i class="icon-bell-ringing-o" />
+                <FALayers>
+                  <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
+                  <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
+                  <FAIcon icon="bell" />
+                </FALayers>
               </ProgressButton>
             </template>
           </div>
@@ -388,7 +394,7 @@
       opacity: 0;
       transition: opacity .2s ease;
 
-      i {
+      svg {
         color: #FFF;
       }
     }
@@ -447,6 +453,10 @@
     font-weight: light;
     font-size: 15px;
 
+    .lock-icon {
+      margin-left: 0.5em;
+    }
+
     .user-screen-name {
       min-width: 1px;
       flex: 0 1 auto;
@@ -508,7 +518,7 @@
         padding-bottom: 0;
         flex: 1 0 auto;
       }
-      .userHighlightSel.select i {
+      .userHighlightSel.select svg {
         line-height: 22px;
       }
 
diff --git a/src/components/user_list_popover/user_list_popover.js b/src/components/user_list_popover/user_list_popover.js
index b60f2c4c..32ca2b8d 100644
--- a/src/components/user_list_popover/user_list_popover.js
+++ b/src/components/user_list_popover/user_list_popover.js
@@ -1,3 +1,9 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const UserListPopover = {
   name: 'UserListPopover',
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 185c73ca..dd6977d2 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -31,7 +31,7 @@
         </div>
       </div>
       <div v-else>
-        <i class="icon-spin4 animate-spin" />
+        <FAIcon icon="circle-notch" spin size="3x"/>
       </div>
     </div>
   </Popover>
diff --git a/src/main.js b/src/main.js
index 42b6bcb2..90ee2887 100644
--- a/src/main.js
+++ b/src/main.js
@@ -33,7 +33,7 @@ import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
 
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -48,6 +48,7 @@ Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
 
 Vue.component('FAIcon', FontAwesomeIcon)
+Vue.component('FALayers', FontAwesomeLayers)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary

From e8650d3409aa34a0195629d2077bad68bcade439 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 21:03:46 +0300
Subject: [PATCH 03/19] chevrons-downs, settings

---
 src/components/chat/chat.js                   |  8 ++++++
 src/components/chat/chat.vue                  |  5 ++--
 .../contrast_ratio/contrast_ratio.vue         | 26 ++++++++++++++-----
 src/components/font_control/font_control.js   |  8 ++++++
 src/components/font_control/font_control.vue  |  2 +-
 .../interface_language_switcher.vue           | 10 ++++++-
 .../settings_modal/tabs/filtering_tab.js      |  8 ++++++
 .../settings_modal/tabs/filtering_tab.vue     |  2 +-
 .../settings_modal/tabs/general_tab.js        |  8 ++++++
 .../settings_modal/tabs/general_tab.vue       |  4 +--
 .../tabs/theme_tab/theme_tab.js               |  8 ++++++
 .../tabs/theme_tab/theme_tab.vue              |  4 +--
 .../shadow_control/shadow_control.js          | 14 ++++++++++
 .../shadow_control/shadow_control.vue         | 10 +++----
 14 files changed, 97 insertions(+), 20 deletions(-)

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 34e723d0..1630ba80 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -7,6 +7,14 @@ import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 2e4538c8..0d44c920 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -58,14 +58,15 @@
               :class="{ 'visible': jumpToBottomButtonVisible }"
               @click="scrollDown({ behavior: 'smooth' })"
             >
-              <i class="icon-down-open">
+              <span>
+                <FAIcon icon="chevron-down" />
                 <div
                   v-if="newMessageCount"
                   class="badge badge-notification unread-chat-count unread-message-count"
                 >
                   {{ newMessageCount }}
                 </div>
-              </i>
+              </span>
             </div>
             <PostStatusForm
               :disable-subject="true"
diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 9dc871b6..374cb9ba 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -8,13 +8,13 @@
       class="rating"
     >
       <span v-if="contrast.aaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.aaa && contrast.aa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.aaa && !contrast.aa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
     </span>
     <span
@@ -23,19 +23,32 @@
       :title="hint_18pt"
     >
       <span v-if="contrast.laaa">
-        <i class="icon-thumbs-up-alt" />
+        <FAIcon icon="thumbs-up" />
       </span>
       <span v-if="!contrast.laaa && contrast.laa">
-        <i class="icon-adjust" />
+        <FAIcon icon="adjust" />
       </span>
       <span v-if="!contrast.laaa && !contrast.laa">
-        <i class="icon-attention" />
+        <FAIcon icon="exclamation-triangle" />
       </span>
     </span>
   </span>
 </template>
 
 <script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faAdjust,
+  faExclamationTriangle,
+  faThumbsUp
+)
+
 export default {
   props: {
     large: {
@@ -85,6 +98,7 @@ export default {
   .rating {
     display: inline-block;
     text-align: center;
+    margin-left: 0.5em;
   }
 }
 </style>
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 8e2b0e45..6274780b 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,4 +1,12 @@
 import { set } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 export default {
   props: [
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 61f0384b..40aed190 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,7 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <i class="icon-down-open" />
+      <FAIcon class="icon-down-open" icon="chevron-down" />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index dd6800a3..2a3d4cbb 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,7 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <i class="icon-down-open" />
+      <FAIcon class="icon-down-open" icon="chevron-down" />
     </label>
   </div>
 </template>
@@ -28,6 +28,14 @@
 import languagesObject from '../../i18n/messages'
 import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 export default {
   computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 3b2df556..5f38a5ae 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const FilteringTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index eea41514..786f3618 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,7 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon class="icon-down-open" icon="chevron-down" />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0eb37e44..a39d7071 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -2,6 +2,14 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 const GeneralTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 13482de7..9fc1470e 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,7 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </li>
@@ -127,7 +127,7 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <i class="icon-down-open" />
+              <FAIcon class="icon-down-open" icon="chevron-down" />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index e3c5e80a..6cf75fe7 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import Preview from './preview.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown
+)
 
 // List of color values used in v1
 const v1OnlyNames = [
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 5328c350..fb8b16ae 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,7 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <i class="icon-down-open" />
+                <FAIcon class="icon-down-open" icon="chevron-down" />
               </label>
             </div>
           </template>
@@ -907,7 +907,7 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <i class="icon-down-open" />
+                <FAIcon class="icon-down-open" icon="chevron-down" />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index f9e7b985..800c39d5 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -2,6 +2,20 @@ import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faChevronDown,
+  faChevronUp,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronDown,
+  faChevronUp,
+  faTimes,
+  faPlus
+)
 
 const toModel = (object = {}) => ({
   x: 0,
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 815a9e59..1f63f3f2 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,35 +78,35 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon icon="chevron-down" class="icon-down-open" />
         </label>
         <button
           class="btn btn-default"
           :disabled="!ready || !present"
           @click="del"
         >
-          <i class="icon-cancel" />
+          <FAIcon fixed-width icon="times" />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveUpValid"
           @click="moveUp"
         >
-          <i class="icon-up-open" />
+          <FAIcon fixed-width icon="chevron-up" />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveDnValid"
           @click="moveDn"
         >
-          <i class="icon-down-open" />
+          <FAIcon fixed-width icon="chevron-down" />
         </button>
         <button
           class="btn btn-default"
           :disabled="usingFallback"
           @click="add"
         >
-          <i class="icon-plus" />
+          <FAIcon fixed-width icon="plus" />
         </button>
       </div>
       <div

From 046c60cb61bd585e2fb2850320d229ab0487d9ba Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 21:18:23 +0300
Subject: [PATCH 04/19] cancel -> times

---
 src/components/chat_message/chat_message.js         |  8 ++++++++
 src/components/chat_message/chat_message.vue        |  2 +-
 src/components/chat_panel/chat_panel.js             |  8 ++++++--
 src/components/chat_panel/chat_panel.vue            |  2 +-
 .../global_notice_list/global_notice_list.js        |  8 ++++++++
 .../global_notice_list/global_notice_list.vue       |  2 +-
 src/components/image_cropper/image_cropper.js       |  8 ++++++++
 src/components/image_cropper/image_cropper.vue      |  4 ++--
 src/components/login_form/login_form.js             |  8 ++++++++
 src/components/login_form/login_form.vue            |  2 +-
 src/components/mfa_form/recovery_form.js            |  8 ++++++++
 src/components/mfa_form/recovery_form.vue           |  2 +-
 src/components/mfa_form/totp_form.js                |  9 +++++++++
 src/components/mfa_form/totp_form.vue               |  2 +-
 src/components/mobile_nav/mobile_nav.js             |  8 ++++++++
 src/components/mobile_nav/mobile_nav.vue            |  2 +-
 src/components/password_reset/password_reset.js     |  8 ++++++++
 src/components/password_reset/password_reset.vue    |  2 +-
 src/components/post_status_form/post_status_form.js |  6 ++++--
 .../post_status_form/post_status_form.vue           | 10 +++++-----
 src/components/search_bar/search_bar.js             |  9 +++++++++
 src/components/search_bar/search_bar.vue            |  4 ++--
 src/components/settings_modal/tabs/profile_tab.js   |  8 ++++++++
 src/components/settings_modal/tabs/profile_tab.vue  | 12 ++++++------
 .../settings_modal/tabs/theme_tab/preview.vue       | 13 ++++++++++++-
 25 files changed, 127 insertions(+), 28 deletions(-)

diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index be4a7c89..4ad993e3 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -7,6 +7,14 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import StatusContent from '../status_content/status_content.vue'
 import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const ChatMessage = {
   name: 'ChatMessage',
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index e923d694..7973e5ef 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -56,7 +56,7 @@
                       class="dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
-                      <i class="icon-cancel" /> {{ $t("chats.delete") }}
+                      <FAIcon icon="times" /> {{ $t("chats.delete") }}
                     </button>
                   </div>
                 </div>
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js
index 3dfec6df..c3887098 100644
--- a/src/components/chat_panel/chat_panel.js
+++ b/src/components/chat_panel/chat_panel.js
@@ -1,9 +1,13 @@
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faBullhorn } from '@fortawesome/free-solid-svg-icons'
+import {
+  faBullhorn,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faBullhorn
+  faBullhorn,
+  faTimes
 )
 
 const chatPanel = {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index b64535b0..fc06f542 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -13,7 +13,7 @@
           <span>{{ $t('shoutbox.title') }}</span>
           <i
             v-if="floating"
-            class="icon-cancel"
+            icon="times"
           />
         </div>
       </div>
diff --git a/src/components/global_notice_list/global_notice_list.js b/src/components/global_notice_list/global_notice_list.js
index 3af29c23..e93fba75 100644
--- a/src/components/global_notice_list/global_notice_list.js
+++ b/src/components/global_notice_list/global_notice_list.js
@@ -1,3 +1,11 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const GlobalNoticeList = {
   computed: {
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 0e4285cc..2965cd0d 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,7 @@
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
       <i
-        class="button-icon icon-cancel"
+        class="button-icon" icon="times"
         @click="closeNotice(notice)"
       />
     </div>
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 01361e25..9027b6eb 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -1,5 +1,13 @@
 import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const ImageCropper = {
   props: {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 4e1b5927..389b06b9 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -41,8 +41,8 @@
         class="alert error"
       >
         {{ submitErrorMsg }}
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 0d8f1da6..638bd812 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -1,5 +1,13 @@
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 import oauthApi from '../../services/new_api/oauth.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const LoginForm = {
   data: () => ({
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index b4fdcefb..34f49576 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,7 @@
       <div class="alert error">
         {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index b25c65dd..01a62a50 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -1,5 +1,13 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 export default {
   data: () => ({
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 57294630..8e98054e 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,7 @@
       <div class="alert error">
         {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index b774f2d0..6ee823ed 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -1,5 +1,14 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
+
 export default {
   data: () => ({
     code: null,
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index a344b395..bad2286f 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -57,7 +57,7 @@
       <div class="alert error">
         {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index b2b5d264..bd32b266 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -3,6 +3,14 @@ import Notifications from '../notifications/notifications.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const MobileNav = {
   components: {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index abd95f09..e5664dc5 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -59,7 +59,7 @@
           class="mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications()"
         >
-          <i class="button-icon icon-cancel" />
+          <FAIcon class="button-icon" icon="times" />
         </a>
       </div>
       <div
diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
index 5d21d720..3d94f5e7 100644
--- a/src/components/password_reset/password_reset.js
+++ b/src/components/password_reset/password_reset.js
@@ -1,5 +1,13 @@
 import { mapState } from 'vuex'
 import passwordResetApi from '../../services/new_api/password_reset.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const passwordReset = {
   data: () => ({
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 713c9dce..8e8225ed 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -66,7 +66,7 @@
               class="button-icon dismiss"
               @click.prevent="dismissError()"
             >
-              <i class="icon-cancel" />
+              <FAIcon icon="times" />
             </a>
           </p>
         </div>
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 1267225d..e763baa8 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -18,7 +18,8 @@ import {
   faSmileBeam,
   faPollH,
   faUpload,
-  faBan
+  faBan,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -26,7 +27,8 @@ library.add(
   faSmileBeam,
   faPollH,
   faUpload,
-  faBan
+  faBan,
+  faTimes
 )
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9a5be689..7f7ac72f 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -40,7 +40,7 @@
             class="button-icon dismiss"
             @click.prevent="dismissScopeNotice()"
           >
-            <i class="icon-cancel" />
+            <FAIcon icon="times" />
           </a>
         </p>
         <p
@@ -52,7 +52,7 @@
             class="button-icon dismiss"
             @click.prevent="dismissScopeNotice()"
           >
-            <i class="icon-cancel" />
+            <FAIcon icon="times" />
           </a>
         </p>
         <p
@@ -64,7 +64,7 @@
             class="button-icon dismiss"
             @click.prevent="dismissScopeNotice()"
           >
-            <i class="icon-cancel" />
+            <FAIcon icon="times" />
           </a>
         </p>
         <p
@@ -285,7 +285,7 @@
       >
         Error: {{ error }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearError"
         />
       </div>
@@ -296,7 +296,7 @@
           class="media-upload-wrapper"
         >
           <i
-            class="fa button-icon icon-cancel"
+            class="button-icon" icon="times"
             @click="removeMediaFile(file)"
           />
           <attachment
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index d7d85676..3699e262 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -1,3 +1,12 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
+
 const SearchBar = {
   data: () => ({
     searchTerm: undefined,
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 4d5a1aec..6a08ebe5 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -29,8 +29,8 @@
         >
           <i class="icon-search" />
         </button>
-        <i
-          class="button-icon icon-cancel"
+        <FAIcon
+          class="button-icon" icon="times"
           @click.prevent.stop="toggleHidden"
         />
       </template>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index bd6bef6a..37e829bb 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -8,6 +8,14 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
 
 const ProfileTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index cf88c4e4..df54551c 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -129,7 +129,7 @@
           >
             <i
               v-show="newFields.length > 1"
-              class="icon-cancel"
+              icon="times"
               @click="deleteField(i)"
             />
           </div>
@@ -169,7 +169,7 @@
         <i
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
-          class="reset-button icon-cancel"
+          class="reset-button" icon="times"
           type="button"
           @click="resetAvatar"
         />
@@ -197,7 +197,7 @@
         <i
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
-          class="reset-button icon-cancel"
+          class="reset-button" icon="times"
           type="button"
           @click="resetBanner"
         />
@@ -231,7 +231,7 @@
       >
         Error: {{ bannerUploadError }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearUploadError('banner')"
         />
       </div>
@@ -243,7 +243,7 @@
         <i
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
-          class="reset-button icon-cancel"
+          class="reset-button" icon="times"
           type="button"
           @click="resetBackground"
         />
@@ -277,7 +277,7 @@
       >
         Error: {{ backgroundUploadError }}
         <i
-          class="button-icon icon-cancel"
+          class="button-icon" icon="times"
           @click="clearUploadError('background')"
         />
       </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 9d984659..c8cb2665 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -53,7 +53,7 @@
               />
               <i
                 style="color: var(--cRed)"
-                class="button-icon icon-cancel"
+                class="button-icon" icon="times"
               />
             </div>
           </div>
@@ -103,6 +103,17 @@
   </div>
 </template>
 
+<script>
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes
+)
+</script>
+
 <style lang="scss">
 .preview-container {
   position: relative;

From b19c2eb0fb45aca4f4a59c4afacaffddf695987d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 22:13:19 +0300
Subject: [PATCH 05/19] More stuff. Buttons in user card's corner now have MUCH
 bigger hitboxes

---
 src/App.scss                                  |  6 ++--
 .../account_actions/account_actions.js        |  8 +++++
 .../account_actions/account_actions.vue       | 32 +++++++++----------
 src/components/chat/chat.js                   |  6 ++--
 src/components/chat/chat.scss                 |  8 ++---
 src/components/chat/chat.vue                  |  2 +-
 src/components/chat_message/chat_message.js   |  6 ++--
 src/components/chat_message/chat_message.scss |  2 +-
 src/components/chat_message/chat_message.vue  |  3 +-
 src/components/chat_new/chat_new.js           | 10 ++++++
 src/components/chat_new/chat_new.scss         |  6 ++--
 src/components/chat_new/chat_new.vue          |  4 +--
 src/components/media_modal/media_modal.js     | 10 ++++++
 src/components/media_modal/media_modal.vue    |  4 +--
 src/components/mobile_nav/mobile_nav.js       |  8 +++--
 src/components/mobile_nav/mobile_nav.vue      | 11 +++----
 .../mobile_post_status_button.js              |  8 +++++
 .../mobile_post_status_button.vue             |  4 +--
 src/components/search/search.js               |  8 +++--
 src/components/search/search.vue              |  2 +-
 src/components/search_bar/search_bar.js       |  6 ++--
 src/components/search_bar/search_bar.vue      |  2 +-
 .../settings_modal_content.scss               |  2 +-
 .../settings_modal/tabs/general_tab.js        |  6 ++--
 .../settings_modal/tabs/general_tab.vue       |  2 +-
 .../settings_modal/tabs/profile_tab.js        |  6 ++--
 .../settings_modal/tabs/profile_tab.vue       |  2 +-
 src/components/side_drawer/side_drawer.js     | 28 ++++++++++++++++
 src/components/side_drawer/side_drawer.vue    | 24 +++++++-------
 src/components/user_card/user_card.vue        | 20 ++++++++----
 src/hocs/with_load_more/with_load_more.js     | 12 ++++++-
 .../with_subscription/with_subscription.js    | 12 ++++++-
 32 files changed, 188 insertions(+), 82 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 10969abb..126a3297 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -85,7 +85,7 @@ button {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  i[class*=icon-] {
+  i[class*=icon-], .svg-inline--fa {
     color: $fallback--text;
     color: var(--btnText, $fallback--text);
   }
@@ -389,7 +389,7 @@ i[class*=icon-], .svg-inline--fa  {
   box-sizing: border-box;
 
   button {
-    &, i[class*=icon-] {
+    &, i[class*=icon-], svg {
       color: $fallback--text;
       color: var(--btnTopBarText, $fallback--text);
     }
@@ -463,7 +463,7 @@ i[class*=icon-], .svg-inline--fa  {
     flex-basis: 970px;
     height: 50px;
 
-    a, a i {
+    a, a i, a svg {
       color: $fallback--link;
       color: var(--topBarLink, $fallback--link);
     }
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 6d345bc7..395d6685 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,6 +1,14 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisV
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisV
+)
 
 const AccountActions = {
   props: [
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 987e94b7..61099d4f 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="account-actions">
+  <div class="AccountActions">
     <Popover
       trigger="click"
       placement="bottom"
@@ -63,7 +63,7 @@
         slot="trigger"
         class="btn btn-default ellipsis-button"
       >
-        <i class="icon-ellipsis trigger-button" />
+        <FAIcon class="icon" icon="ellipsis-v" />
       </div>
     </Popover>
   </div>
@@ -73,22 +73,22 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-.account-actions {
-  margin: 0 .8em;
-}
+.AccountActions {
+  button.dropdown-item {
+    margin-left: 0;
+  }
 
-.account-actions button.dropdown-item {
-  margin-left: 0;
-}
+  .ellipsis-button {
+    cursor: pointer;
+    width: 2.5em;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+    text-align: center;
 
-.account-actions .trigger-button {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  opacity: .8;
-  cursor: pointer;
-  &:hover {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
   }
 }
 </style>
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 1630ba80..083f850f 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -9,11 +9,13 @@ import { promiseInterval } from '../../services/promise_interval/promise_interva
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown
+  faChevronDown,
+  faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown
+  faChevronDown,
+  faChevronLeft
 )
 
 const BOTTOMED_OUT_OFFSET = 10
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 012a1b1d..b7b0d377 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -58,12 +58,8 @@
 
   .go-back-button {
     cursor: pointer;
-    margin-right: 1.4em;
-
-    i {
-      display: flex;
-      align-items: center;
-    }
+    margin-right: 1.7em;
+    margin-left: 0.3em;
   }
 
   .jump-to-bottom-button {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 0d44c920..0670f1ac 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -14,7 +14,7 @@
             class="go-back-button"
             @click="goBack"
           >
-            <i class="button-icon icon-left-open" />
+            <FAIcon size="lg" icon="chevron-left" />
           </a>
           <div class="title text-center">
             <ChatTitle
diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index 4ad993e3..bb380f87 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -9,11 +9,13 @@ import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faEllipsisH
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faEllipsisH
 )
 
 const ChatMessage = {
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 7d4ff60c..53ca7cce 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -24,7 +24,7 @@
     }
   }
 
-  .icon-ellipsis {
+  .menu-icon {
     cursor: pointer;
 
     &:hover, .extra-button-popover.open & {
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 7973e5ef..d5b8bb9e 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -62,9 +62,10 @@
                 </div>
                 <button
                   slot="trigger"
+                  class="menu-icon"
                   :title="$t('chats.more')"
                 >
-                  <i class="icon-ellipsis" />
+                  <FAIcon icon="ellipsis-h" />
                 </button>
               </Popover>
             </div>
diff --git a/src/components/chat_new/chat_new.js b/src/components/chat_new/chat_new.js
index d023efc0..71585995 100644
--- a/src/components/chat_new/chat_new.js
+++ b/src/components/chat_new/chat_new.js
@@ -1,6 +1,16 @@
 import { mapState, mapGetters } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)
 
 const chatNew = {
   components: {
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
index 11305444..716172b0 100644
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@@ -8,9 +8,7 @@
     }
   }
 
-  .icon-search {
-    font-size: 1.5em;
-    float: right;
+  .search-icon {
     margin-right: 0.3em;
   }
 
@@ -25,5 +23,7 @@
 
   .go-back-button {
     cursor: pointer;
+    margin-right: 1.7em;
+    margin-left: 0.3em;
   }
 }
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 3333dbf9..95eebe6b 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -11,12 +11,12 @@
         class="go-back-button"
         @click="goBack"
       >
-        <i class="button-icon icon-left-open" />
+        <FAIcon size="lg" icon="chevron-left" />
       </a>
     </div>
     <div class="input-wrap">
       <div class="input-search">
-        <i class="button-icon icon-search" />
+        <FAIcon size="lg" class="search-icon button-icon" icon="search" />
       </div>
       <input
         ref="search"
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 24764e80..e7384c93 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -3,6 +3,16 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronLeft,
+  faChevronRight
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronLeft,
+  faChevronRight
+)
 
 const MediaModal = {
   components: {
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 46931667..cbcfc6d2 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -34,7 +34,7 @@
       class="modal-view-button-arrow modal-view-button-arrow--prev"
       @click.stop.prevent="goPrev"
     >
-      <i class="icon-left-open arrow-icon" />
+      <FAIcon class="arrow-icon" icon="chevron-left" />
     </button>
     <button
       v-if="canNavigate"
@@ -42,7 +42,7 @@
       class="modal-view-button-arrow modal-view-button-arrow--next"
       @click.stop.prevent="goNext"
     >
-      <i class="icon-right-open arrow-icon" />
+      <FAIcon class="arrow-icon" icon="chevron-right" />
     </button>
   </Modal>
 </template>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index bd32b266..9e736cfb 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -5,11 +5,15 @@ import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faBell,
+  faBars
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faBell,
+  faBars
 )
 
 const MobileNav = {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index e5664dc5..4d91af77 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -15,7 +15,7 @@
             class="mobile-nav-button"
             @click.stop.prevent="toggleMobileSidebar()"
           >
-            <i class="button-icon icon-menu" />
+            <FAIcon size="lg" class="button-icon" icon="bars" />
             <div
               v-if="unreadChatCount"
               class="alert-dot"
@@ -37,7 +37,7 @@
             href="#"
             @click.stop.prevent="openMobileNotifications()"
           >
-            <i class="button-icon icon-bell-alt" />
+            <FAIcon size="lg" class="button-icon" icon="bell" />
             <div
               v-if="unseenNotificationsCount"
               class="alert-dot"
@@ -59,7 +59,7 @@
           class="mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications()"
         >
-          <FAIcon class="button-icon" icon="times" />
+          <FAIcon size="lg" class="button-icon" icon="times" />
         </a>
       </div>
       <div
@@ -91,9 +91,8 @@
 }
 
 .mobile-nav-button {
-  display: flex;
-  justify-content: center;
-  width: 50px;
+  text-align: center;
+  margin: 0 1em;
   position: relative;
   cursor: pointer;
 }
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 6348277b..366ea89c 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -1,4 +1,12 @@
 import { debounce } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPen
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPen
+)
 
 const HIDDEN_FOR_PAGES = new Set([
   'chats',
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 9cf45de3..50529878 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -5,7 +5,7 @@
       :class="{ 'hidden': isHidden }"
       @click="openPostForm"
     >
-      <i class="icon-edit" />
+      <FAIcon icon="pen" />
     </button>
   </div>
 </template>
@@ -39,7 +39,7 @@
     transform: translateY(150%);
   }
 
-  i {
+  svg {
     font-size: 1.5em;
     color: $fallback--text;
     color: var(--text, $fallback--text);
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 3eb92fc1..b62bc2c5 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -3,10 +3,14 @@ import Conversation from '../conversation/conversation.vue'
 import Status from '../status/status.vue'
 import map from 'lodash/map'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import {
+  faCircleNotch,
+  faSearch
+} from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faSearch
 )
 
 const Search = {
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index a6677e4b..d32f48d9 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -17,7 +17,7 @@
         class="btn search-button"
         @click="newQuery(searchTerm)"
       >
-        <i class="icon-search" />
+        <FAIcon icon="search" />
       </button>
     </div>
     <div
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index 3699e262..7ae8b21b 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -1,10 +1,12 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faSearch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faSearch
 )
 
 const SearchBar = {
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 6a08ebe5..ecc0febf 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -27,7 +27,7 @@
           class="btn search-button"
           @click="find(searchTerm)"
         >
-          <i class="icon-search" />
+          <FAIcon icon="search" />
         </button>
         <FAIcon
           class="button-icon" icon="times"
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index a3fef1cf..f066234c 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -31,7 +31,7 @@
     }
 
     .unavailable,
-    .unavailable i {
+    .unavailable svg {
       color: var(--cRed, $fallback--cRed);
       color: $fallback--cRed;
     }
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index a39d7071..df592a10 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -4,11 +4,13 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown
+  faChevronDown,
+  faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faChevronDown
+  faChevronDown,
+  faGlobe
 )
 
 const GeneralTab = {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 9fc1470e..2ab6b314 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -222,7 +222,7 @@
                 v-if="!loopSilentAvailable"
                 class="unavailable"
               >
-                <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
+                <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
               </div>
             </li>
           </ul>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 37e829bb..22037218 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -10,11 +10,13 @@ import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faPlus
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faPlus
 )
 
 const ProfileTab = {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index df54551c..7013b65d 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -139,7 +139,7 @@
           class="add-field faint"
           @click="addField"
         >
-          <i class="icon-plus" />
+          <FAIcon icon="plus" />
           {{ $t("settings.profile_fields.add_field") }}
         </a>
       </div>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 281052e5..fe736168 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -2,6 +2,34 @@ import { mapState, mapGetters } from 'vuex'
 import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+)
 
 const SideDrawer = {
   props: [ 'logout' ],
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index eda5a68c..fbdb2441 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -36,7 +36,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            <i class="button-icon icon-login" /> {{ $t("login.login") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +44,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: timelinesRoute }">
-            <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li
@@ -55,7 +55,7 @@
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative"
           >
-            <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
               class="badge badge-notification unread-chat-count"
@@ -68,7 +68,7 @@
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li
@@ -76,7 +76,7 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -90,7 +90,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>
@@ -100,7 +100,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'search' }">
-            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="search" /> {{ $t("nav.search") }}
           </router-link>
         </li>
         <li
@@ -108,7 +108,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
@@ -116,12 +116,12 @@
             href="#"
             @click="openSettingsModal"
           >
-            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="cog" /> {{ $t("settings.settings") }}
           </a>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
-            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -132,7 +132,7 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -143,7 +143,7 @@
             href="#"
             @click="doLogout"
           >
-            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index cfdeaa17..4f7df789 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -54,8 +54,9 @@
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
                 target="_blank"
+                class="external-link-button"
               >
-                <FAIcon class="usersettings" icon="external-link-alt" />
+                <FAIcon class="icon" icon="external-link-alt" />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -289,7 +290,7 @@
     mask: linear-gradient(to top, white, transparent) bottom no-repeat,
           linear-gradient(to top, white, white);
     // Autoprefixed seem to ignore this one, and also syntax is different
-    -webkit-mask-composite: xor;
+                                                 -webkit-mask-composite: xor;
     mask-composite: exclude;
     background-size: cover;
     mask-size: 100% 60%;
@@ -404,10 +405,17 @@
     }
   }
 
-  .usersettings {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-    opacity: .8;
+  .external-link-button {
+    cursor: pointer;
+    width: 2.5em;
+    text-align: center;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
   }
 
   .user-summary {
diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js
index 6142f513..afb51a0f 100644
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
 import { getComponentProps } from '../../services/component_utils/component_utils'
 import './with_load_more.scss'
 
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const withLoadMore = ({
   fetch, // function to fetch entries and return a promise
   select, // function to select data from store
@@ -82,7 +92,7 @@ const withLoadMore = ({
           </WrappedComponent>
           <div class="with-load-more-footer">
             {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
             {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
           </div>
         </div>
diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js
index 1775adcb..b1244276 100644
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
 import { getComponentProps } from '../../services/component_utils/component_utils'
 import './with_subscription.scss'
 
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const withSubscription = ({
   fetch, // function to fetch entries and return a promise
   select, // function to select data from store
@@ -72,7 +82,7 @@ const withSubscription = ({
           <div class="with-subscription-loading">
             {this.error
               ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
-              : <i class="icon-spin3 animate-spin"/>
+              : <FAIcon spin icon="circle-notch"/>
             }
           </div>
         )

From 3cbaa0044943341fa4af4e4eb880649fc7eecda4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Oct 2020 22:54:43 +0300
Subject: [PATCH 06/19] more replacements + small renames

---
 src/App.scss                                  |  6 ++-
 src/App.vue                                   | 26 +++++++-----
 src/components/font_control/font_control.vue  |  2 +-
 .../interface_language_switcher.vue           |  2 +-
 src/components/poll/poll_form.vue             |  4 +-
 .../post_status_form/post_status_form.vue     |  2 +-
 src/components/search_bar/search_bar.js       |  3 +-
 src/components/search_bar/search_bar.vue      | 41 +++++++++++--------
 .../settings_modal/settings_modal_content.js  | 23 +++++++++++
 .../settings_modal/settings_modal_content.vue |  8 ++--
 .../settings_modal/tabs/filtering_tab.vue     |  2 +-
 .../settings_modal/tabs/general_tab.vue       |  4 +-
 .../settings_modal/tabs/theme_tab/preview.vue | 28 +++++++++----
 .../tabs/theme_tab/theme_tab.vue              |  4 +-
 .../shadow_control/shadow_control.vue         |  2 +-
 src/components/tab_switcher/tab_switcher.js   |  3 +-
 src/components/tab_switcher/tab_switcher.scss |  3 +-
 src/components/user_card/user_card.vue        |  2 +-
 18 files changed, 106 insertions(+), 59 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 126a3297..06915e16 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -188,7 +188,7 @@ input, textarea, .select, .input {
     opacity: 0.5;
   }
 
-  .icon-down-open {
+  .select-down-icon {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -368,7 +368,9 @@ i[class*=icon-], .svg-inline--fa  {
   flex-wrap: wrap;
 
   .nav-icon {
-    margin-left: 0.4em;
+    margin-left: 0.2em;
+    width: 2em;
+    text-align: center;
   }
 
   &.right {
diff --git a/src/App.vue b/src/App.vue
index 0276c6a6..5efaf717 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,36 +42,42 @@
         <div class="item right">
           <search-bar
             v-if="currentUser || !privateMode"
-            class="nav-icon mobile-hidden"
+            class="mobile-hidden"
             @toggled="onSearchBarToggled"
             @click.stop.native
           />
           <a
             href="#"
-            class="mobile-hidden"
+            class="mobile-hidden nav-icon"
             @click.stop="openSettingsModal"
           >
-            <i
-              class="button-icon icon-cog nav-icon"
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon" icon="cog"
               :title="$t('nav.preferences')"
             />
           </a>
           <a
             v-if="currentUser && currentUser.role === 'admin'"
             href="/pleroma/admin/#/login-pleroma"
-            class="mobile-hidden"
+            class="mobile-hidden nav-icon"
             target="_blank"
-          ><i
-            class="button-icon icon-gauge nav-icon"
+          ><FAIcon
+             fixed-width
+              size="lg"
+             class="button-icon" icon="tachometer-alt"
             :title="$t('nav.administration')"
           /></a>
           <a
             v-if="currentUser"
             href="#"
-            class="mobile-hidden"
+            class="mobile-hidden nav-icon"
             @click.prevent="logout"
-          ><i
-            class="button-icon icon-logout nav-icon"
+          ><FAIcon
+             fixed-width
+              size="lg"
+             class="button-icon" icon="sign-out-alt"
             :title="$t('login.logout')"
           /></a>
         </div>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 40aed190..6070ab22 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,7 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <FAIcon class="icon-down-open" icon="chevron-down" />
+      <FAIcon class="select-down-icon" icon="chevron-down" />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 2a3d4cbb..76bdcdfe 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,7 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <FAIcon class="icon-down-open" icon="chevron-down" />
+      <FAIcon class="select-down-icon" icon="chevron-down" />
     </label>
   </div>
 </template>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 3a8a2f42..8c4ada89 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -56,7 +56,7 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <FAIcon class="icon-down-open" icon="chevron-down"/>
+          <FAIcon class="select-down-icon" icon="chevron-down"/>
         </label>
       </div>
       <div
@@ -84,7 +84,7 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <FAIcon class="icon-down-open" icon="chevron-down"/>
+          <FAIcon class="select-down-icon" icon="chevron-down"/>
         </label>
       </div>
     </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7f7ac72f..817b2fa0 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -199,7 +199,7 @@
                   {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 </option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down"/>
+              <FAIcon class="select-down-icon" icon="chevron-down"/>
             </label>
           </div>
           <div
diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js
index 7ae8b21b..551649c7 100644
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@@ -13,8 +13,7 @@ const SearchBar = {
   data: () => ({
     searchTerm: undefined,
     hidden: true,
-    error: false,
-    loading: false
+    error: false
   }),
   watch: {
     '$route': function (route) {
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index ecc0febf..fbbbbfe0 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -1,17 +1,17 @@
 <template>
   <div>
     <div class="search-bar-container">
-      <i
-        v-if="loading"
-        class="icon-spin4 finder-icon animate-spin-slow"
-      />
       <a
         v-if="hidden"
         href="#"
+        class="nav-icon"
         :title="$t('nav.search')"
-      ><i
-        class="button-icon icon-search"
-        @click.prevent.stop="toggleHidden"
+      ><FAIcon
+         fixed-width
+         size="lg"
+         class="button-icon"
+         icon="search"
+         @click.prevent.stop="toggleHidden"
       /></a>
       <template v-else>
         <input
@@ -27,12 +27,20 @@
           class="btn search-button"
           @click="find(searchTerm)"
         >
-          <FAIcon icon="search" />
+          <FAIcon
+            fixed-width
+            icon="search"
+            />
         </button>
-        <FAIcon
-          class="button-icon" icon="times"
-          @click.prevent.stop="toggleHidden"
-        />
+        <span>
+          <FAIcon
+            size="lg"
+            fixed-width
+            icon="times"
+            class="cancel-icon"
+            @click.prevent.stop="toggleHidden"
+          />
+        </span>
       </template>
     </div>
   </div>
@@ -60,13 +68,10 @@
     max-width: calc(100% - 30px - 30px - 20px);
   }
 
-  .search-button {
-    margin-left: .5em;
-    margin-right: .5em;
-  }
-
-  .icon-cancel {
+  .cancel-icon {
     cursor: pointer;
+    color: $fallback--text;
+    color: var(--btnTopBarText, $fallback--text);
   }
 }
 
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index ef1a5ffa..9dcf1b5a 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue'
 import VersionTab from './tabs/version_tab.vue'
 import ThemeTab from './tabs/theme_tab/theme_tab.vue'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faWrench,
+  faUser,
+  faFilter,
+  faPaintBrush,
+  faBell,
+  faDownload,
+  faEyeSlash,
+  faInfo
+)
+
 const SettingsModalContent = {
   components: {
     TabSwitcher,
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index bc30a0ff..c9ed2a38 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -37,7 +37,7 @@
     </div>
     <div
       :label="$t('settings.theme')"
-      icon="brush"
+      icon="paint-brush"
       data-tab-name="theme"
     >
       <ThemeTab />
@@ -45,7 +45,7 @@
     <div
       v-if="isLoggedIn"
       :label="$t('settings.notifications')"
-      icon="bell-ringing-o"
+      icon="bell"
       data-tab-name="notifications"
     >
       <NotificationsTab />
@@ -62,14 +62,14 @@
       v-if="isLoggedIn"
       :label="$t('settings.mutes_and_blocks')"
       :fullHeight="true"
-      icon="eye-off"
+      icon="eye-slash"
       data-tab-name="mutesAndBlocks"
     >
       <MutesAndBlocksTab />
     </div>
     <div
       :label="$t('settings.version.title')"
-      icon="info-circled"
+      icon="info"
       data-tab-name="version"
     >
       <VersionTab />
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 786f3618..ff1a129b 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,7 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <FAIcon class="icon-down-open" icon="chevron-down" />
+          <FAIcon class="select-down-icon" icon="chevron-down" />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2ab6b314..99d3a0dc 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,7 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down" />
+              <FAIcon class="select-down-icon" icon="chevron-down" />
             </label>
           </div>
         </li>
@@ -127,7 +127,7 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down" />
+              <FAIcon class="select-down-icon" icon="chevron-down" />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index c8cb2665..65863c54 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -39,19 +39,23 @@
             </i18n>
 
             <div class="icons">
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon icon-reply"
+                class="button-icon" icon="reply"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon icon-retweet"
+                class="button-icon" icon="retweet"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon icon-star"
+                class="button-icon" icon="star"
               />
-              <i
+              <FAIcon
+                fixed-width
                 style="color: var(--cRed)"
                 class="button-icon" icon="times"
               />
@@ -106,11 +110,17 @@
 <script>
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faStar,
+  faRetweet,
+  faReply
 )
 </script>
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index fb8b16ae..9cc1c392 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,7 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <FAIcon class="icon-down-open" icon="chevron-down" />
+                <FAIcon class="select-down-icon" icon="chevron-down" />
               </label>
             </div>
           </template>
@@ -907,7 +907,7 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <FAIcon class="icon-down-open" icon="chevron-down" />
+                <FAIcon class="select-down-icon" icon="chevron-down" />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 1f63f3f2..32220ae8 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,7 +78,7 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <FAIcon icon="chevron-down" class="icon-down-open" />
+          <FAIcon icon="chevron-down" class="select-down-icon" />
         </label>
         <button
           class="btn btn-default"
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 9c1da354..6e6e8193 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import { mapState } from 'vuex'
+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './tab_switcher.scss'
 
@@ -107,7 +108,7 @@ export default Vue.component('tab-switcher', {
               class={classesTab.join(' ')}
               type="button"
             >
-              {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
+              {!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)}
               <span class="text">
                 {slot.data.attrs.label}
               </span>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index d2ef4857..cd8fff6f 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -4,7 +4,8 @@
   display: flex;
 
   .tab-icon {
-    font-size: 2em;
+    width: 100%;
+    margin: 0.2em 0;
     display: block;
   }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4f7df789..6c35c781 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -136,7 +136,7 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <FAIcon class="icon-down-open" icon="chevron-down" />
+              <FAIcon class="select-down-icon" icon="chevron-down" />
             </label>
           </div>
         </div>

From a50cd7e37dce6e95f2c3d6cc63c382af71a2926e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:01:28 +0300
Subject: [PATCH 07/19] remaining changes...

---
 src/components/attachment/attachment.js       | 22 +++++++--
 src/components/attachment/attachment.vue      | 14 ++++--
 src/components/chat_panel/chat_panel.vue      |  7 +--
 .../global_notice_list/global_notice_list.vue |  2 +-
 src/components/image_cropper/image_cropper.js |  6 ++-
 .../image_cropper/image_cropper.vue           |  5 +-
 src/components/importer/importer.js           | 11 +++++
 src/components/importer/importer.vue          | 14 +++---
 src/components/login_form/login_form.vue      |  2 +-
 src/components/mfa_form/recovery_form.vue     |  2 +-
 src/components/mfa_form/totp_form.vue         |  6 ++-
 .../password_reset/password_reset.vue         |  2 +-
 src/components/poll/poll_form.vue             |  9 ++++
 .../post_status_form/post_status_form.js      |  6 ++-
 .../post_status_form/post_status_form.vue     | 46 ++++++-------------
 .../settings_modal/tabs/profile_tab.js        |  6 ++-
 .../settings_modal/tabs/profile_tab.scss      |  6 +--
 .../settings_modal/tabs/profile_tab.vue       | 28 ++++++-----
 src/components/status/status.scss             |  5 --
 .../status_content/status_content.js          | 18 ++++++++
 .../status_content/status_content.vue         | 28 ++++++-----
 src/components/user_profile/user_profile.js   |  8 ++++
 src/components/user_profile/user_profile.vue  |  6 ++-
 23 files changed, 162 insertions(+), 97 deletions(-)

diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index cb31020d..e23fcb1b 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -3,6 +3,20 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { mapGetters } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFile,
+  faMusic,
+  faImage,
+  faVideo
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faFile,
+  faMusic,
+  faImage,
+  faVideo
+)
 
 const Attachment = {
   props: [
@@ -39,10 +53,10 @@ const Attachment = {
       return this.attachment.description
     },
     placeholderIconClass () {
-      if (this.type === 'image') return 'icon-picture'
-      if (this.type === 'video') return 'icon-video'
-      if (this.type === 'audio') return 'icon-music'
-      return 'icon-doc'
+      if (this.type === 'image') return 'image'
+      if (this.type === 'video') return 'video'
+      if (this.type === 'audio') return 'music'
+      return 'file'
     },
     referrerpolicy () {
       return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 19c713d5..0b7a3f9c 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -12,7 +12,7 @@
       :alt="attachment.description"
       :title="attachment.description"
     >
-      <span :class="placeholderIconClass" />
+      <FAIcon :icon="placeholderIconClass" />
       <b>{{ nsfw ? "NSFW / " : "" }}</b>{{ placeholderName }}
     </a>
   </div>
@@ -36,9 +36,9 @@
         :src="nsfwImage"
         :class="{'small': isSmall}"
       >
-      <i
+      <FAIcon
         v-if="type === 'video'"
-        class="play-icon icon-play-circled"
+        class="play-icon" icon="play-circle"
       />
     </a>
     <div
@@ -83,9 +83,9 @@
         @play="$emit('play')"
         @pause="$emit('pause')"
       />
-      <i
+      <FAIcon
         v-if="!allowPlay"
-        class="play-icon icon-play-circled"
+        class="play-icon" icon="play-circle"
       />
     </a>
 
@@ -142,6 +142,10 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     max-width: 100%;
+
+    svg {
+      color: inherit;
+    }
   }
 
   .nsfw-placeholder {
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index fc06f542..51b99563 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -11,7 +11,7 @@
       >
         <div class="title">
           <span>{{ $t('shoutbox.title') }}</span>
-          <i
+          <FAIcon
             v-if="floating"
             icon="times"
           />
@@ -63,7 +63,7 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <FAIcon icon="bullhorn" />
+          <FAIcon class="icon" icon="bullhorn" />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
@@ -87,7 +87,8 @@
 .chat-panel {
   .chat-heading {
     cursor: pointer;
-    .icon-comment-empty {
+
+    .icon {
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 2965cd0d..3a7139f4 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -9,7 +9,7 @@
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
-      <i
+      <FAIcon
         class="button-icon" icon="times"
         @click="closeNotice(notice)"
       />
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 9027b6eb..59e4d07e 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -2,11 +2,13 @@ import Cropper from 'cropperjs'
 import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faTimes
+  faTimes,
+  faCircleNotch
 )
 
 const ImageCropper = {
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 389b06b9..e69cbd0b 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -31,9 +31,10 @@
           @click="submit(false)"
           v-text="saveWithoutCroppingText"
         />
-        <i
+        <FAIcon
           v-if="submitting"
-          class="icon-spin4 animate-spin"
+          spin
+          icon="circle-notch"
         />
       </div>
       <div
diff --git a/src/components/importer/importer.js b/src/components/importer/importer.js
index c5f9e4d2..59f9beb1 100644
--- a/src/components/importer/importer.js
+++ b/src/components/importer/importer.js
@@ -1,3 +1,14 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch,
+  faTimes
+)
+
 const Importer = {
   props: {
     submitHandler: {
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index ed923d59..c4fe5b00 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -7,9 +7,11 @@
         @change="change"
       >
     </form>
-    <i
+    <FAIcon
       v-if="submitting"
-      class="icon-spin4 animate-spin importer-uploading"
+      class="importer-uploading"
+      spin
+      icon="circle-notch"
     />
     <button
       v-else
@@ -19,15 +21,15 @@
       {{ submitButtonLabel }}
     </button>
     <div v-if="success">
-      <i
-        class="icon-cross"
+      <FAIcon
+        icon="times"
         @click="dismiss"
       />
       <p>{{ successMessage }}</p>
     </div>
     <div v-else-if="error">
-      <i
-        class="icon-cross"
+      <FAIcon
+        icon="times"
         @click="dismiss"
       />
       <p>{{ errorMessage }}</p>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 34f49576..f6b767a2 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -76,7 +76,7 @@
     >
       <div class="alert error">
         {{ error }}
-        <i
+        <FAIcon
           class="button-icon" icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 8e98054e..61dbda24 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -54,7 +54,7 @@
     >
       <div class="alert error">
         {{ error }}
-        <i
+        <FAIcon
           class="button-icon" icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index bad2286f..0c6412ea 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -56,8 +56,10 @@
     >
       <div class="alert error">
         {{ error }}
-        <i
-          class="button-icon" icon="times"
+        <FAIcon
+          size="lg"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 8e8225ed..3fe42b84 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -122,7 +122,7 @@
     padding-right: 2rem;
   }
 
-  .icon-cancel {
+  .dismiss {
     cursor: pointer;
   }
 }
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 8c4ada89..f3e7a716 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -26,6 +26,7 @@
       >
         <FAIcon
           icon="times"
+          class="delete"
           @click="deleteOption(index)"
         />
       </div>
@@ -129,6 +130,14 @@
     width: 1.5em;
     margin-left: -1.5em;
     z-index: 1;
+
+    .delete {
+      cursor: pointer;
+
+      &:hover {
+        color: inherit;
+      }
+    }
   }
 
   .poll-type-expiry {
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index e763baa8..1bdf9833 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -19,7 +19,8 @@ import {
   faPollH,
   faUpload,
   faBan,
-  faTimes
+  faTimes,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -28,7 +29,8 @@ library.add(
   faPollH,
   faUpload,
   faBan,
-  faTimes
+  faTimes,
+  faCircleNotch
 )
 
 const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 817b2fa0..428b8560 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -85,9 +85,10 @@
             {{ $t('post_status.preview') }}
             <i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
           </a>
-          <i
+          <FAIcon
             v-show="previewLoading"
-            class="icon-spin3 animate-spin"
+            spin
+            icon="circle-notch"
           />
         </div>
         <div
@@ -284,8 +285,10 @@
         class="alert error"
       >
         Error: {{ error }}
-        <i
-          class="button-icon" icon="times"
+        <FAIcon
+          class="button-icon"
+          size="lg"
+          icon="times"
           @click="clearError"
         />
       </div>
@@ -295,7 +298,7 @@
           :key="file.url"
           class="media-upload-wrapper"
         >
-          <i
+          <FAIcon
             class="button-icon" icon="times"
             @click="removeMediaFile(file)"
           />
@@ -379,10 +382,6 @@
     padding-left: 0.5em;
     display: flex;
     width: 100%;
-
-    .icon-spin3 {
-      margin-left: auto;
-    }
   }
 
   .preview-toggle {
@@ -477,7 +476,7 @@
     text-align: right;
   }
 
-  .icon-chart-bar {
+  .poll-icon {
     cursor: pointer;
   }
 
@@ -490,19 +489,6 @@
     margin-bottom: .5em;
     width: 18em;
 
-    .icon-cancel {
-      display: inline-block;
-      position: static;
-      margin: 0;
-      padding-bottom: 0;
-      margin-left: $fallback--attachmentRadius;
-      margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
-      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
     img, video {
       object-fit: contain;
       max-height: 10em;
@@ -525,7 +511,7 @@
     flex-direction: column;
   }
 
-  .media-upload-wrapper .attachments {
+   .attachments .media-upload-wrapper{
     padding: 0 0.5em;
 
     .attachment {
@@ -534,11 +520,14 @@
       position: relative;
     }
 
-    i {
+    .button-icon {
       position: absolute;
       margin: 10px;
-      padding: 5px;
+      margin: .75em;
+      padding: .5em;
       background: rgba(230,230,230,0.6);
+      z-index: 2;
+      color: black;
       border-radius: $fallback--attachmentRadius;
       border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
       font-weight: bold;
@@ -615,11 +604,6 @@
     cursor: not-allowed;
   }
 
-  .icon-cancel {
-    cursor: pointer;
-    z-index: 4;
-  }
-
   @keyframes fade-in {
     from { opacity: 0; }
     to   { opacity: 0.6; }
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 22037218..a3e4feaf 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -11,12 +11,14 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
-  faPlus
+  faPlus,
+  faCircleNotch
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faTimes,
-  faPlus
+  faPlus,
+  faCircleNotch
 )
 
 const ProfileTab = {
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index e14cf054..e821f952 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -119,10 +119,8 @@
 
     &>.icon-container {
       width: 20px;
-
-      &>.icon-cancel {
-        vertical-align: sub;
-      }
+      align-self: center;
+      margin: 0 .2em .5em;
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 7013b65d..773c77de 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -127,7 +127,7 @@
           <div
             class="icon-container"
           >
-            <i
+            <FAIcon
               v-show="newFields.length > 1"
               icon="times"
               @click="deleteField(i)"
@@ -166,7 +166,7 @@
           :src="user.profile_image_url_original"
           class="current-avatar"
         >
-        <i
+        <FAIcon
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
           class="reset-button" icon="times"
@@ -194,7 +194,7 @@
       <h2>{{ $t('settings.profile_banner') }}</h2>
       <div class="banner-background-preview">
         <img :src="user.cover_photo">
-        <i
+        <FAIcon
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
           class="reset-button" icon="times"
@@ -214,9 +214,11 @@
           @change="uploadFile('banner', $event)"
         >
       </div>
-      <i
+      <FAIcon
         v-if="bannerUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
       />
       <button
         v-else-if="bannerPreview"
@@ -230,7 +232,7 @@
         class="alert error"
       >
         Error: {{ bannerUploadError }}
-        <i
+        <FAIcon
           class="button-icon" icon="times"
           @click="clearUploadError('banner')"
         />
@@ -240,7 +242,7 @@
       <h2>{{ $t('settings.profile_background') }}</h2>
       <div class="banner-background-preview">
         <img :src="user.background_image">
-        <i
+        <FAIcon
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
           class="reset-button" icon="times"
@@ -260,9 +262,11 @@
           @change="uploadFile('background', $event)"
         >
       </div>
-      <i
+      <FAIcon
         v-if="backgroundUploading"
-        class=" icon-spin4 animate-spin uploading"
+        class="uploading"
+        spin
+        icon="circle-notch"
       />
       <button
         v-else-if="backgroundPreview"
@@ -276,8 +280,10 @@
         class="alert error"
       >
         Error: {{ backgroundUploadError }}
-        <i
-          class="button-icon" icon="times"
+        <FAIcon
+          size="lg"
+          class="button-icon"
+          icon="times"
           @click="clearUploadError('background')"
         />
       </div>
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index cd5366ed..ea9e538d 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -156,11 +156,6 @@ $status-margin: 0.75em;
       text-overflow: ellipsis;
       overflow-x: hidden;
     }
-
-    .icon-reply {
-      // mirror the icon
-      transform: scaleX(-1);
-    }
   }
 
   & .reply-to-popover,
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index df095de3..a6f79d76 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -7,6 +7,24 @@ import fileType from 'src/services/file_type/file_type.service'
 import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
 import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { mapGetters, mapState } from 'vuex'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch,
+  faFile,
+  faMusic,
+  faImage,
+  faLink,
+  faPollH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch,
+  faFile,
+  faMusic,
+  faImage,
+  faLink,
+  faPollH
+)
 
 const StatusContent = {
   name: 'StatusContent',
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index f7fb5ee2..321cd477 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -55,29 +55,29 @@
         @click.prevent="toggleShowMore"
       >
         {{ $t("status.show_content") }}
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('image')"
-          class="icon-picture"
+          icon="image"
         />
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('video')"
-          class="icon-video"
+          icon="video"
         />
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('audio')"
-          class="icon-music"
+          icon="music"
         />
-        <span
+        <FAIcon
           v-if="attachmentTypes.includes('unknown')"
-          class="icon-doc"
+          icon="file"
         />
-        <span
+        <FAIcon
           v-if="status.poll && status.poll.options"
-          class="icon-chart-bar"
+          icon="poll-h"
         />
-        <span
+        <FAIcon
           v-if="status.card"
-          class="icon-link"
+          icon="link"
         />
       </a>
       <a
@@ -182,6 +182,10 @@ $status-margin: 0.75em;
     text-align: center;
     display: inline-block;
     word-break: break-all;
+
+    svg {
+      color: inherit;
+    }
   }
 
   img, video {
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 201727d4..c0b55a6c 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -6,6 +6,14 @@ import Conversation from '../conversation/conversation.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
 
 const FollowerList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId),
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index b26499b4..f1f51840 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -122,9 +122,10 @@
       </div>
       <div class="panel-body">
         <span v-if="error">{{ error }}</span>
-        <i
+        <FAIcon
           v-else
-          class="icon-spin3 animate-spin"
+          spin
+          icon="circle-notch"
         />
       </div>
     </div>
@@ -142,6 +143,7 @@
 
   .user-profile-fields {
     margin: 0 0.5em;
+
     img {
       object-fit: contain;
       vertical-align: middle;

From 7495c6b698e0afe169c1138baabc29f70d4b44a2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:02:58 +0300
Subject: [PATCH 08/19] fix attachment remove pointer

---
 src/components/post_status_form/post_status_form.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 428b8560..3cd9e7a5 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -511,7 +511,7 @@
     flex-direction: column;
   }
 
-   .attachments .media-upload-wrapper{
+   .attachments .media-upload-wrapper {
     padding: 0 0.5em;
 
     .attachment {
@@ -531,6 +531,7 @@
       border-radius: $fallback--attachmentRadius;
       border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
       font-weight: bold;
+      cursor: pointer;
     }
   }
 

From 6aa7445ea7f8f76adbc31d018ebb3228294aef41 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:25:59 +0300
Subject: [PATCH 09/19] come on and slam

---
 src/components/nav_panel/nav_panel.js            | 4 ++--
 src/components/scope_selector/scope_selector.js  | 4 ++--
 src/components/scope_selector/scope_selector.vue | 2 +-
 src/components/status/status.js                  | 6 +++---
 src/components/timeline_menu/timeline_menu.js    | 4 ++--
 src/components/timeline_menu/timeline_menu.vue   | 2 +-
 6 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 87e54133..81d49cc2 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -4,7 +4,7 @@ import { mapState, mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
@@ -15,7 +15,7 @@ import {
 
 library.add(
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index ddb20ff2..2c9d06e0 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -3,12 +3,12 @@ import {
   faEnvelope,
   faLock,
   faUnlock,
-  faGlobeEurope
+  faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faEnvelope,
-  faGlobeEurope,
+  faGlobe,
   faLock,
   faUnlock
 )
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index ddd89422..c098783d 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -37,7 +37,7 @@
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
       >
-      <FAIcon icon="globe-europe" class="button-icon" size="lg" />
+      <FAIcon icon="globe" class="button-icon" size="lg" />
     </span>
   </div>
 </template>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 5b93054f..46fa3b76 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -22,7 +22,7 @@ import {
   faEnvelope,
   faLock,
   faUnlock,
-  faGlobeEurope,
+  faGlobe,
   faTimes,
   faRetweet,
   faReply,
@@ -38,7 +38,7 @@ import {
 
 library.add(
   faEnvelope,
-  faGlobeEurope,
+  faGlobe,
   faLock,
   faUnlock,
   faTimes,
@@ -270,7 +270,7 @@ const Status = {
         case 'direct':
           return 'envelope'
         default:
-          return 'globe-europe'
+          return 'globe'
       }
     },
     showError (error) {
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 991c600d..4ccd52b4 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -3,7 +3,7 @@ import { mapState } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
@@ -12,7 +12,7 @@ import {
 
 library.add(
   faUsers,
-  faGlobeEurope,
+  faGlobe,
   faBookmark,
   faEnvelope,
   faHome,
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 590752d3..1e546fae 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -36,7 +36,7 @@
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="globe-europe" />{{ $t("nav.twkn") }}
+            <FAIcon fixed-width size="lg" class="button-icon " icon="globe" />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>

From 1ec41302f729ac9100c3ec0cede5e4f79dd626a3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:28:24 +0300
Subject: [PATCH 10/19] rotate the shackle of the lock for better accessibility

---
 src/components/scope_selector/scope_selector.js  | 4 ++--
 src/components/scope_selector/scope_selector.vue | 2 +-
 src/components/status/status.js                  | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 2c9d06e0..74bf7284 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faUnlock,
+  faLockOpen,
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
@@ -10,7 +10,7 @@ library.add(
   faEnvelope,
   faGlobe,
   faLock,
-  faUnlock
+  faLockOpen
 )
 
 const ScopeSelector = {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index c098783d..d490f8ee 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -28,7 +28,7 @@
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
       >
-      <FAIcon icon="unlock" class="button-icon" size="lg" />
+      <FAIcon icon="lock-open" class="button-icon" size="lg" />
     </span>
     <span
       v-if="showPublic"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 46fa3b76..142e1fc6 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -21,7 +21,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEnvelope,
   faLock,
-  faUnlock,
+  faLockOpen,
   faGlobe,
   faTimes,
   faRetweet,
@@ -40,7 +40,7 @@ library.add(
   faEnvelope,
   faGlobe,
   faLock,
-  faUnlock,
+  faLockOpen,
   faTimes,
   faRetweet,
   faReply,
@@ -266,7 +266,7 @@ const Status = {
         case 'private':
           return 'lock'
         case 'unlisted':
-          return 'unlock'
+          return 'lock-open'
         case 'direct':
           return 'envelope'
         default:

From f561e755530063b2e8e0db210264b1d244543bd0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:31:16 +0300
Subject: [PATCH 11/19] lint

---
 src/App.vue                                   | 17 ++--
 .../account_actions/account_actions.vue       |  5 +-
 src/components/attachment/attachment.vue      |  6 +-
 src/components/chat/chat.vue                  |  5 +-
 src/components/chat_new/chat_new.vue          | 11 ++-
 src/components/chat_panel/chat_panel.vue      |  5 +-
 src/components/emoji_picker/emoji_picker.vue  | 10 ++-
 src/components/exporter/exporter.vue          |  6 +-
 src/components/extra_buttons/extra_buttons.js |  2 +-
 .../extra_buttons/extra_buttons.vue           | 48 +++++++++--
 src/components/font_control/font_control.vue  |  5 +-
 .../global_notice_list/global_notice_list.vue |  3 +-
 .../image_cropper/image_cropper.vue           |  3 +-
 .../interface_language_switcher.vue           |  5 +-
 src/components/login_form/login_form.vue      |  3 +-
 src/components/media_modal/media_modal.vue    | 10 ++-
 src/components/mfa_form/recovery_form.vue     |  3 +-
 src/components/mobile_nav/mobile_nav.vue      | 18 +++-
 src/components/nav_panel/nav_panel.vue        | 35 ++++++--
 src/components/notification/notification.vue  | 33 ++++++--
 .../notifications/notifications.vue           |  6 +-
 .../panel_loading/panel_loading.vue           |  6 +-
 src/components/poll/poll_form.vue             | 15 +++-
 .../post_status_form/post_status_form.vue     | 12 ++-
 .../retweet_button/retweet_button.vue         | 18 ++--
 .../scope_selector/scope_selector.vue         | 36 +++++---
 src/components/search/search.vue              |  6 +-
 src/components/search_bar/search_bar.vue      | 12 +--
 .../settings_modal/tabs/filtering_tab.vue     |  5 +-
 .../settings_modal/tabs/general_tab.vue       | 10 ++-
 .../settings_modal/tabs/profile_tab.vue       | 12 ++-
 .../settings_modal/tabs/theme_tab/preview.vue | 12 ++-
 .../tabs/theme_tab/theme_tab.vue              | 10 ++-
 .../shadow_control/shadow_control.vue         | 25 ++++--
 src/components/side_drawer/side_drawer.vue    | 84 ++++++++++++++++---
 src/components/status/status.vue              | 44 +++++++---
 .../status_popover/status_popover.vue         |  6 +-
 src/components/timeline/timeline.vue          |  6 +-
 .../timeline_menu/timeline_menu.vue           | 40 +++++++--
 src/components/user_card/user_card.vue        | 33 ++++++--
 .../user_list_popover/user_list_popover.vue   |  6 +-
 41 files changed, 497 insertions(+), 140 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5efaf717..c27f51bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -54,7 +54,8 @@
             <FAIcon
               fixed-width
               size="lg"
-              class="button-icon" icon="cog"
+              class="button-icon"
+              icon="cog"
               :title="$t('nav.preferences')"
             />
           </a>
@@ -64,9 +65,10 @@
             class="mobile-hidden nav-icon"
             target="_blank"
           ><FAIcon
-             fixed-width
-              size="lg"
-             class="button-icon" icon="tachometer-alt"
+            fixed-width
+            size="lg"
+            class="button-icon"
+            icon="tachometer-alt"
             :title="$t('nav.administration')"
           /></a>
           <a
@@ -75,9 +77,10 @@
             class="mobile-hidden nav-icon"
             @click.prevent="logout"
           ><FAIcon
-             fixed-width
-              size="lg"
-             class="button-icon" icon="sign-out-alt"
+            fixed-width
+            size="lg"
+            class="button-icon"
+            icon="sign-out-alt"
             :title="$t('login.logout')"
           /></a>
         </div>
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 61099d4f..e3ae376e 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -63,7 +63,10 @@
         slot="trigger"
         class="btn btn-default ellipsis-button"
       >
-        <FAIcon class="icon" icon="ellipsis-v" />
+        <FAIcon
+          class="icon"
+          icon="ellipsis-v"
+        />
       </div>
     </Popover>
   </div>
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 0b7a3f9c..f1fac2c8 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -38,7 +38,8 @@
       >
       <FAIcon
         v-if="type === 'video'"
-        class="play-icon" icon="play-circle"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
     <div
@@ -85,7 +86,8 @@
       />
       <FAIcon
         v-if="!allowPlay"
-        class="play-icon" icon="play-circle"
+        class="play-icon"
+        icon="play-circle"
       />
     </a>
 
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 0670f1ac..5f58b9a6 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -14,7 +14,10 @@
             class="go-back-button"
             @click="goBack"
           >
-            <FAIcon size="lg" icon="chevron-left" />
+            <FAIcon
+              size="lg"
+              icon="chevron-left"
+            />
           </a>
           <div class="title text-center">
             <ChatTitle
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 95eebe6b..8f02a699 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -11,12 +11,19 @@
         class="go-back-button"
         @click="goBack"
       >
-        <FAIcon size="lg" icon="chevron-left" />
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
       </a>
     </div>
     <div class="input-wrap">
       <div class="input-search">
-        <FAIcon size="lg" class="search-icon button-icon" icon="search" />
+        <FAIcon
+          size="lg"
+          class="search-icon button-icon"
+          icon="search"
+        />
       </div>
       <input
         ref="search"
diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue
index 51b99563..7993c94d 100644
--- a/src/components/chat_panel/chat_panel.vue
+++ b/src/components/chat_panel/chat_panel.vue
@@ -63,7 +63,10 @@
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
-          <FAIcon class="icon" icon="bullhorn" />
+          <FAIcon
+            class="icon"
+            icon="bullhorn"
+          />
           {{ $t('shoutbox.title') }}
         </div>
       </div>
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index bd093c99..3262a3d9 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -13,7 +13,10 @@
           :title="group.text"
           @click.prevent="highlight(group.id)"
         >
-          <FAIcon :icon="group.icon" fixed-width/>
+          <FAIcon
+            :icon="group.icon"
+            fixed-width
+          />
         </span>
       </span>
       <span
@@ -26,7 +29,10 @@
           :title="$t('emoji.stickers')"
           @click.prevent="toggleStickers"
         >
-          <FAIcon icon="sticky-note" fixed-width/>
+          <FAIcon
+            icon="sticky-note"
+            fixed-width
+          />
         </span>
       </span>
     </div>
diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue
index 156db9a3..ecd71bf1 100644
--- a/src/components/exporter/exporter.vue
+++ b/src/components/exporter/exporter.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="exporter">
     <div v-if="processing">
-      <FAIcon icon="circle-notch" size="lg" spin />
+      <FAIcon
+        icon="circle-notch"
+        size="lg"
+        spin
+      />
 
       <span>{{ processingMessage }}</span>
     </div>
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index f325b2b4..1a8eef72 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -8,7 +8,7 @@ import {
   faShareAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
-  faBookmark as faBookmarkReg,
+  faBookmark as faBookmarkReg
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 1889eaed..4bf1e62a 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -15,14 +15,22 @@
           class="dropdown-item dropdown-item-icon"
           @click.prevent="muteConversation"
         >
-          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.mute_conversation") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.mute_conversation") }}</span>
         </button>
         <button
           v-if="canMute && status.thread_muted"
           class="dropdown-item dropdown-item-icon"
           @click.prevent="unmuteConversation"
         >
-          <FAIcon size="md" fixed-width icon="eye-slash" /><span>{{ $t("status.unmute_conversation") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="eye-slash"
+          /><span>{{ $t("status.unmute_conversation") }}</span>
         </button>
         <button
           v-if="!status.pinned && canPin"
@@ -30,7 +38,11 @@
           @click.prevent="pinStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.pin") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.pin") }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
@@ -38,7 +50,11 @@
           @click.prevent="unpinStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="thumbtack" /><span>{{ $t("status.unpin") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="thumbtack"
+          /><span>{{ $t("status.unpin") }}</span>
         </button>
         <button
           v-if="!status.bookmarked"
@@ -46,7 +62,11 @@
           @click.prevent="bookmarkStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width :icon="['far', 'bookmark']" /><span>{{ $t("status.bookmark") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            :icon="['far', 'bookmark']"
+          /><span>{{ $t("status.bookmark") }}</span>
         </button>
         <button
           v-if="status.bookmarked"
@@ -54,7 +74,11 @@
           @click.prevent="unbookmarkStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="bookmark" /><span>{{ $t("status.unbookmark") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="bookmark"
+          /><span>{{ $t("status.unbookmark") }}</span>
         </button>
         <button
           v-if="canDelete"
@@ -62,14 +86,22 @@
           @click.prevent="deleteStatus"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="times" /><span>{{ $t("status.delete") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="times"
+          /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
           class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
           @click="close"
         >
-          <FAIcon size="md" fixed-width icon="share-alt" /><span>{{ $t("status.copy_link") }}</span>
+          <FAIcon
+            size="md"
+            fixed-width
+            icon="share-alt"
+          /><span>{{ $t("status.copy_link") }}</span>
         </button>
       </div>
     </div>
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 6070ab22..dd117ec0 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -41,7 +41,10 @@
           {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
         </option>
       </select>
-      <FAIcon class="select-down-icon" icon="chevron-down" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
     </label>
     <input
       v-if="isCustom"
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 3a7139f4..06b6af9c 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,8 @@
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
       <FAIcon
-        class="button-icon" icon="times"
+        class="button-icon"
+        icon="times"
         @click="closeNotice(notice)"
       />
     </div>
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index e69cbd0b..605f7427 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -43,7 +43,8 @@
       >
         {{ submitErrorMsg }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 76bdcdfe..d039e86b 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -19,7 +19,10 @@
           {{ languageNames[i] }}
         </option>
       </select>
-      <FAIcon class="select-down-icon" icon="chevron-down" />
+      <FAIcon
+        class="select-down-icon"
+        icon="chevron-down"
+      />
     </label>
   </div>
 </template>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index f6b767a2..4ab5d192 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,8 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index cbcfc6d2..ea7f7a7f 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -34,7 +34,10 @@
       class="modal-view-button-arrow modal-view-button-arrow--prev"
       @click.stop.prevent="goPrev"
     >
-      <FAIcon class="arrow-icon" icon="chevron-left" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-left"
+      />
     </button>
     <button
       v-if="canNavigate"
@@ -42,7 +45,10 @@
       class="modal-view-button-arrow modal-view-button-arrow--next"
       @click.stop.prevent="goNext"
     >
-      <FAIcon class="arrow-icon" icon="chevron-right" />
+      <FAIcon
+        class="arrow-icon"
+        icon="chevron-right"
+      />
     </button>
   </Modal>
 </template>
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 61dbda24..f6526d2a 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,8 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearError"
         />
       </div>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 4d91af77..db9b0ba0 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -15,7 +15,11 @@
             class="mobile-nav-button"
             @click.stop.prevent="toggleMobileSidebar()"
           >
-            <FAIcon size="lg" class="button-icon" icon="bars" />
+            <FAIcon
+              size="lg"
+              class="button-icon"
+              icon="bars"
+            />
             <div
               v-if="unreadChatCount"
               class="alert-dot"
@@ -37,7 +41,11 @@
             href="#"
             @click.stop.prevent="openMobileNotifications()"
           >
-            <FAIcon size="lg" class="button-icon" icon="bell" />
+            <FAIcon
+              size="lg"
+              class="button-icon"
+              icon="bell"
+            />
             <div
               v-if="unseenNotificationsCount"
               class="alert-dot"
@@ -59,7 +67,11 @@
           class="mobile-nav-button"
           @click.stop.prevent="closeMobileNotifications()"
         >
-          <FAIcon size="lg" class="button-icon" icon="times" />
+          <FAIcon
+            size="lg"
+            class="button-icon"
+            icon="times"
+          />
         </a>
       </div>
       <div
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index f3e131ff..4755d7b7 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -7,13 +7,23 @@
             :to="{ name: timelinesRoute }"
             :class="onTimelineRoute && 'router-link-active'"
           >
-            <FAIcon fixed-width size="lg" class="button-icon" icon="home" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="home"
+            />
             {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="bell" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="bell"
+            />
             {{ $t("nav.interactions") }}
           </router-link>
         </li>
@@ -25,13 +35,23 @@
             >
               {{ unreadChatCount }}
             </div>
-            <FAIcon fixed-width size="lg" class="button-icon" icon="comments" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="comments"
+            />
             {{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="user-plus" />
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="user-plus"
+            />
             {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
@@ -43,7 +63,12 @@
         </li>
         <li>
           <router-link :to="{ name: 'about' }">
-            <FAIcon fixed-width size="lg" class="button-icon" icon="info-circle" />{{ $t("nav.about") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon"
+              icon="info-circle"
+            />{{ $t("nav.about") }}
           </router-link>
         </li>
       </ul>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 857727a4..b609ae04 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -18,7 +18,10 @@
         href="#"
         class="unmute"
         @click.prevent="toggleMute"
-      ><FAIcon class="button-icon" icon="eye-slash" /></a>
+      ><FAIcon
+        class="button-icon"
+        icon="eye-slash"
+      /></a>
     </div>
     <div
       v-else
@@ -60,26 +63,39 @@
               :title="'@'+notification.from_profile.screen_name"
             >{{ notification.from_profile.name }}</span>
             <span v-if="notification.type === 'like'">
-              <FAIcon class="type-icon" icon="star" />
+              <FAIcon
+                class="type-icon"
+                icon="star"
+              />
               <small>{{ $t('notifications.favorited_you') }}</small>
             </span>
             <span v-if="notification.type === 'repeat'">
               <FAIcon
-                class="type-icon" icon="retweet"
+                class="type-icon"
+                icon="retweet"
                 :title="$t('tool_tip.repeat')"
               />
               <small>{{ $t('notifications.repeated_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow'">
-              <FAIcon class="type-icon" icon="user-plus" />
+              <FAIcon
+                class="type-icon"
+                icon="user-plus"
+              />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
             <span v-if="notification.type === 'follow_request'">
-              <FAIcon class="type-icon" icon="user" />
+              <FAIcon
+                class="type-icon"
+                icon="user"
+              />
               <small>{{ $t('notifications.follow_request') }}</small>
             </span>
             <span v-if="notification.type === 'move'">
-              <FAIcon class="type-icon" icon="suitcase-rolling" />
+              <FAIcon
+                class="type-icon"
+                icon="suitcase-rolling"
+              />
               <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
             <span v-if="notification.type === 'pleroma:emoji_reaction'">
@@ -120,7 +136,10 @@
             v-if="needMute"
             href="#"
             @click.prevent="toggleMute"
-          ><FAIcon class="button-icon" icon="eye-slash" /></a>
+          ><FAIcon
+            class="button-icon"
+            icon="eye-slash"
+          /></a>
         </span>
         <div
           v-if="notification.type === 'follow' || notification.type === 'follow_request'"
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 57972854..bd875cca 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -61,7 +61,11 @@
           v-else
           class="new-status-notification text-center panel-footer"
         >
-          <FAIcon icon="circle-notch" spin size="lg"/>
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 9bf3ab32..b15e7d38 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="panel-loading">
     <span class="loading-text">
-      <FAIcon icon="circle-notch" spin size="3x"/>
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="3x"
+      />
       {{ $t('general.loading') }}
     </span>
   </div>
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index f3e7a716..e598cf3b 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -36,7 +36,10 @@
       class="add-option faint"
       @click="addOption"
     >
-      <FAIcon icon="plus" size="sm"/>
+      <FAIcon
+        icon="plus"
+        size="sm"
+      />
 
       {{ $t("polls.add_option") }}
     </a>
@@ -57,7 +60,10 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down"/>
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div
@@ -85,7 +91,10 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down"/>
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
     </div>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 3cd9e7a5..9cf38a9a 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -15,7 +15,7 @@
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
       >
-        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'"/>
+        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
       </div>
       <div class="form-group">
         <i18n
@@ -200,7 +200,10 @@
                   {{ $t(`post_status.content_type["${postFormat}"]`) }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down"/>
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
           <div
@@ -242,7 +245,7 @@
               class="btn btn-default"
               @click="showEmojiPicker"
             >
-              <FAIcon icon="smile-beam"/>
+              <FAIcon icon="smile-beam" />
             </div>
           </div>
           <div
@@ -299,7 +302,8 @@
           class="media-upload-wrapper"
         >
           <FAIcon
-            class="button-icon" icon="times"
+            class="button-icon"
+            icon="times"
             @click="removeMediaFile(file)"
           />
           <attachment
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 3e15f30b..706c6b81 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-    <FAIcon
-      :class="classes"
-      class="RetweetButton button-icon -interactive"
-      icon="retweet"
-      size="lg"
-      :spin="animated"
-      :title="$t('tool_tip.repeat')"
-      @click.prevent="retweet()"
-    />
+      <FAIcon
+        :class="classes"
+        class="RetweetButton button-icon -interactive"
+        icon="retweet"
+        size="lg"
+        :spin="animated"
+        :title="$t('tool_tip.repeat')"
+        @click.prevent="retweet()"
+      />
       <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
     </template>
     <template v-else>
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d490f8ee..a43af23b 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -2,24 +2,32 @@
   <div
     v-if="!showNothing"
     class="ScopeSelector"
-    >
+  >
     <span
       v-if="showDirect"
       class="scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
-      >
-      <FAIcon icon="envelope" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="envelope"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
-      class="scope"
       v-if="showPrivate"
+      class="scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
-      >
-      <FAIcon icon="lock" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="lock"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
       v-if="showUnlisted"
@@ -27,8 +35,12 @@
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
-      >
-      <FAIcon icon="lock-open" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="lock-open"
+        class="button-icon"
+        size="lg"
+      />
     </span>
     <span
       v-if="showPublic"
@@ -36,8 +48,12 @@
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
-      >
-      <FAIcon icon="globe" class="button-icon" size="lg" />
+    >
+      <FAIcon
+        icon="globe"
+        class="button-icon"
+        size="lg"
+      />
     </span>
   </div>
 </template>
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index d32f48d9..665390f9 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -24,7 +24,11 @@
       v-if="loading"
       class="text-center loading-icon"
     >
-      <FAIcon icon="circle-notch" spin size="lg"/>
+      <FAIcon
+        icon="circle-notch"
+        spin
+        size="lg"
+      />
     </div>
     <div v-else-if="loaded">
       <div class="search-nav-heading">
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index fbbbbfe0..442e91b2 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -7,11 +7,11 @@
         class="nav-icon"
         :title="$t('nav.search')"
       ><FAIcon
-         fixed-width
-         size="lg"
-         class="button-icon"
-         icon="search"
-         @click.prevent.stop="toggleHidden"
+        fixed-width
+        size="lg"
+        class="button-icon"
+        icon="search"
+        @click.prevent.stop="toggleHidden"
       /></a>
       <template v-else>
         <input
@@ -30,7 +30,7 @@
           <FAIcon
             fixed-width
             icon="search"
-            />
+          />
         </button>
         <span>
           <FAIcon
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index ff1a129b..813dc4cd 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -53,7 +53,10 @@
             <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
             <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
           </select>
-          <FAIcon class="select-down-icon" icon="chevron-down" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 99d3a0dc..c1d0d0ec 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -103,7 +103,10 @@
                   {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </li>
@@ -127,7 +130,10 @@
                   {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
                 </option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </li>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 773c77de..5a659fc8 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -169,7 +169,8 @@
         <FAIcon
           v-if="!isDefaultAvatar && pickAvatarBtnVisible"
           :title="$t('settings.reset_avatar')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetAvatar"
         />
@@ -197,7 +198,8 @@
         <FAIcon
           v-if="!isDefaultBanner"
           :title="$t('settings.reset_profile_banner')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBanner"
         />
@@ -233,7 +235,8 @@
       >
         Error: {{ bannerUploadError }}
         <FAIcon
-          class="button-icon" icon="times"
+          class="button-icon"
+          icon="times"
           @click="clearUploadError('banner')"
         />
       </div>
@@ -245,7 +248,8 @@
         <FAIcon
           v-if="!isDefaultBackground"
           :title="$t('settings.reset_profile_background')"
-          class="reset-button" icon="times"
+          class="reset-button"
+          icon="times"
           type="button"
           @click="resetBackground"
         />
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 65863c54..20201e18 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -42,22 +42,26 @@
               <FAIcon
                 fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon" icon="reply"
+                class="button-icon"
+                icon="reply"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon" icon="retweet"
+                class="button-icon"
+                icon="retweet"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon" icon="star"
+                class="button-icon"
+                icon="star"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cRed)"
-                class="button-icon" icon="times"
+                class="button-icon"
+                icon="times"
               />
             </div>
           </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 9cc1c392..280e1955 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -80,7 +80,10 @@
                     {{ style[0] || style.name }}
                   </option>
                 </select>
-                <FAIcon class="select-down-icon" icon="chevron-down" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
               </label>
             </div>
           </template>
@@ -907,7 +910,10 @@
                     {{ $t('settings.style.shadows.components.' + shadow) }}
                   </option>
                 </select>
-                <FAIcon class="select-down-icon" icon="chevron-down" />
+                <FAIcon
+                  class="select-down-icon"
+                  icon="chevron-down"
+                />
               </label>
             </div>
             <div class="override">
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 32220ae8..78f0e544 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -78,35 +78,50 @@
               {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
             </option>
           </select>
-          <FAIcon icon="chevron-down" class="select-down-icon" />
+          <FAIcon
+            icon="chevron-down"
+            class="select-down-icon"
+          />
         </label>
         <button
           class="btn btn-default"
           :disabled="!ready || !present"
           @click="del"
         >
-          <FAIcon fixed-width icon="times" />
+          <FAIcon
+            fixed-width
+            icon="times"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveUpValid"
           @click="moveUp"
         >
-          <FAIcon fixed-width icon="chevron-up" />
+          <FAIcon
+            fixed-width
+            icon="chevron-up"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="!moveDnValid"
           @click="moveDn"
         >
-          <FAIcon fixed-width icon="chevron-down" />
+          <FAIcon
+            fixed-width
+            icon="chevron-down"
+          />
         </button>
         <button
           class="btn btn-default"
           :disabled="usingFallback"
           @click="add"
         >
-          <FAIcon fixed-width icon="plus" />
+          <FAIcon
+            fixed-width
+            icon="plus"
+          />
         </button>
       </div>
       <div
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index fbdb2441..2a4d794a 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -36,7 +36,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $t("login.login") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="sign-in-alt"
+            /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +49,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: timelinesRoute }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $t("nav.timelines") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="home"
+            /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li
@@ -55,7 +65,12 @@
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $t("nav.chats") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="comments"
+            /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
               class="badge badge-notification unread-chat-count"
@@ -68,7 +83,12 @@
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $t("nav.interactions") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="bell"
+            /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li
@@ -76,7 +96,12 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.friend_requests") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="user-plus"
+            /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -90,7 +115,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $t("shoutbox.title") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="bullhorn"
+            /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>
@@ -100,7 +130,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'search' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="search" /> {{ $t("nav.search") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="search"
+            /> {{ $t("nav.search") }}
           </router-link>
         </li>
         <li
@@ -108,7 +143,12 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.who_to_follow") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="user-plus"
+            /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
@@ -116,12 +156,22 @@
             href="#"
             @click="openSettingsModal"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="cog" /> {{ $t("settings.settings") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="cog"
+            /> {{ $t("settings.settings") }}
           </a>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
-            <FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $t("nav.about") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="info-circle"
+            /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -132,7 +182,12 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="tachometer-alt"
+            /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -143,7 +198,12 @@
             href="#"
             @click="doLogout"
           >
-            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $t("login.logout") }}
+            <FAIcon
+              size="lg"
+              fixed-width
+              class="button-icon"
+              icon="sign-out-alt"
+            /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b9b967cc..c94862d4 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -13,7 +13,7 @@
       <span
         class="button-icon"
         @click="clearError"
-        >
+      >
         <FAIcon icon="times" />
       </span>
     </div>
@@ -51,8 +51,12 @@
           href="#"
           class="unmute button-icon"
           @click.prevent="toggleMute"
-          >
-          <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+        >
+          <FAIcon
+            icon="eye-slash"
+            class="button-icon"
+            size="lg"
+          />
         </a>
       </div>
     </template>
@@ -61,7 +65,10 @@
         v-if="showPinned"
         class="pin"
       >
-        <FAIcon icon="thumbtack" class="faint" />
+        <FAIcon
+          icon="thumbtack"
+          class="faint"
+        />
         <span class="faint">{{ $t('status.pinned') }}</span>
       </div>
       <div
@@ -177,8 +184,12 @@
                   v-if="status.visibility"
                   class="visibility-icon"
                   :title="status.visibility | capitalize"
-                  >
-                  <FAIcon class="button-icon" :icon="visibilityIcon(status.visibility)" size="lg" />
+                >
+                  <FAIcon
+                    class="button-icon"
+                    :icon="visibilityIcon(status.visibility)"
+                    size="lg"
+                  />
                 </span>
                 <a
                   v-if="!status.is_local && !isPreview"
@@ -187,7 +198,11 @@
                   class="source_url"
                   title="Source"
                 >
-                  <FAIcon class="button-icon" icon="external-link-square-alt" size="lg" />
+                  <FAIcon
+                    class="button-icon"
+                    icon="external-link-square-alt"
+                    size="lg"
+                  />
                 </a>
                 <a
                   v-if="expandable && !isPreview"
@@ -195,14 +210,22 @@
                   title="Expand"
                   @click.prevent="toggleExpanded"
                 >
-                  <FAIcon class="button-icon" icon="plus-square" size="lg" />
+                  <FAIcon
+                    class="button-icon"
+                    icon="plus-square"
+                    size="lg"
+                  />
                 </a>
                 <a
                   v-if="unmuted"
                   href="#"
                   @click.prevent="toggleMute"
                 >
-                  <FAIcon icon="eye-slash" class="button-icon" size="lg" />
+                  <FAIcon
+                    icon="eye-slash"
+                    class="button-icon"
+                    size="lg"
+                  />
                 </a>
               </span>
             </div>
@@ -230,7 +253,7 @@
                       icon="reply"
                       size="lg"
                       flip="horizontal"
-                      />
+                    />
                     <span
                       class="faint-link reply-to-text"
                     >
@@ -358,7 +381,6 @@
               @onSuccess="clearError"
             />
           </div>
-
         </div>
       </div>
       <div
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index f6432687..8237ce00 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -27,7 +27,11 @@
         v-else
         class="status-preview-no-content"
       >
-        <FAIcon icon="circle-notch" spin size="2x"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="2x"
+        />
       </div>
     </div>
   </Popover>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index ab17cbbc..aaf0349c 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -92,7 +92,11 @@
         v-else
         class="new-status-notification text-center panel-footer"
       >
-        <FAIcon icon="circle-notch" spin size="lg"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="lg"
+        />
       </div>
     </div>
   </div>
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 1e546fae..8099ddd5 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -16,27 +16,52 @@
       <ul>
         <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="home" />{{ $t("nav.timeline") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="home"
+            />{{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'bookmarks'}">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="bookmark" />{{ $t("nav.bookmarks") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="bookmark"
+            />{{ $t("nav.bookmarks") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="envelope" />{{ $t("nav.dms") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="envelope"
+            />{{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'public-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="users" />{{ $t("nav.public_tl") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="users"
+            />{{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
-            <FAIcon fixed-width size="lg" class="button-icon " icon="globe" />{{ $t("nav.twkn") }}
+            <FAIcon
+              fixed-width
+              size="lg"
+              class="button-icon "
+              icon="globe"
+            />{{ $t("nav.twkn") }}
           </router-link>
         </li>
       </ul>
@@ -46,7 +71,10 @@
       class="title timeline-menu-title"
     >
       <span>{{ timelineName() }}</span>
-      <FAIcon size="sm" icon="chevron-down" />
+      <FAIcon
+        size="sm"
+        icon="chevron-down"
+      />
     </div>
   </Popover>
 </template>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6c35c781..c5f10b75 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -21,7 +21,11 @@
               :user="user"
             />
             <div class="user-info-avatar-link-overlay">
-              <FAIcon class="button-icon" icon="search-plus" size="lg" />
+              <FAIcon
+                class="button-icon"
+                icon="search-plus"
+                size="lg"
+              />
             </div>
           </a>
           <router-link
@@ -56,7 +60,10 @@
                 target="_blank"
                 class="external-link-button"
               >
-                <FAIcon class="icon" icon="external-link-alt" />
+                <FAIcon
+                  class="icon"
+                  icon="external-link-alt"
+                />
               </a>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
@@ -87,7 +94,11 @@
                 </span>
               </template>
               <span v-if="user.locked">
-               <FAIcon class="lock-icon" icon="lock" size="sm"/>
+                <FAIcon
+                  class="lock-icon"
+                  icon="lock"
+                  size="sm"
+                />
               </span>
               <span
                 v-if="!mergedConfig.hideUserStats && !hideBio"
@@ -136,7 +147,10 @@
                 <option value="striped">Striped bg</option>
                 <option value="side">Side stripe</option>
               </select>
-              <FAIcon class="select-down-icon" icon="chevron-down" />
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
             </label>
           </div>
         </div>
@@ -162,8 +176,15 @@
                 :title="$t('user_card.unsubscribe')"
               >
                 <FALayers>
-                  <FAIcon icon="rss" transform="left-5 shrink-6 up-3 rotate-20" flip="horizontal"/>
-                  <FAIcon icon="rss" transform="right-5 shrink-6 up-3 rotate-20"/>
+                  <FAIcon
+                    icon="rss"
+                    transform="left-5 shrink-6 up-3 rotate-20"
+                    flip="horizontal"
+                  />
+                  <FAIcon
+                    icon="rss"
+                    transform="right-5 shrink-6 up-3 rotate-20"
+                  />
                   <FAIcon icon="bell" />
                 </FALayers>
               </ProgressButton>
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index dd6977d2..95673733 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -31,7 +31,11 @@
         </div>
       </div>
       <div v-else>
-        <FAIcon icon="circle-notch" spin size="3x"/>
+        <FAIcon
+          icon="circle-notch"
+          spin
+          size="3x"
+        />
       </div>
     </div>
   </Popover>

From 1b50d700aa496fdf9e7e774cd7d6b8835b91d13f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 00:34:42 +0300
Subject: [PATCH 12/19] bye bye fontello

---
 build/webpack.base.conf.js                   |  10 -
 package.json                                 |   1 -
 src/components/media_upload/media_upload.vue |  10 -
 static/fontello.json                         | 416 -------------------
 4 files changed, 437 deletions(-)
 delete mode 100644 static/fontello.json

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index ef40333c..d987eff1 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -3,7 +3,6 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
-var FontelloPlugin = require("fontello-webpack-plugin")
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -94,15 +93,6 @@ module.exports = {
     new ServiceWorkerWebpackPlugin({
       entry: path.join(__dirname, '..', 'src/sw.js'),
       filename: 'sw-pleroma.js'
-    }),
-    new FontelloPlugin({
-      config: require('../static/fontello.json'),
-      host: 'https://fontello.com',
-      name: 'fontello',
-      output: {
-        css: 'static/[name].' + now + '.css',  // [hash] is not supported. Use the current timestamp instead for versioning.
-        font: 'static/font/[name].' + now + '.[ext]'
-      }
     })
   ]
 }
diff --git a/package.json b/package.json
index 6bc285c8..14738c3e 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,6 @@
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "file-loader": "^3.0.1",
-    "fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^3.0.0",
     "http-proxy-middleware": "^0.17.2",
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 15b2b8e4..88251a26 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -43,15 +43,5 @@
   .new-icon {
     cursor: pointer;
   }
-
-  .progress-icon {
-    display: inline-block;
-    line-height: 0;
-    &::before {
-      /* Overriding fontello to achieve the perfect speeeen */
-      margin: 0;
-      line-height: 0;
-    }
-  }
 }
  </style>
diff --git a/static/fontello.json b/static/fontello.json
deleted file mode 100644
index b0136fd9..00000000
--- a/static/fontello.json
+++ /dev/null
@@ -1,416 +0,0 @@
-{
-  "name": "",
-  "css_prefix_text": "icon-",
-  "css_use_suffix": false,
-  "hinting": true,
-  "units_per_em": 1000,
-  "ascent": 857,
-  "glyphs": [
-    {
-      "uid": "9bd60140934a1eb9236fd7a8ab1ff6ba",
-      "css": "spin4",
-      "code": 59444,
-      "src": "fontelico"
-    },
-    {
-      "uid": "5211af474d3a9848f67f945e2ccaf143",
-      "css": "cancel",
-      "code": 59392,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "eeec3208c90b7b48e804919d0d2d4a41",
-      "css": "upload",
-      "code": 59393,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "2a6740fc2f9d0edea54205963f662594",
-      "css": "spin3",
-      "code": 59442,
-      "src": "fontelico"
-    },
-    {
-      "uid": "c6be5a58ee4e63a5ec399c2b0d15cf2c",
-      "css": "reply",
-      "code": 61714,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "474656633f79ea2f1dad59ff63f6bf07",
-      "css": "star",
-      "code": 59394,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d17030afaecc1e1c22349b99f3c4992a",
-      "css": "star-empty",
-      "code": 59395,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "09feb4465d9bd1364f4e301c9ddbaa92",
-      "css": "retweet",
-      "code": 59396,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "7fd683b2c518ceb9e5fa6757f2276faa",
-      "css": "eye-off",
-      "code": 59397,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "73ffeb70554099177620847206c12457",
-      "css": "binoculars",
-      "code": 61925,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e99461abfef3923546da8d745372c995",
-      "css": "cog",
-      "code": 59399,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "1bafeeb1808a5fe24484c7890096901a",
-      "css": "user-plus",
-      "code": 62004,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "559647a6f430b3aeadbecd67194451dd",
-      "css": "menu",
-      "code": 61641,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "0d20938846444af8deb1920dc85a29fb",
-      "css": "logout",
-      "code": 59400,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ccddff8e8670dcd130e3cb55fdfc2fd0",
-      "css": "down-open",
-      "code": 59401,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "44b9e75612c5fad5505edd70d071651f",
-      "css": "attach",
-      "code": 59402,
-      "src": "entypo"
-    },
-    {
-      "uid": "e15f0d620a7897e2035c18c80142f6d9",
-      "css": "link-ext",
-      "code": 61582,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e35de5ea31cd56970498e33efbcb8e36",
-      "css": "link-ext-alt",
-      "code": 61583,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "381da2c2f7fd51f8de877c044d7f439d",
-      "css": "picture",
-      "code": 59403,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "872d9516df93eb6b776cc4d94bd97dac",
-      "css": "video",
-      "code": 59404,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "399ef63b1e23ab1b761dfbb5591fa4da",
-      "css": "right-open",
-      "code": 59405,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d870630ff8f81e6de3958ecaeac532f2",
-      "css": "left-open",
-      "code": 59406,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "fe6697b391355dec12f3d86d6d490397",
-      "css": "up-open",
-      "code": 59407,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "9c1376672bb4f1ed616fdd78a23667e9",
-      "css": "comment-empty",
-      "code": 61669,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ccc2329632396dc096bb638d4b46fb98",
-      "css": "mail-alt",
-      "code": 61664,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "c1f1975c885aa9f3dad7810c53b82074",
-      "css": "lock",
-      "code": 59409,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "05376be04a27d5a46e855a233d6e8508",
-      "css": "lock-open-alt",
-      "code": 61758,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "197375a3cea8cb90b02d06e4ddf1433d",
-      "css": "globe",
-      "code": 59410,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "b3a9e2dab4d19ea3b2f628242c926bfe",
-      "css": "brush",
-      "code": 59411,
-      "src": "iconic"
-    },
-    {
-      "uid": "9dd9e835aebe1060ba7190ad2b2ed951",
-      "css": "search",
-      "code": 59398,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ca90da02d2c6a3183f2458e4dc416285",
-      "css": "adjust",
-      "code": 59414,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5e2ab018e3044337bcef5f7e94098ea1",
-      "css": "thumbs-up-alt",
-      "code": 61796,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "c76b7947c957c9b78b11741173c8349b",
-      "css": "attention",
-      "code": 59412,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "1a5cfa186647e8c929c2b17b9fc4dac1",
-      "css": "plus-squared",
-      "code": 61694,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "44e04715aecbca7f266a17d5a7863c68",
-      "css": "plus",
-      "code": 59413,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "41087bc74d4b20b55059c60a33bf4008",
-      "css": "edit",
-      "code": 59415,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5717236f6134afe2d2a278a5c9b3927a",
-      "css": "play-circled",
-      "code": 61764,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d35a1d35efeb784d1dc9ac18b9b6c2b6",
-      "css": "pencil",
-      "code": 59416,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "266d5d9adf15a61800477a5acf9a4462",
-      "css": "chart-bar",
-      "code": 59419,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d862a10e1448589215be19702f98f2c1",
-      "css": "smile",
-      "code": 61720,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "671f29fa10dda08074a4c6a341bb4f39",
-      "css": "bell-alt",
-      "code": 61683,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5bb103cd29de77e0e06a52638527b575",
-      "css": "wrench",
-      "code": 59418,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5b0772e9484a1a11646793a82edd622a",
-      "css": "pin",
-      "code": 59417,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "22411a88489225a018f68db737de3c77",
-      "css": "ellipsis",
-      "code": 61761,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M214 411V518Q214 540 199 556T161 571H54Q31 571 16 556T0 518V411Q0 388 16 373T54 357H161Q183 357 199 373T214 411ZM500 411V518Q500 540 484 556T446 571H339Q317 571 301 556T286 518V411Q286 388 301 373T339 357H446Q469 357 484 373T500 411ZM786 411V518Q786 540 770 556T732 571H625Q603 571 587 556T571 518V411Q571 388 587 373T625 357H732Q755 357 770 373T786 411Z",
-        "width": 785.7
-      },
-      "search": [
-        "ellipsis"
-      ]
-    },
-    {
-      "uid": "0bef873af785ead27781fdf98b3ae740",
-      "css": "bell-ringing-o",
-      "code": 59408,
-      "src": "custom_icons",
-      "selected": true,
-      "svg": {
-        "path": "M497.8 0C468.3 0 444.4 23.9 444.4 53.3 444.4 61.1 446.1 68.3 448.9 75 301.7 96.7 213.3 213.3 213.3 320 213.3 588.3 117.8 712.8 35.6 782.2 35.6 821.1 67.8 853.3 106.7 853.3H355.6C355.6 931.7 419.4 995.6 497.8 995.6S640 931.7 640 853.3H888.9C927.8 853.3 960 821.1 960 782.2 877.8 712.8 782.2 588.3 782.2 320 782.2 213.3 693.9 96.7 546.7 75 549.4 68.3 551.1 61.1 551.1 53.3 551.1 23.9 527.2 0 497.8 0ZM189.4 44.8C108.4 118.6 70.5 215.1 71.1 320.2L142.2 319.8C141.7 231.2 170.4 158.3 237.3 97.4L189.4 44.8ZM806.2 44.8L758.3 97.4C825.2 158.3 853.9 231.2 853.3 319.8L924.4 320.2C925.1 215.1 887.2 118.6 806.2 44.8ZM408.9 844.4C413.9 844.4 417.8 848.3 417.8 853.3 417.8 897.2 453.9 933.3 497.8 933.3 502.8 933.3 506.7 937.2 506.7 942.2S502.8 951.1 497.8 951.1C443.9 951.1 400 907.2 400 853.3 400 848.3 403.9 844.4 408.9 844.4Z",
-        "width": 1000
-      },
-      "search": [
-        "bell-ringing-o"
-      ]
-    },
-    {
-      "uid": "0b2b66e526028a6972d51a6f10281b4b",
-      "css": "zoom-in",
-      "code": 59420,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "0bda4bc779d4c32623dec2e43bd67ee8",
-      "css": "gauge",
-      "code": 61668,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "31972e4e9d080eaa796290349ae6c1fd",
-      "css": "users",
-      "code": 59421,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
-      "css": "info-circled",
-      "code": 59423,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "w3nzesrlbezu6f30q7ytyq919p6gdlb6",
-      "css": "home-2",
-      "code": 59425,
-      "src": "typicons"
-    },
-    {
-      "uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
-      "css": "chat",
-      "code": 59422,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "3a00327e61b997b58518bd43ed83c3df",
-      "css": "login",
-      "code": 59424,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "f3ebd6751c15a280af5cc5f4a764187d",
-      "css": "arrow-curved",
-      "code": 59426,
-      "src": "iconic"
-    },
-    {
-      "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
-      "css": "link",
-      "code": 59427,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "4aad6bb50b02c18508aae9cbe14e784e",
-      "css": "share",
-      "code": 61920,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "8b80d36d4ef43889db10bc1f0dc9a862",
-      "css": "user",
-      "code": 59428,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "12f4ece88e46abd864e40b35e05b11cd",
-      "css": "ok",
-      "code": 59431,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "4109c474ff99cad28fd5a2c38af2ec6f",
-      "css": "filter",
-      "code": 61616,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
-      "css": "download",
-      "code": 59429,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "f04a5d24e9e659145b966739c4fde82a",
-      "css": "bookmark",
-      "code": 59430,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "2f5ef6f6b7aaebc56458ab4e865beff5",
-      "css": "bookmark-empty",
-      "code": 61591,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "9ea0a737ccc45d6c510dcbae56058849",
-      "css": "music",
-      "code": 59432,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "1b5a5d7b7e3c71437f5a26befdd045ed",
-      "css": "doc",
-      "code": 59433,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "98d9c83c1ee7c2c25af784b518c522c5",
-      "css": "block",
-      "code": 59434,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "3e674995cacc2b09692c096ea7eb6165",
-      "css": "megaphone",
-      "code": 59435,
-      "src": "fontawesome"
-    }
-  ]
-}
\ No newline at end of file

From eb04ed865e1afd7cede44017deb13298a8aa76dd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Oct 2020 01:56:21 +0300
Subject: [PATCH 13/19] fontello aftermath

---
 yarn.lock | 180 +++---------------------------------------------------
 1 file changed, 7 insertions(+), 173 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e7ba92e4..86cd420f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1182,13 +1182,6 @@ agent-base@2:
     extend "~3.0.0"
     semver "~5.0.1"
 
-agent-base@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
-  integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
-  dependencies:
-    es6-promisify "^5.0.0"
-
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -1694,11 +1687,6 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
-big-integer@^1.6.17:
-  version "1.6.48"
-  resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.48.tgz#8fd88bd1632cba4a1c8c3e3d7159f08bb95b4b9e"
-  integrity sha512-j51egjPa7/i+RdiRuJbPdJ2FIUYYPhvYLjzoYbcMMm62ooO6F94fETG4MTs46zPAF9Brs04OajboA/qTGuz78w==
-
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -1711,14 +1699,6 @@ binary-extensions@^1.0.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
 
-binary@~0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/binary/-/binary-0.3.0.tgz#9f60553bc5ce8c3386f3b553cff47462adecaa79"
-  integrity sha1-n2BVO8XOjDOG87VTz/R0Yq3sqnk=
-  dependencies:
-    buffers "~0.1.1"
-    chainsaw "~0.1.0"
-
 blob@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.5.tgz#d680eeef25f8cd91ad533f5b01eed48e64caf683"
@@ -1731,11 +1711,6 @@ bluebird@^3.5.3:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.4.tgz#d6cc661595de30d5b3af5fcedd3c0b3ef6ec5714"
 
-bluebird@~3.4.1:
-  version "3.4.7"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
-  integrity sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM=
-
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
@@ -1913,11 +1888,6 @@ buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
 
-buffer-indexof-polyfill@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.1.tgz#a9fb806ce8145d5428510ce72f278bb363a638bf"
-  integrity sha1-qfuAbOgUXVQoUQznLyeLs2OmOL8=
-
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -1930,11 +1900,6 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffers@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
-  integrity sha1-skV5w77U1tOWru5tmorn9Ugqt7s=
-
 builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -2101,13 +2066,6 @@ chai@^3.5.0:
     deep-eql "^0.1.3"
     type-detect "^1.0.0"
 
-chainsaw@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/chainsaw/-/chainsaw-0.1.0.tgz#5eab50b28afe58074d0d58291388828b5e5fbc98"
-  integrity sha1-XqtQsor+WAdNDVgpE4iCi15fvJg=
-  dependencies:
-    traverse ">=0.3.0 <0.4"
-
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -3043,13 +3001,6 @@ domutils@^1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
-duplexer2@~0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
-  integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
-  dependencies:
-    readable-stream "^2.0.2"
-
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"
@@ -3117,13 +3068,6 @@ encodeurl@~1.0.1, encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  integrity sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=
-  dependencies:
-    iconv-lite "~0.4.13"
-
 end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@@ -3214,18 +3158,6 @@ es-to-primitive@^1.2.0:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es6-promise@^4.0.3:
-  version "4.2.8"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
-  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
-
-es6-promisify@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/es6-promisify/-/es6-promisify-5.0.0.tgz#5109d62f3e56ea967c4b63505aef08291c8a5203"
-  integrity sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=
-  dependencies:
-    es6-promise "^4.0.3"
-
 escalade@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
@@ -3831,18 +3763,6 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "=3.1.0"
 
-"fontello-webpack-plugin@https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186":
-  version "0.4.8"
-  resolved "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186"
-  dependencies:
-    form-data "^2.1.2"
-    html-webpack-plugin "^3.2.0"
-    https-proxy-agent "^2.1.1"
-    lodash "^4.17.4"
-    node-fetch "^1.6.3"
-    unzipper "^0.10.5"
-    webpack-sources "^0.2.0"
-
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -3857,15 +3777,6 @@ forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
-form-data@^2.1.2:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.5.1.tgz#f2cbec57b5e59e23716e128fe44d4e5dd23895f4"
-  integrity sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==
-  dependencies:
-    asynckit "^0.4.0"
-    combined-stream "^1.0.6"
-    mime-types "^2.1.12"
-
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -3927,16 +3838,6 @@ fsevents@^1.2.7:
     nan "^2.12.1"
     node-pre-gyp "^0.12.0"
 
-fstream@^1.0.12:
-  version "1.0.12"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
-  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    inherits "~2.0.0"
-    mkdirp ">=0.5 0"
-    rimraf "2"
-
 ftp@~0.3.10:
   version "0.3.10"
   resolved "https://registry.yarnpkg.com/ftp/-/ftp-0.3.10.tgz#9197d861ad8142f3e63d5a83bfe4c59f7330885d"
@@ -4153,11 +4054,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2:
   version "4.1.15"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
 
-graceful-fs@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
-
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@@ -4341,7 +4237,7 @@ html-tags@^3.1.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
   integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
 
-html-webpack-plugin@^3.0.0, html-webpack-plugin@^3.2.0:
+html-webpack-plugin@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b"
   dependencies:
@@ -4428,21 +4324,13 @@ https-proxy-agent@1:
     debug "2"
     extend "3"
 
-https-proxy-agent@^2.1.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.4.tgz#4ee7a737abd92678a293d9b34a1af4d0d08c787b"
-  integrity sha512-OmvfoQ53WLjtA9HeYP9RNrWMJzzAz1JGaSFr1nijg0PVR1JaD/xbJq1mdEIIlxGpXp9eSe/O2LgU9DJmTPd0Eg==
-  dependencies:
-    agent-base "^4.3.0"
-    debug "^3.1.0"
-
 iconv-lite@0.4.23, iconv-lite@^0.4.4:
   version "0.4.23"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-iconv-lite@^0.4.24, iconv-lite@~0.4.13:
+iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   dependencies:
@@ -4565,7 +4453,7 @@ inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
 
-inherits@^2.0.0, inherits@~2.0.0:
+inherits@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -4883,7 +4771,7 @@ is-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-2.1.0.tgz#cd734a56864e23b956bf4e7c66c396a4c0b22c2d"
   integrity sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==
 
-is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
@@ -5281,11 +5169,6 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
-listenercount@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/listenercount/-/listenercount-1.0.1.tgz#84c8a72ab59c4725321480c975e6508342e70937"
-  integrity sha1-hMinKrWcRyUyFIDJdeZQg0LnCTc=
-
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -6005,7 +5888,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.1, mkdirp@0.5.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
+mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -6152,14 +6035,6 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
-node-fetch@^1.6.3:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-libs-browser@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.0.tgz#c72f60d9d46de08a940dedbb25f3ffa2f9bbaa77"
@@ -7838,13 +7713,6 @@ rfdc@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.1.4.tgz#ba72cc1367a0ccd9cf81a870b3b58bd3ad07f8c2"
 
-rimraf@2:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.0, rimraf@^2.6.1, rimraf@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -8018,7 +7886,7 @@ set-value@^2.0.0:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4, setimmediate@~1.0.4:
+setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -8190,11 +8058,6 @@ sort-keys@^1.0.0:
   dependencies:
     is-plain-obj "^1.0.0"
 
-source-list-map@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
-  integrity sha1-mIkBnRAkzOVc3AaUmDN+9hhqEaE=
-
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
@@ -8234,7 +8097,7 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
-source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.3:
+source-map@^0.5.0, source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
@@ -8791,11 +8654,6 @@ tough-cookie@~2.4.3:
     psl "^1.1.24"
     punycode "^1.4.1"
 
-"traverse@>=0.3.0 <0.4":
-  version "0.3.9"
-  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.3.9.tgz#717b8f220cc0bb7b44e40514c22b2e8bbc70d8b9"
-  integrity sha1-cXuPIgzAu3tE5AUUwisui7xw2Lk=
-
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -9034,22 +8892,6 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-unzipper@^0.10.5:
-  version "0.10.5"
-  resolved "https://registry.yarnpkg.com/unzipper/-/unzipper-0.10.5.tgz#4d189ae6f8af634b26efe1a1817c399e0dd4a1a0"
-  integrity sha512-i5ufkXNjWZYxU/0nKKf6LkvW8kn9YzRvfwuPWjXP+JTFce/8bqeR0gEfbiN2IDdJa6ZU6/2IzFRLK0z1v0uptw==
-  dependencies:
-    big-integer "^1.6.17"
-    binary "~0.3.0"
-    bluebird "~3.4.1"
-    buffer-indexof-polyfill "~1.0.0"
-    duplexer2 "~0.1.4"
-    fstream "^1.0.12"
-    graceful-fs "^4.2.2"
-    listenercount "~1.0.1"
-    readable-stream "~2.3.6"
-    setimmediate "~1.0.4"
-
 upath@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.2.tgz#3db658600edaeeccbe6db5e684d67ee8c2acd068"
@@ -9314,14 +9156,6 @@ webpack-merge@^0.14.1:
     lodash.isplainobject "^3.2.0"
     lodash.merge "^3.3.2"
 
-webpack-sources@^0.2.0:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-0.2.3.tgz#17c62bfaf13c707f9d02c479e0dcdde8380697fb"
-  integrity sha1-F8Yr+vE8cH+dAsR54Nzd6DgGl/s=
-  dependencies:
-    source-list-map "^1.1.1"
-    source-map "~0.5.3"
-
 webpack-sources@^1.1.0, webpack-sources@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"

From b6cf2bcefd5ddd20c11ee4b0d0f94e29e8f59c40 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:31:16 +0200
Subject: [PATCH 14/19] improved the semantics for our icon scale, fixed
 preview, fixed navbar desktop

---
 src/App.scss                                  | 12 ++++--
 src/App.vue                                   |  9 ++--
 src/components/chat_new/chat_new.vue          |  3 +-
 .../extra_buttons/extra_buttons.vue           |  2 +-
 .../favorite_button/favorite_button.vue       |  6 +--
 .../global_notice_list/global_notice_list.vue |  2 +-
 .../image_cropper/image_cropper.vue           |  2 +-
 src/components/login_form/login_form.vue      |  2 +-
 src/components/mfa_form/recovery_form.vue     |  2 +-
 src/components/mfa_form/totp_form.vue         |  2 +-
 src/components/mobile_nav/mobile_nav.vue      |  9 ++--
 src/components/nav_panel/nav_panel.vue        | 41 +++++++------------
 src/components/notification/notification.vue  |  8 ++--
 .../password_reset/password_reset.vue         |  2 +-
 .../post_status_form/post_status_form.vue     | 16 ++++----
 src/components/react_button/react_button.vue  |  3 +-
 src/components/reply_button/reply_button.vue  |  6 +--
 .../retweet_button/retweet_button.vue         |  9 ++--
 .../scope_selector/scope_selector.vue         | 12 ++----
 src/components/search_bar/search_bar.vue      |  6 +--
 .../settings_modal/tabs/profile_tab.vue       |  4 +-
 .../settings_modal/tabs/theme_tab/preview.vue |  8 ++--
 src/components/side_drawer/side_drawer.vue    | 38 ++++++-----------
 src/components/status/status.vue              | 24 ++++-------
 .../timeline_menu/timeline_menu.vue           | 15 +++----
 src/components/user_card/user_card.vue        |  3 +-
 26 files changed, 95 insertions(+), 151 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 06915e16..6884f314 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -812,14 +812,18 @@ nav {
   }
 }
 
-.button-icon {
-  &.svg-inline--fa.fa-lg {
-    display: inline-block;
-    padding: 0 0.3em;
+.fa-scale-110 {
+  &.svg-inline--fa {
     font-size: 1.1em;
   }
 }
 
+.fa-old-padding {
+  &.svg-inline--fa {
+    padding: 0 0.3em;
+  }
+}
+
 @keyframes shakeError {
   0% {
     transform: translateX(0);
diff --git a/src/App.vue b/src/App.vue
index c27f51bf..6e44c7e9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,8 +53,7 @@
           >
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="cog"
               :title="$t('nav.preferences')"
             />
@@ -66,8 +65,7 @@
             target="_blank"
           ><FAIcon
             fixed-width
-            size="lg"
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="tachometer-alt"
             :title="$t('nav.administration')"
           /></a>
@@ -78,8 +76,7 @@
             @click.prevent="logout"
           ><FAIcon
             fixed-width
-            size="lg"
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="sign-out-alt"
             :title="$t('login.logout')"
           /></a>
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 8f02a699..f3894a3a 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -20,8 +20,7 @@
     <div class="input-wrap">
       <div class="input-search">
         <FAIcon
-          size="lg"
-          class="search-icon button-icon"
+          class="search-icon fa-scale-110 fa-old-padding"
           icon="search"
         />
       </div>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 4bf1e62a..f32ea02d 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -107,7 +107,7 @@
     </div>
     <span slot="trigger">
       <FAIcon
-        class="ExtraButtons button-icon"
+        class="ExtraButtons fa-scale-110 fa-old-padding"
         icon="ellipsis-h"
         size="md"
       />
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 6c7bfdab..dfe12f86 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -2,11 +2,10 @@
   <div v-if="loggedIn">
     <FAIcon
       :class="classes"
-      class="FavoriteButton button-icon -interactive"
+      class="FavoriteButton fa-scale-110 fa-old-padding -interactive"
       :title="$t('tool_tip.favorite')"
       :icon="[status.favorited ? 'fas' : 'far', 'star']"
       :spin="animated"
-      size="lg"
       @click.prevent="favorite()"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
@@ -14,10 +13,9 @@
   <div v-else>
     <FAIcon
       :class="classes"
-      class="FavoriteButton button-icon"
+      class="FavoriteButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.favorite')"
       :icon="['far', 'star']"
-      size="lg"
     />
     <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
   </div>
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 06b6af9c..8a33b9eb 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -10,7 +10,7 @@
         {{ $t(notice.messageKey, notice.messageArgs) }}
       </div>
       <FAIcon
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         icon="times"
         @click="closeNotice(notice)"
       />
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 605f7427..75def612 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -43,7 +43,7 @@
       >
         {{ submitErrorMsg }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 4ab5d192..a1f77210 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -77,7 +77,7 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index f6526d2a..78953649 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -55,7 +55,7 @@
       <div class="alert error">
         {{ error }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 0c6412ea..9401cad5 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -58,7 +58,7 @@
         {{ error }}
         <FAIcon
           size="lg"
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index db9b0ba0..d2bc65ab 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -16,8 +16,7 @@
             @click.stop.prevent="toggleMobileSidebar()"
           >
             <FAIcon
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bars"
             />
             <div
@@ -42,8 +41,7 @@
             @click.stop.prevent="openMobileNotifications()"
           >
             <FAIcon
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bell"
             />
             <div
@@ -68,8 +66,7 @@
           @click.stop.prevent="closeMobileNotifications()"
         >
           <FAIcon
-            size="lg"
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="times"
           />
         </a>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 4755d7b7..e7301328 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -9,22 +9,18 @@
           >
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="home"
-            />
-            {{ $t("nav.timelines") }}
+            />{{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="bell"
-            />
-            {{ $t("nav.interactions") }}
+            />{{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if="currentUser && pleromaChatMessagesAvailable">
@@ -37,22 +33,18 @@
             </div>
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="comments"
-            />
-            {{ $t("nav.chats") }}
+            />{{ $t("nav.chats") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="user-plus"
-            />
-            {{ $t("nav.friend_requests") }}
+            />{{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -65,8 +57,7 @@
           <router-link :to="{ name: 'about' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon"
+              class="fa-scale-110"
               icon="info-circle"
             />{{ $t("nav.about") }}
           </router-link>
@@ -94,7 +85,7 @@
   }
 
   .follow-request-count {
-    margin: -6px 10px;
+    vertical-align: bottom;
     background-color: $fallback--bg;
     background-color: var(--input, $fallback--faint);
   }
@@ -126,7 +117,8 @@
 
   a {
     display: block;
-    padding: 0.8em 0.85em;
+    align-items: stretch;
+    padding: 0.9em 1em;
 
     &:hover {
       background-color: $fallback--lightBg;
@@ -156,13 +148,8 @@
     }
   }
 
-  .button-icon {
-    margin-left: -0.1em;
-    margin-right: 0.2em;
-  }
-
-  .button-icon:before {
-    width: 1.1em;
+  .fa-scale-110 {
+    margin-right: 0.8em;
   }
 }
 </style>
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index b609ae04..2bbde108 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -19,7 +19,7 @@
         class="unmute"
         @click.prevent="toggleMute"
       ><FAIcon
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         icon="eye-slash"
       /></a>
     </div>
@@ -137,7 +137,7 @@
             href="#"
             @click.prevent="toggleMute"
           ><FAIcon
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="eye-slash"
           /></a>
         </span>
@@ -157,13 +157,13 @@
           >
             <FAIcon
               icon="check"
-              class="button-icon follow-request-accept"
+              class="fa-scale-110 fa-old-padding follow-request-accept"
               :title="$t('tool_tip.accept_follow_request')"
               @click="approveUser()"
             />
             <FAIcon
               icon="times"
-              class="button-icon follow-request-reject"
+              class="fa-scale-110 fa-old-padding follow-request-reject"
               :title="$t('tool_tip.reject_follow_request')"
               @click="denyUser()"
             />
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 3fe42b84..0deb9ccf 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -63,7 +63,7 @@
           >
             <span>{{ error }}</span>
             <a
-              class="button-icon dismiss"
+              class="fa-scale-110 fa-old-padding dismiss"
               @click.prevent="dismissError()"
             >
               <FAIcon icon="times" />
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9cf38a9a..a427bb98 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -37,7 +37,7 @@
         >
           <span>{{ $t('post_status.scope_notice.public') }}</span>
           <a
-            class="button-icon dismiss"
+            class="fa-scale-110 fa-old-padding dismiss"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -49,7 +49,7 @@
         >
           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
           <a
-            class="button-icon dismiss"
+            class="fa-scale-110 fa-old-padding dismiss"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -61,7 +61,7 @@
         >
           <span>{{ $t('post_status.scope_notice.private') }}</span>
           <a
-            class="button-icon dismiss"
+            class="fa-scale-110 fa-old-padding dismiss"
             @click.prevent="dismissScopeNotice()"
           >
             <FAIcon icon="times" />
@@ -83,7 +83,7 @@
             @click.stop.prevent="togglePreview"
           >
             {{ $t('post_status.preview') }}
-            <i :class="showPreview ? 'icon-left-open' : 'icon-right-open'" />
+            <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
           </a>
           <FAIcon
             v-show="previewLoading"
@@ -289,8 +289,7 @@
       >
         Error: {{ error }}
         <FAIcon
-          class="button-icon"
-          size="lg"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearError"
         />
@@ -302,7 +301,7 @@
           class="media-upload-wrapper"
         >
           <FAIcon
-            class="button-icon"
+            class="fa-scale-110 fa-old-padding"
             icon="times"
             @click="removeMediaFile(file)"
           />
@@ -389,7 +388,6 @@
   }
 
   .preview-toggle {
-    display: flex;
     cursor: pointer;
     user-select: none;
 
@@ -524,7 +522,7 @@
       position: relative;
     }
 
-    .button-icon {
+    .fa-scale-110 fa-old-padding {
       position: absolute;
       margin: 10px;
       margin: .75em;
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 8395d5e3..694e6470 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -38,9 +38,8 @@
     </div>
     <FAIcon
       slot="trigger"
-      class="button-icon add-reaction-button"
+      class="fa-scale-110 fa-old-padding add-reaction-button"
       :icon="['far', 'smile-beam']"
-      size="lg"
       :title="$t('tool_tip.add_reaction')"
     />
   </Popover>
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index ae7b0e26..a0ac8941 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -2,9 +2,8 @@
   <div>
     <FAIcon
       v-if="loggedIn"
-      class="ReplyButton button-icon -interactive"
+      class="ReplyButton fa-scale-110 fa-old-padding -interactive"
       icon="reply"
-      size="lg"
       :title="$t('tool_tip.reply')"
       :class="{'-active': replying}"
       @click.prevent="$emit('toggle')"
@@ -12,8 +11,7 @@
     <FAIcon
       v-else
       icon="reply"
-      size="lg"
-      class="ReplyButton button-icon"
+      class="ReplyButton fa-scale-110 fa-old-padding"
       :title="$t('tool_tip.reply')"
     />
     <span v-if="status.replies_count > 0">
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 706c6b81..b234f3d9 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -3,9 +3,8 @@
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
       <FAIcon
         :class="classes"
-        class="RetweetButton button-icon -interactive"
+        class="RetweetButton fa-scale-110 fa-old-padding -interactive"
         icon="retweet"
-        size="lg"
         :spin="animated"
         :title="$t('tool_tip.repeat')"
         @click.prevent="retweet()"
@@ -15,9 +14,8 @@
     <template v-else>
       <FAIcon
         :class="classes"
-        class="RetweetButton button-icon"
+        class="RetweetButton fa-scale-110 fa-old-padding"
         icon="lock"
-        size="lg"
         :title="$t('timeline.no_retweet_hint')"
       />
     </template>
@@ -25,9 +23,8 @@
   <div v-else-if="!loggedIn">
     <FAIcon
       :class="classes"
-      class="button-icon"
+      class="fa-scale-110 fa-old-padding"
       icon="retweet"
-      size="lg"
       :title="$t('tool_tip.repeat')"
     />
     <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span>
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index a43af23b..a22a4fda 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -12,8 +12,7 @@
     >
       <FAIcon
         icon="envelope"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
     <span
@@ -25,8 +24,7 @@
     >
       <FAIcon
         icon="lock"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
     <span
@@ -38,8 +36,7 @@
     >
       <FAIcon
         icon="lock-open"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
     <span
@@ -51,8 +48,7 @@
     >
       <FAIcon
         icon="globe"
-        class="button-icon"
-        size="lg"
+        class="fa-scale-110 fa-old-padding"
       />
     </span>
   </div>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 442e91b2..f1c3fd7a 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -8,8 +8,7 @@
         :title="$t('nav.search')"
       ><FAIcon
         fixed-width
-        size="lg"
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         icon="search"
         @click.prevent.stop="toggleHidden"
       /></a>
@@ -34,10 +33,9 @@
         </button>
         <span>
           <FAIcon
-            size="lg"
             fixed-width
             icon="times"
-            class="cancel-icon"
+            class="cancel-icon fa-scale-110 fa-old-padding"
             @click.prevent.stop="toggleHidden"
           />
         </span>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 5a659fc8..d62bc392 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -235,7 +235,7 @@
       >
         Error: {{ bannerUploadError }}
         <FAIcon
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearUploadError('banner')"
         />
@@ -286,7 +286,7 @@
         Error: {{ backgroundUploadError }}
         <FAIcon
           size="lg"
-          class="button-icon"
+          class="fa-scale-110 fa-old-padding"
           icon="times"
           @click="clearUploadError('background')"
         />
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 20201e18..3174fd7c 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -42,25 +42,25 @@
               <FAIcon
                 fixed-width
                 style="color: var(--cBlue)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="reply"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cGreen)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="retweet"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cOrange)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="star"
               />
               <FAIcon
                 fixed-width
                 style="color: var(--cRed)"
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="times"
               />
             </div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 2a4d794a..eac0ddb2 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -37,9 +37,8 @@
         >
           <router-link :to="{ name: 'login' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="sign-in-alt"
             /> {{ $t("login.login") }}
           </router-link>
@@ -50,9 +49,8 @@
         >
           <router-link :to="{ name: timelinesRoute }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="home"
             /> {{ $t("nav.timelines") }}
           </router-link>
@@ -66,9 +64,8 @@
             style="position: relative"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="comments"
             /> {{ $t("nav.chats") }}
             <span
@@ -84,9 +81,8 @@
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bell"
             /> {{ $t("nav.interactions") }}
           </router-link>
@@ -97,9 +93,8 @@
         >
           <router-link to="/friend-requests">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="user-plus"
             /> {{ $t("nav.friend_requests") }}
             <span
@@ -116,9 +111,8 @@
         >
           <router-link :to="{ name: 'chat' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="bullhorn"
             /> {{ $t("shoutbox.title") }}
           </router-link>
@@ -131,9 +125,8 @@
         >
           <router-link :to="{ name: 'search' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="search"
             /> {{ $t("nav.search") }}
           </router-link>
@@ -144,9 +137,8 @@
         >
           <router-link :to="{ name: 'who-to-follow' }">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="user-plus"
             /> {{ $t("nav.who_to_follow") }}
           </router-link>
@@ -157,9 +149,8 @@
             @click="openSettingsModal"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="cog"
             /> {{ $t("settings.settings") }}
           </a>
@@ -167,9 +158,8 @@
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="info-circle"
             /> {{ $t("nav.about") }}
           </router-link>
@@ -183,9 +173,8 @@
             target="_blank"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="tachometer-alt"
             /> {{ $t("nav.administration") }}
           </a>
@@ -199,9 +188,8 @@
             @click="doLogout"
           >
             <FAIcon
-              size="lg"
               fixed-width
-              class="button-icon"
+              class="fa-scale-110 fa-old-padding"
               icon="sign-out-alt"
             /> {{ $t("login.logout") }}
           </a>
@@ -284,7 +272,7 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
-  .button-icon:before {
+  .fa-scale-110 fa-old-padding:before {
     width: 1.1em;
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index c94862d4..21412faa 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -11,7 +11,7 @@
     >
       {{ error }}
       <span
-        class="button-icon"
+        class="fa-scale-110 fa-old-padding"
         @click="clearError"
       >
         <FAIcon icon="times" />
@@ -22,7 +22,7 @@
         <small class="status-username">
           <FAIcon
             v-if="muted && retweet"
-            class="button-icon repeat-icon"
+            class="fa-scale-110 fa-old-padding repeat-icon"
             icon="retweet"
           />
           <router-link :to="userProfileLink">
@@ -49,13 +49,12 @@
         </small>
         <a
           href="#"
-          class="unmute button-icon"
+          class="unmute fa-scale-110 fa-old-padding"
           @click.prevent="toggleMute"
         >
           <FAIcon
             icon="eye-slash"
-            class="button-icon"
-            size="lg"
+            class="fa-scale-110 fa-old-padding"
           />
         </a>
       </div>
@@ -186,9 +185,8 @@
                   :title="status.visibility | capitalize"
                 >
                   <FAIcon
-                    class="button-icon"
+                    class="fa-scale-110 fa-old-padding"
                     :icon="visibilityIcon(status.visibility)"
-                    size="lg"
                   />
                 </span>
                 <a
@@ -199,9 +197,8 @@
                   title="Source"
                 >
                   <FAIcon
-                    class="button-icon"
+                    class="fa-scale-110 fa-old-padding"
                     icon="external-link-square-alt"
-                    size="lg"
                   />
                 </a>
                 <a
@@ -211,9 +208,8 @@
                   @click.prevent="toggleExpanded"
                 >
                   <FAIcon
-                    class="button-icon"
+                    class="fa-scale-110 fa-old-padding"
                     icon="plus-square"
-                    size="lg"
                   />
                 </a>
                 <a
@@ -223,8 +219,7 @@
                 >
                   <FAIcon
                     icon="eye-slash"
-                    class="button-icon"
-                    size="lg"
+                    class="fa-scale-110 fa-old-padding"
                   />
                 </a>
               </span>
@@ -249,9 +244,8 @@
                     @click.prevent="gotoOriginal(status.in_reply_to_status_id)"
                   >
                     <FAIcon
-                      class="button-icon"
+                      class="fa-scale-110 fa-old-padding"
                       icon="reply"
-                      size="lg"
                       flip="horizontal"
                     />
                     <span
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 8099ddd5..c46531be 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -18,8 +18,7 @@
           <router-link :to="{ name: 'friends' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="home"
             />{{ $t("nav.timeline") }}
           </router-link>
@@ -28,8 +27,7 @@
           <router-link :to="{ name: 'bookmarks'}">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="bookmark"
             />{{ $t("nav.bookmarks") }}
           </router-link>
@@ -38,8 +36,7 @@
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="envelope"
             />{{ $t("nav.dms") }}
           </router-link>
@@ -48,8 +45,7 @@
           <router-link :to="{ name: 'public-timeline' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="users"
             />{{ $t("nav.public_tl") }}
           </router-link>
@@ -58,8 +54,7 @@
           <router-link :to="{ name: 'public-external-timeline' }">
             <FAIcon
               fixed-width
-              size="lg"
-              class="button-icon "
+              class="fa-scale-110 fa-old-padding "
               icon="globe"
             />{{ $t("nav.twkn") }}
           </router-link>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index c5f10b75..55e231d2 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -22,9 +22,8 @@
             />
             <div class="user-info-avatar-link-overlay">
               <FAIcon
-                class="button-icon"
+                class="fa-scale-110 fa-old-padding"
                 icon="search-plus"
-                size="lg"
               />
             </div>
           </a>

From 7c4af4ce3fe140d8dbe3ff6da55dfd0edcef7778 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:41:42 +0200
Subject: [PATCH 15/19] improved side-drawer alignments

---
 src/components/side_drawer/side_drawer.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index eac0ddb2..c3370a9d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -320,7 +320,6 @@
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
-  margin: 0.2em 0;
 }
 
 .side-drawer ul:last-child {
@@ -331,8 +330,11 @@
   padding: 0;
 
   a {
+    box-sizing: border-box;
     display: block;
-    padding: 0.5em 0.85em;
+    height: 3em;
+    line-height: 2em;
+    padding: 0.5em 0.7em;
 
     &:hover {
       background-color: $fallback--lightBg;

From fc7dfb3b9ecb92d2971ddc7007f708dc664e69f0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:47:42 +0200
Subject: [PATCH 16/19] update & unify the navbars heights

---
 src/components/nav_panel/nav_panel.vue     | 5 ++++-
 src/components/side_drawer/side_drawer.vue | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index e7301328..7308fb1e 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -117,8 +117,11 @@
 
   a {
     display: block;
+    box-sizing: border-box;
     align-items: stretch;
-    padding: 0.9em 1em;
+    height: 3.5em;
+    line-height: 3.5em;
+    padding: 0 1em;
 
     &:hover {
       background-color: $fallback--lightBg;
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index c3370a9d..707c6c3d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -333,8 +333,8 @@
     box-sizing: border-box;
     display: block;
     height: 3em;
-    line-height: 2em;
-    padding: 0.5em 0.7em;
+    line-height: 3em;
+    padding: 0 0.7em;
 
     &:hover {
       background-color: $fallback--lightBg;

From 0ac9d81788a2cb92cec54ae08264b52ea4c93b1c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 21:55:08 +0200
Subject: [PATCH 17/19] fix settings tabs on mobile, update follow request
 badge

---
 src/components/nav_panel/nav_panel.vue        | 2 +-
 src/components/side_drawer/side_drawer.vue    | 7 +++++--
 src/components/tab_switcher/tab_switcher.scss | 2 +-
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 7308fb1e..8b299bf2 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -85,7 +85,7 @@
   }
 
   .follow-request-count {
-    vertical-align: bottom;
+    vertical-align: baseline;
     background-color: $fallback--bg;
     background-color: var(--input, $fallback--faint);
   }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 707c6c3d..ed1ccb7d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -272,9 +272,12 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
-  .fa-scale-110 fa-old-padding:before {
-    width: 1.1em;
+  .follow-request-count {
+    vertical-align: baseline;
+    background-color: $fallback--bg;
+    background-color: var(--input, $fallback--faint);
   }
+
 }
 
 .side-drawer-logo-wrapper {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index cd8fff6f..1e963516 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -92,7 +92,7 @@
         flex-direction: column;
 
         @media all and (max-width: 800px) {
-          min-width: 1em;
+          min-width: 4em;
         }
 
         &:not(.active)::after {

From 2e6c51dfd4e59370c104abb3e2602ec5a70bd030 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 22:49:53 +0200
Subject: [PATCH 18/19] better icon for picker

---
 src/components/emoji_picker/emoji_picker.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index b1671566..0d51c7e5 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,13 +1,13 @@
 import Checkbox from '../checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faUnderline,
+  faIcons,
   faStickyNote,
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faUnderline,
+  faIcons,
   faStickyNote,
   faSmileBeam
 )
@@ -195,7 +195,7 @@ const EmojiPicker = {
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'underline',
+          icon: 'icons',
           emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       ]

From ef36ca44f613c3d7d2ea11a9ad4f7fe828f7ae83 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Oct 2020 22:52:20 +0200
Subject: [PATCH 19/19] >boxes

---
 src/components/emoji_picker/emoji_picker.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 0d51c7e5..2716d93f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -1,13 +1,13 @@
 import Checkbox from '../checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faIcons,
+  faBoxOpen,
   faStickyNote,
   faSmileBeam
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faIcons,
+  faBoxOpen,
   faStickyNote,
   faSmileBeam
 )
@@ -195,7 +195,7 @@ const EmojiPicker = {
         {
           id: 'standard',
           text: this.$t('emoji.unicode'),
-          icon: 'icons',
+          icon: 'box-open',
           emojis: filterByKeyword(standardEmojis, this.keyword)
         }
       ]