FontAwesome 5

Closes #982 (closed)

Replaces all icons with FA5 counterparts. Removes Fontello

Some icons changed to a (slightly) different icon:

• All spinners were changed to circle-notch since FA doesn't have any spinners beyond 7-dots and circle-notch ones.
• bell-ringing is instead a frankenstein of bell and two rss icons to simulate ringing, since bell-on is a FA PRO icon :/
• Video icon (in hidden attachment placeholder) uses generic camera
• Poll icon uses horizontal poll icon, i.e. similar to graph but horizontal and inside a square.
• Smile icon uses beam version, i.e. it does the ^_^ expression. Because people complained that plain :) "stares at them"
• Smile icon in post form changed to filled variant for better harmony with other icons
• globe is changed to a generic "basketball"
• lock now has shackle turned over for better accessibility
• ellipsis in usercard is vertical instead of horizontal
• version tab in settings is now information without circle.
• notifications tab in settings is non-ringing bell
• maybe more i can't remember.

Some small bugfixes:

• Icons in navbar have been readjusted
• Icons in user-card have been readjusted and given MUCH bigger hitbox + better hover indication.
• Some components like RetweetButton have been refactored.
• Some components's CSS was changed to fit better with our guidelines.

src/components/side_drawer/side_drawer.vue

@@ -36,7 +36,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            <i class="button-icon icon-login" /> {{ $t("login.login") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="sign-in-alt"
+            /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +48,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: timelinesRoute }">
-            <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="home"
+            /> {{ $t("nav.timelines") }}
           </router-link>
         </li>
         <li
@@ -55,7 +63,11 @@
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative"
           >
-            <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="comments"
+            /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
               class="badge badge-notification unread-chat-count"
@@ -68,7 +80,11 @@
       <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
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bell"
+            /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li
@@ -76,7 +92,11 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="user-plus"
+            /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -90,7 +110,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="bullhorn"
+            /> {{ $t("shoutbox.title") }}
           </router-link>
         </li>
       </ul>
@@ -100,7 +124,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'search' }">
-            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="search"
+            /> {{ $t("nav.search") }}
           </router-link>
         </li>
         <li
@@ -108,7 +136,11 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="user-plus"
+            /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
@@ -116,12 +148,20 @@
             href="#"
             @click="openSettingsModal"
           >
-            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              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
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="info-circle"
+            /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -132,7 +172,11 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="tachometer-alt"
+            /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -143,7 +187,11 @@
             href="#"
             @click="doLogout"
           >
-            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110 fa-old-padding"
+              icon="sign-out-alt"
+            /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
@@ -224,9 +272,12 @@
   --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
-  .button-icon:before {
-    width: 1.1em;
+  .follow-request-count {
+    vertical-align: baseline;
+    background-color: $fallback--bg;
+    background-color: var(--input, $fallback--faint);
   }
+
 }
 
 .side-drawer-logo-wrapper {
@@ -272,7 +323,6 @@
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
-  margin: 0.2em 0;
 }
 
 .side-drawer ul:last-child {
@@ -283,8 +333,11 @@
   padding: 0;
 
   a {
+    box-sizing: border-box;
     display: block;
-    padding: 0.5em 0.85em;
+    height: 3em;
+    line-height: 3em;
+    padding: 0 0.7em;
 
     &:hover {
       background-color: $fallback--lightBg;