Add icons to extra notifications

src/components/extra_notifications/extra_notifications.js

@@ -1,5 +1,18 @@
 import { mapGetters } from 'vuex'
 
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faUserPlus,
+  faComments,
+  faBullhorn
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faUserPlus,
+  faComments,
+  faBullhorn
+)
+
 const ExtraNotifications = {
   computed: {
     shouldShowChats () {

src/components/extra_notifications/extra_notifications.vue

@@ -7,6 +7,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="comments"
+        />
         {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
       </router-link>
     </div>
@@ -17,6 +22,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'announcements' }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="bullhorn"
+        />
         {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
       </router-link>
     </div>
@@ -27,6 +37,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'friend-requests' }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="user-plus"
+        />
         {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
       </router-link>
     </div>
@@ -81,6 +96,10 @@
     padding: 1em;
   }
 
+  .icon {
+    margin-right: 0.5em;
+  }
+
   .tip {
     display: inline;
   }