From 70a5619496db1620fcc6d0127449ffb498a3dae4 Mon Sep 17 00:00:00 2001
From: Dym Sohin <re@dym.sh>
Date: Fri, 18 Sep 2020 11:07:38 +0200
Subject: [fix] case in/sensitive emoji search

---
 src/components/emoji_picker/emoji_picker.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 0f397b59..5c09f6ca 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -8,7 +8,10 @@ const LOAD_EMOJI_BY = 60
 const LOAD_EMOJI_MARGIN = 64
 
 const filterByKeyword = (list, keyword = '') => {
-  return list.filter(x => x.displayText.includes(keyword))
+  const keywordLowercase = keyword.toLowerCase()
+  return list.filter(emoji =>
+    emoji.displayText.toLowerCase().includes(keywordLowercase)
+  )
 }
 
 const EmojiPicker = {
-- 
cgit v1.2.3-70-g09d2


From fee654f1eee276a1d30c8fcb2699e567fc281967 Mon Sep 17 00:00:00 2001
From: Dym Sohin <re@dym.sh>
Date: Mon, 21 Sep 2020 17:29:36 +0200
Subject: feat/reorder-emojis-by-position-of-keyword

---
 src/components/emoji_picker/emoji_picker.js | 13 ++++++++++---
 src/components/react_button/react_button.js | 11 ++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 5c09f6ca..713ecd8b 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -8,10 +8,17 @@ const LOAD_EMOJI_BY = 60
 const LOAD_EMOJI_MARGIN = 64
 
 const filterByKeyword = (list, keyword = '') => {
+  if (keyword === '') return list
+
   const keywordLowercase = keyword.toLowerCase()
-  return list.filter(emoji =>
-    emoji.displayText.toLowerCase().includes(keywordLowercase)
-  )
+  const orderedEmojiList = []
+  for (const emoji of list) {
+    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf( keywordLowercase )
+    if ( indexOfKeyword > -1 ) {
+      orderedEmojiList.splice(indexOfKeyword, 0, emoji)
+    }
+  }
+  return orderedEmojiList
 }
 
 const EmojiPicker = {
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index abcf0455..473a2506 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -29,9 +29,14 @@ const ReactButton = {
     emojis () {
       if (this.filterWord !== '') {
         const filterWordLowercase = this.filterWord.toLowerCase()
-        return this.$store.state.instance.emoji.filter(emoji =>
-          emoji.displayText.toLowerCase().includes(filterWordLowercase)
-        )
+        const orderedEmojiList = []
+        for (const emoji of this.$store.state.instance.emoji) {
+          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf( filterWordLowercase )
+          if ( indexOfFilterWord > -1 ) {
+            orderedEmojiList.splice(indexOfFilterWord, 0, emoji)
+          }
+        }
+        return orderedEmojiList
       }
       return this.$store.state.instance.emoji || []
     },
-- 
cgit v1.2.3-70-g09d2


From f1e1f20a8d89abf7920997c12d5c7b48cdb2d628 Mon Sep 17 00:00:00 2001
From: Dym Sohin <re@dym.sh>
Date: Mon, 21 Sep 2020 17:42:17 +0200
Subject: fix 8x spaces inside this paren

---
 src/components/emoji_picker/emoji_picker.js | 4 ++--
 src/components/react_button/react_button.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 713ecd8b..28ab0376 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -13,8 +13,8 @@ const filterByKeyword = (list, keyword = '') => {
   const keywordLowercase = keyword.toLowerCase()
   const orderedEmojiList = []
   for (const emoji of list) {
-    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf( keywordLowercase )
-    if ( indexOfKeyword > -1 ) {
+    const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
+    if (indexOfKeyword > -1) {
       orderedEmojiList.splice(indexOfKeyword, 0, emoji)
     }
   }
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 473a2506..28ce884a 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -31,8 +31,8 @@ const ReactButton = {
         const filterWordLowercase = this.filterWord.toLowerCase()
         const orderedEmojiList = []
         for (const emoji of this.$store.state.instance.emoji) {
-          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf( filterWordLowercase )
-          if ( indexOfFilterWord > -1 ) {
+          const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
+          if (indexOfFilterWord > -1) {
             orderedEmojiList.splice(indexOfFilterWord, 0, emoji)
           }
         }
-- 
cgit v1.2.3-70-g09d2


From cff202241b6eff8f6b381866e00a0392080d05a2 Mon Sep 17 00:00:00 2001
From: Dym Sohin <re@dym.sh>
Date: Mon, 21 Sep 2020 18:10:55 +0200
Subject: improved algorithm, possibly speed too

---
 src/components/emoji_picker/emoji_picker.js | 9 ++++++---
 src/components/react_button/react_button.js | 9 ++++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 28ab0376..29c559df 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -11,14 +11,17 @@ const filterByKeyword = (list, keyword = '') => {
   if (keyword === '') return list
 
   const keywordLowercase = keyword.toLowerCase()
-  const orderedEmojiList = []
+  let orderedEmojiList = []
   for (const emoji of list) {
     const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
     if (indexOfKeyword > -1) {
-      orderedEmojiList.splice(indexOfKeyword, 0, emoji)
+      if (!Array.isArray(orderedEmojiList[keywordLowercase])) {
+        orderedEmojiList[keywordLowercase] = []
+      }
+      orderedEmojiList[keywordLowercase].push(emoji)
     }
   }
-  return orderedEmojiList
+  return orderedEmojiList.flat()
 }
 
 const EmojiPicker = {
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 28ce884a..16014405 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -29,14 +29,17 @@ const ReactButton = {
     emojis () {
       if (this.filterWord !== '') {
         const filterWordLowercase = this.filterWord.toLowerCase()
-        const orderedEmojiList = []
+        let orderedEmojiList = []
         for (const emoji of this.$store.state.instance.emoji) {
           const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase)
           if (indexOfFilterWord > -1) {
-            orderedEmojiList.splice(indexOfFilterWord, 0, emoji)
+            if (!Array.isArray(orderedEmojiList[indexOfFilterWord])) {
+              orderedEmojiList[indexOfFilterWord] = []
+            }
+            orderedEmojiList[indexOfFilterWord].push(emoji)
           }
         }
-        return orderedEmojiList
+        return orderedEmojiList.flat()
       }
       return this.$store.state.instance.emoji || []
     },
-- 
cgit v1.2.3-70-g09d2


From bb59b8ee56f8c5c89720c9a42037a730caba4d11 Mon Sep 17 00:00:00 2001
From: Dym Sohin <re@dym.sh>
Date: Mon, 21 Sep 2020 18:13:31 +0200
Subject: fixed copy-pasting leftovers

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

(limited to 'src/components/emoji_picker/emoji_picker.js')

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 29c559df..3ad80df3 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -15,10 +15,10 @@ const filterByKeyword = (list, keyword = '') => {
   for (const emoji of list) {
     const indexOfKeyword = emoji.displayText.toLowerCase().indexOf(keywordLowercase)
     if (indexOfKeyword > -1) {
-      if (!Array.isArray(orderedEmojiList[keywordLowercase])) {
-        orderedEmojiList[keywordLowercase] = []
+      if (!Array.isArray(orderedEmojiList[indexOfKeyword])) {
+        orderedEmojiList[indexOfKeyword] = []
       }
-      orderedEmojiList[keywordLowercase].push(emoji)
+      orderedEmojiList[indexOfKeyword].push(emoji)
     }
   }
   return orderedEmojiList.flat()
-- 
cgit v1.2.3-70-g09d2


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: 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 +
 src/components/extra_buttons/extra_buttons.vue     |   6 +-
 src/components/favorite_button/favorite_button.js  |  14 +-
 src/components/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             | 148 +++++++++++----------
 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 +++-
 src/components/retweet_button/retweet_button.js    |   8 +-
 src/components/retweet_button/retweet_button.vue   |  48 ++++---
 src/components/scope_selector/scope_selector.js    |  15 +++
 src/components/scope_selector/scope_selector.vue   |  48 ++++---
 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 +++
 src/components/timeline_menu/timeline_menu.vue     |  32 ++---
 src/main.js                                        |   4 +
 yarn.lock                                          |  31 +++++
 34 files changed, 521 insertions(+), 238 deletions(-)

(limited to 'src/components/emoji_picker/emoji_picker.js')

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;
+.NavPanel {
+  .panel {
+    overflow: hidden;
+    box-shadow: var(--panelShadow);
+  }
 
-  &: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);
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
-  &: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);
+  .follow-request-count {
+    margin: -6px 10px;
+    background-color: $fallback--bg;
+    background-color: var(--input, $fallback--faint);
   }
-}
 
-.nav-panel li:last-child {
-  border: none;
-}
+  li {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    padding: 0;
 
-.nav-panel a {
-  display: block;
-  padding: 0.8em 0.85em;
+    &: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);
+    }
 
-  &: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);
+    &: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);
+    }
   }
 
-  &.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);
+  li:last-child {
+    border: none;
+  }
+
+  a {
+    display: block;
+    padding: 0.8em 0.85em;
 
     &:hover {
-      text-decoration: underline;
+      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;
+      }
     }
   }
-}
 
-.nav-panel .button-icon {
-  margin-right: 0.5em;
-}
+  .button-icon {
+    margin-left: -0.1em;
+    margin-right: 0.2em;
+  }
 
-.nav-panel .button-icon:before {
-  width: 1.1em;
+  .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;
+.ScopeSelector {
+
+  .scope {
+    display: inline-block;
     cursor: pointer;
+    min-width: 1.3em;
+    min-height: 1.3em;
+    text-align: center;
 
-    &.selected {
+    &.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"
-- 
cgit v1.2.3-70-g09d2


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: better icon for picker

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

(limited to 'src/components/emoji_picker/emoji_picker.js')

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)
         }
       ]
-- 
cgit v1.2.3-70-g09d2


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: >boxes

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

(limited to 'src/components/emoji_picker/emoji_picker.js')

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)
         }
       ]
-- 
cgit v1.2.3-70-g09d2