Convert Font Awesome to Unicode Icons. Part 1. In Progress.

Thanks to xet7 !

client/components/main/bookmarks.jade

@@ -8,7 +8,7 @@ template(name="bookmarks")
             li
               a(href="{{pathFor 'board' id=_id slug=slug}}")= title
               a.js-toggle-star(title="{{_ 'star-board-short-unstar'}}")
-                i.fa.fa-star
+                | ⭐
       else
         p {{_ 'no-starred-boards'}}
     else
@@ -21,9 +21,9 @@ template(name="bookmarksPopup")
       each starredBoards
         li
           a(href="{{pathFor 'board' id=_id slug=slug}}")
-            i.fa.fa-star
+            | ⭐
             |  #{title}
           a.js-toggle-star.right(title="{{_ 'star-board-short-unstar'}}")
-            i.fa.fa-star
+            | ⭐
     else
       li {{_ 'no-starred-boards'}}

client/components/main/header.jade

@@ -9,7 +9,7 @@ template(name="header")
       // Home icon - always at left side of logo
       span.home-icon.allBoards
         a(href="{{pathFor 'home'}}")
-          span.fa.fa-home
+          | 🏠
           | {{_ 'all-boards'}}
 
       // Logo - visible; on mobile constrained by CSS
@@ -80,12 +80,12 @@ template(name="header")
 
       .mobile-mode-toggle
         a.board-header-btn.js-mobile-mode-toggle(title="{{_ 'mobile-desktop-toggle'}}" class="{{#if mobileMode}}mobile-active{{else}}desktop-active{{/if}}")
-          i.fa.fa-mobile.mobile-icon(class="{{#if mobileMode}}active{{/if}}")
-          i.fa.fa-desktop.desktop-icon(class="{{#unless mobileMode}}active{{/unless}}")
+          | 📱(class="{{#if mobileMode}}active{{/if}}")
+          | 🖥️(class="{{#unless mobileMode}}active{{/unless}}")
 
       // Bookmarks button - desktop opens popup, mobile routes to page
       a.board-header-btn.js-open-bookmarks(title="{{_ 'bookmarks'}}")
-        i.fa.fa-bookmark
+        | 🔖
 
       // Notifications
       +notifications
@@ -93,7 +93,7 @@ template(name="header")
       if currentSetting.customHelpLinkUrl
         #header-help
           a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
-            span.fa.fa-question
+            | ❓
 
       +headerUserBar
 
@@ -112,15 +112,15 @@ template(name="header")
     if hasAnnouncement
       .announcement
         p
-          i.fa.fa-bullhorn
+          | 📢
           +viewer
             | #{announcement}
-          i.fa.fa-times-circle.js-close-announcement
+          | ❌
 
 template(name="offlineWarning")
   .offline-warning
     p
-      i.fa.fa-warning
+      | ⚠️
       | {{_ 'app-is-offline'}}
 
       a.app-try-reconnect {{_ 'app-try-reconnect'}}

client/components/main/layouts.jade

@@ -85,13 +85,13 @@ template(name="defaultLayout")
       if (Modal.isWide)
         .modal-content-wide.modal-container
           a.modal-close-btn.js-close-modal
-            i.fa.fa-times-thin
+            | ❌
           +Template.dynamic(template=Modal.getHeaderName)
           +Template.dynamic(template=Modal.getTemplateName)
       else
         .modal-content.modal-container
           a.modal-close-btn.js-close-modal
-            i.fa.fa-times-thin
+            | ❌
           +Template.dynamic(template=Modal.getHeaderName)
           +Template.dynamic(template=Modal.getTemplateName)
 

client/components/main/popup.tpl.jade

@@ -5,10 +5,10 @@
   style="left:{{offset.left}}px; top:{{offset.top}}px;{{#if offset.maxHeight}} max-height:{{offset.maxHeight}}px;{{/if}}")
   .header
     a.back-btn.js-back-view(class="{{#unless hasPopupParent}}is-hidden{{/unless}}")
-      i.fa.fa-chevron-left
+      | ◀️
     span.header-title= title
     a.close-btn.js-close-pop-over
-      i.fa.fa-times-thin
+      | ❌
   .content-wrapper
     //-
       We display the all stack of popup content next to each other and move