Most Unicode Icons back to Font Awesome 4.7 for better accessibility. Less always visible buttons, More at ☰ Men.

Thanks to xet7 !

client/components/notifications/notification.css

@@ -25,7 +25,7 @@
   height: 1.2em;
   font-size: clamp(14px, 2vw, 17px);
   display: block;
-  color: #bbb;
+  color: #000;
 }
 #notifications-drawer .notification .read-status .activity-type.hidden {
   display: none;

client/components/notifications/notifications.jade

@@ -1,6 +1,6 @@
 template(name='notifications')
   #notifications.board-header-btns.right
     a.notifications-drawer-toggle(class="{{#if $gt unreadNotifications 0}}alert{{/if}}" title="{{_ 'notifications'}}")
-      | 🔔
+      i.fa.fa-bell
     if $.Session.get 'showNotificationsDrawer'
       +notificationsDrawer(unreadNotifications=unreadNotifications)

client/components/notifications/notificationsDrawer.jade

@@ -1,42 +1,54 @@
 template(name='notificationsDrawer')
   section#notifications-drawer(class="{{#if $.Session.get 'showReadNotifications'}}show-read{{/if}}")
     .header
-      a.notification-menu-toggle ☰
+      a.notification-menu-toggle
+        i.fa.fa-bars
       .notification-menu(class="{{#if $.Session.get 'showNotificationMenu'}}is-open{{/if}}")
         .menu-section
           a.menu-item(class="{{#unless $.Session.get 'showReadNotifications'}}selected{{/unless}}")
-            span.check-icon {{#unless $.Session.get 'showReadNotifications'}}✓{{/unless}}
-            span.menu-icon 📭
+            span.check-icon
+              if $not $.Session.get 'showReadNotifications'
+                i.fa.fa-check
+            span.menu-icon
+              i.fa.fa-envelope-open
             span {{_ 'filter-by-unread'}}
           a.menu-item(class="{{#if $.Session.get 'showReadNotifications'}}selected{{/if}}")
-            span.check-icon {{#if $.Session.get 'showReadNotifications'}}✓{{/if}}
-            span.menu-icon 📋
+            span.check-icon
+              if $.Session.get 'showReadNotifications'
+                i.fa.fa-check
+            span.menu-icon
+              i.fa.fa-copy
             span {{_ 'view-all'}}
         .menu-divider
         .menu-section
           if($gt unreadNotifications 0)
             a.menu-item.mark-all-read
               span.check-icon
-              span.menu-icon ✅
+              span.menu-icon
+                i.fa.fa-check
               span {{_ 'mark-all-as-read'}}
           if ($and ($.Session.get 'showReadNotifications') ($gt readNotifications 0))
             a.menu-item.mark-all-unread
               span.check-icon
-              span.menu-icon 📬
+              span.menu-icon
+                i.fa.fa-envelope-open
               span {{_ 'mark-all-as-unread'}}
           if ($and ($.Session.get 'showReadNotifications') ($gt readNotifications 0))
             a.menu-item.delete-read
               span.check-icon
-              span.menu-icon 🗑️
+              span.menu-icon
+                i.fa.fa-trash
               span {{_ 'remove-all-read'}}
           a.menu-item.delete-all
             span.check-icon
-            span.menu-icon 🗑️
+            span.menu-icon
+              i.fa.fa-trash
             span {{_ 'delete-all-notifications'}}
       h5 {{_ 'notifications'}}
         if($gt unreadNotifications 0)
           |(#{unreadNotifications})
-      a.close ❌
+      a.close
+        i.fa.fa-times-thin
     ul.notifications
       each notifications
         +notification(activityData=activityObj index=dbIndex read=read)