Some initial work on replacing icons with FA5

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;
     }
   }
 }