Font Awesome to Unicode icons. Part 3.

Thanks to xet7 !

client/components/boards/boardHeader.jade

@@ -14,41 +14,41 @@ template(name="boardHeaderBar")
           with currentBoard
             if currentUser.isBoardAdmin
               a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
-                i.fa.fa-pencil-square-o
+                | ✏️
 
-          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-            title="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}" aria-label="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}")
+              title="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}" aria-label="{{#if isStarred}}{{_ 'star-board-short-unstar'}}{{else}}{{_ 'star-board-short-star'}}{{/if}}")
-            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+              | {{#if isStarred}}⭐{{else}}☆{{/if}}
-            if showStarCounter
+              if showStarCounter
-              span
+                span
-                = currentBoard.stars
+                  = currentBoard.stars
 
-          a.board-header-btn(
+            a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
+              title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/if}}
-            span {{_ currentBoard.permission}}
+              span {{_ currentBoard.permission}}
 
-          a.board-header-btn.js-watch-board(
+            a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
+              title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
+              if $eq watchLevel "watching"
-              i.fa.fa-eye
+                | 👁️
-            if $eq watchLevel "tracking"
+              if $eq watchLevel "tracking"
-              i.fa.fa-bell
+                | 🔔
-            if $eq watchLevel "muted"
+              if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
+                | 🔕
-            span {{_ watchLevel}}
+              span {{_ watchLevel}}
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
+              | {{sortCardsIcon}}
-            span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
+              span {{#if isSortActive }}{{_ 'sort-is-on'}}{{else}}{{_ 'sort-cards'}}{{/if}}
             if isSortActive
               a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
+                | ❌
 
         else
           a.board-header-btn.js-log-in(
             title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
+            | 🚪
             span {{_ 'log-in'}}
 
   .board-header-btns.center
@@ -59,40 +59,40 @@ template(name="boardHeaderBar")
         if currentUser
           with currentBoard
             a.board-header-btn(class="{{#if currentUser.isBoardAdmin}}js-edit-board-title{{else}}is-disabled{{/if}}" title="{{_ 'edit'}}" value=title)
-              i.fa.fa-pencil-square-o
+              | ✏️
 
-          a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
+            a.board-header-btn.js-star-board(class="{{#if isStarred}}is-active{{/if}}"
-            title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
+              title="{{#if isStarred}}{{_ 'click-to-unstar'}}{{else}}{{_ 'click-to-star'}}{{/if}} {{_ 'starred-boards-description'}}")
-            i.fa(class="fa-star{{#unless isStarred}}-o{{/unless}}")
+              | {{#if isStarred}}⭐{{else}}☆{{/if}}
 
-          a.board-header-btn(
+            a.board-header-btn(
-            class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
+              class="{{#if currentUser.isBoardAdmin}}js-change-visibility{{else}}is-disabled{{/if}}"
-            title="{{_ currentBoard.permission}}")
+              title="{{_ currentBoard.permission}}")
-            i.fa(class="{{#if currentBoard.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+              | {{#if currentBoard.isPublic}}🌐{{else}}🔒{{/if}}
 
-          a.board-header-btn.js-watch-board(
+            a.board-header-btn.js-watch-board(
-            title="{{_ watchLevel }}")
+              title="{{_ watchLevel }}")
-            if $eq watchLevel "watching"
+              if $eq watchLevel "watching"
-              i.fa.fa-eye
+                | 👁️
-            if $eq watchLevel "tracking"
+              if $eq watchLevel "tracking"
-              i.fa.fa-bell
+                | 🔔
-            if $eq watchLevel "muted"
+              if $eq watchLevel "muted"
-              i.fa.fa-bell-slash
+                | 🔕
-          a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
+            a.board-header-btn(title="{{_ 'sort-cards'}}" class="{{#if isSortActive }}emphasis{{else}} js-sort-cards {{/if}}")
-            i.fa.fa-sort
+              | {{sortCardsIcon}}
             if isSortActive
               a.board-header-btn-close.js-sort-reset(title="{{_ 'remove-sort'}}")
-                i.fa.fa-times-thin
+                | ❌
 
         else
           a.board-header-btn.js-log-in(
             title="{{_ 'log-in'}}")
-            i.fa.fa-sign-in
+            | 🚪
 
       if isSandstorm
         if currentUser
           a.board-header-btn.js-open-archived-board
-            i.fa.fa-archive
+            | 📦
 
       //if showSort
       //  a.board-header-btn.js-open-sort-view(title="{{_ 'sort-desc'}}")
@@ -102,56 +102,56 @@ template(name="boardHeaderBar")
       a.board-header-btn.js-open-filter-view(
           title="{{#if Filter.isActive}}{{_ 'filter-on-desc'}}{{else}}{{_ 'filter'}}{{/if}}"
           class="{{#if Filter.isActive}}emphasis{{/if}}")
-        i.fa.fa-filter
+        | 🔽
         if Filter.isActive
           a.board-header-btn-close.js-filter-reset(title="{{_ 'filter-clear'}}")
-            i.fa.fa-times-thin
+            | ❌
 
       a.board-header-btn.js-open-search-view(title="{{_ 'search'}}")
-        i.fa.fa-search
+        | 🔍
 
       unless currentBoard.isTemplatesBoard
         a.board-header-btn.js-toggle-board-view(
           title="{{_ 'board-view'}}")
-          i.fa.fa-caret-down
+          | ▼
           if $eq boardView 'board-view-swimlanes'
-            i.fa.fa-th-large
+            | 🏊
           if $eq boardView 'board-view-lists'
-            i.fa.fa-trello
+            | 📋
           if $eq boardView 'board-view-cal'
-            i.fa.fa-calendar
+            | 📅
 
       if canModifyBoard
         a.board-header-btn.js-multiselection-activate(
             title="{{#if MultiSelection.isActive}}{{_ 'multi-selection-on'}}{{else}}{{_ 'multi-selection'}}{{/if}}"
             class="{{#if MultiSelection.isActive}}emphasis{{/if}}")
-          i.fa.fa-check-square-o
+          | ☑️
-          if MultiSelection.isActive
+        if MultiSelection.isActive
-            a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
+          a.board-header-btn-close.js-multiselection-reset(title="{{_ 'filter-clear'}}")
-              i.fa.fa-times-thin
+            | ❌
 
       .separator
       a.board-header-btn.js-toggle-sidebar(title="{{_ 'sidebar-open'}} {{_ 'or'}} {{_ 'sidebar-close'}}")
-        i.fa.fa-navicon
+        | ☰
 
 template(name="boardVisibilityList")
   ul.pop-over-list
     li
       with "private"
         a.js-select-visibility
-          i.fa.fa-lock.colorful
+          | 🔒
           | {{_ 'private'}}
           if visibilityCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'private-desc'}}
     if notAllowPrivateVisibilityOnly
       li
         with "public"
           a.js-select-visibility
-            i.fa.fa-globe.colorful
+            | 🌐
             | {{_ 'public'}}
             if visibilityCheck
-              i.fa.fa-check
+              | ✅
             span.sub-name {{_ 'public-desc'}}
 
 template(name="boardChangeVisibilityPopup")
@@ -162,26 +162,26 @@ template(name="boardChangeWatchPopup")
     li
       with "watching"
         a.js-select-watch
-          i.fa.fa-eye.colorful
+          | 👁️
           | {{_ 'watching'}}
           if watchCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'watching-info'}}
     li
       with "tracking"
         a.js-select-watch
-          i.fa.fa-bell.colorful
+          | 🔔
           | {{_ 'tracking'}}
           if watchCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'tracking-info'}}
     li
       with "muted"
         a.js-select-watch
-          i.fa.fa-bell-slash.colorful
+          | 🔕
           | {{_ 'muted'}}
           if watchCheck
-            i.fa.fa-check
+            | ✅
           span.sub-name {{_ 'muted-info'}}
 
 template(name="boardChangeViewPopup")
@@ -189,24 +189,24 @@ template(name="boardChangeViewPopup")
     li
       with "board-view-swimlanes"
         a.js-open-swimlanes-view
-          i.fa.fa-th-large.colorful
+          | 🏊
           | {{_ 'board-view-swimlanes'}}
           if $eq Utils.boardView "board-view-swimlanes"
-            i.fa.fa-check
+            | ✅
     li
       with "board-view-lists"
         a.js-open-lists-view
-          i.fa.fa-trello.colorful
+          | 📋
           | {{_ 'board-view-lists'}}
           if $eq Utils.boardView "board-view-lists"
-            i.fa.fa-check
+            | ✅
     li
       with "board-view-cal"
         a.js-open-cal-view
-          i.fa.fa-calendar.colorful
+          | 📅
           | {{_ 'board-view-cal'}}
           if $eq Utils.boardView "board-view-cal"
-            i.fa.fa-check
+            | ✅
 
 template(name="createBoard")
   form
@@ -218,11 +218,11 @@ template(name="createBoard")
     else
       p.quiet
         if $eq visibility.get 'public'
-          span.fa.fa-globe.colorful
+          span 🌐
           = " "
           | {{{_ 'board-public-info'}}}
         else
-          span.fa.fa-lock.colorful
+          span 🔒
           = " "
           | {{{_ 'board-private-info'}}}
         a.js-change-visibility {{_ 'change'}}.
@@ -246,10 +246,10 @@ template(name="createBoard")
 //     li
 //      a.js-sort-by(name="{{value.name}}")
 //        if $eq sortby value.name
-//           i(class="fa {{Direction}}")
+//           | {{#if $eq Direction "fa-arrow-up"}}⬆️{{else}}⬇️{{/if}}
 //        | {{_ value.label }}{{_ value.shortLabel}}
 //        if $eq sortby value.name
-//           i(class="fa fa-check")
+//           | ✅
 
 template(name="boardChangeTitlePopup")
   form
@@ -269,14 +269,22 @@ template(name="boardCreateRulePopup")
 template(name="cardsSortPopup")
   ul.pop-over-list
     li
-      a.js-sort-due {{_ 'due-date'}}
+      a.js-sort-due
+        | 📅
+        | {{_ 'due-date'}}
       hr
     li
-      a.js-sort-title {{_ 'title-alphabetically'}}
+      a.js-sort-title
+        | 🔤
+        | {{_ 'title-alphabetically'}}
       hr
     li
-      a.js-sort-created-desc {{_ 'created-at-newest-first'}}
+      a.js-sort-created-desc
+        | ⬇️
+        | {{_ 'created-at-newest-first'}}
       hr
     li
-      a.js-sort-created-asc {{_ 'created-at-oldest-first'}}
+      a.js-sort-created-asc
+        | ⬆️
+        | {{_ 'created-at-oldest-first'}}
 

client/components/boards/boardHeader.js

@@ -164,6 +164,23 @@ Template.boardHeaderBar.helpers({
   isSortActive() {
     return Session.get('sortBy') ? true : false;
   },
+  sortCardsIcon() {
+    const sortBy = Session.get('sortBy');
+    if (!sortBy) {
+      return '🃏'; // Card icon when nothing is selected
+    }
+    
+    // Determine which sort option is active based on sortBy object
+    if (sortBy.dueAt) {
+      return '📅'; // Due date icon
+    } else if (sortBy.title) {
+      return '🔤'; // Alphabet icon
+    } else if (sortBy.createdAt) {
+      return sortBy.createdAt === 1 ? '⬆️' : '⬇️'; // Up/down arrow based on direction
+    }
+    
+    return '🃏'; // Default card icon
+  },
 });
 
 Template.boardChangeViewPopup.events({

client/components/cards/cardCustomFields.jade

@@ -6,10 +6,10 @@ template(name="cardCustomFieldsPopup")
                     span.full-name
                       = name
                     if hasCustomField
-                      i.fa.fa-check
+                      | ✅
     hr
     a.quiet-button.full.js-settings
-        i.fa.fa-cog
+        | ⚙️
         span {{_ 'settings'}}
 
 template(name="cardCustomField")
@@ -22,7 +22,7 @@ template(name="cardCustomField-text")
                 = value
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -41,7 +41,7 @@ template(name="cardCustomField-number")
             input(type="number" value=data.value)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -66,7 +66,7 @@ template(name="cardCustomField-currency")
             input(type="text" value=data.value autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -113,7 +113,7 @@ template(name="cardCustomField-dropdown")
                             = name
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value
@@ -134,7 +134,7 @@ template(name="cardCustomField-stringtemplate")
             input.js-card-customfield-stringtemplate-item.last(type="text" value="" placeholder="{{_ 'custom-field-stringtemplate-item-placeholder'}}" autofocus)
             .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
         else
             a.js-open-inlined-form
                 if value

client/components/cards/cardDetails.jade

@@ -202,7 +202,7 @@ template(name="cardDetails")
               | {{! XXX Hack to hide syntaxic coloration /// }}
             if canModifyCard
               a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-                i.fa.fa-plus
+                | ➕
             if currentUser.isWorker
               unless assigneeSelected
                 a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
@@ -212,7 +212,7 @@ template(name="cardDetails")
         if currentBoard.allowsRequestedBy
           .card-details-item.card-details-item-name
             h3.card-details-item-title
-              i.fa.fa-shopping-cart
+              | 🛒
               | {{_ 'requested-by'}}
             if canModifyCard
               unless currentUser.isWorker
@@ -255,7 +255,7 @@ template(name="cardDetails")
         if currentBoard.allowsCardSortingByNumber
           .card-details-item.card-details-sort-order
             h3.card-details-item-title
-              i.fa.fa-sort
+              | 🔢
               | {{_ 'sort'}}
             if canModifyCard
               +inlinedForm(classNames="js-card-details-sort")
@@ -268,7 +268,7 @@ template(name="cardDetails")
         if currentBoard.allowsShowLists
           .card-details-item.card-details-show-lists
             h3.card-details-item-title
-              i.fa.fa-list
+              | 📋
               | {{_ 'list'}}
             select.js-select-card-details-lists(disabled="{{#unless canModifyCard}}disabled{{/unless}}")
               each currentBoard.lists
@@ -294,7 +294,7 @@ template(name="cardDetails")
               hr
             .card-details-item.card-details-item-customfield
               h3.card-details-item-title
-                i.fa.fa-list-alt
+                | 📋-alt
                 = definition.name
               +cardCustomField
 
@@ -305,14 +305,14 @@ template(name="cardDetails")
               else
                 input.toggle-switch(type="checkbox" id="toggleCustomFieldsGridButton")
               label.toggle-label(for="toggleCustomFieldsGridButton")
-          a.fa.fa-plus.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
+          a.js-custom-fields.card-details-item.custom-fields(title="{{_ 'custom-fields'}}")
 
       if getVoteQuestion
         hr
         .vote-title
           div.flex
             h3
-              i.fa.fa-thumbs-up
+              | 👍
               | {{_ 'vote-question'}}
             if getVoteEnd
               +voteEndDate
@@ -330,11 +330,11 @@ template(name="cardDetails")
         if showVotingButtons
           button.card-details-green.js-vote.js-vote-positive(class="{{#if voteState}}voted{{/if}}")
             if voteState
-              i.fa.fa-thumbs-up
+              | 👍
             | {{_ 'vote-for-it'}}
           button.card-details-red.js-vote.js-vote-negative(class="{{#if $eq voteState false}}voted{{/if}}")
             if $eq voteState false
-              i.fa.fa-thumbs-down
+              | 👎
             | {{_ 'vote-against'}}
 
       if getPokerQuestion
@@ -342,7 +342,7 @@ template(name="cardDetails")
         .poker-title
           div.flex
             h3
-              i.fa.fa-thumbs-up
+              | 👍
               | {{_ 'poker-question'}}
             if getPokerEnd
               +pokerEndDate
@@ -532,7 +532,7 @@ template(name="cardDetails")
               button.card-details-red.js-poker-replay(class="{{#if $eq voteState false}}voted{{/if}}") {{_ 'poker-replay'}}
             div.estimation-add
               button.js-poker-estimation
-                i.fa.fa-plus
+                | ➕
                 | {{_ 'set-estimation'}}
               input(type=text,autofocus value=getPokerEstimation,id="pokerEstimation")
 
@@ -542,18 +542,18 @@ template(name="cardDetails")
           if currentBoard.allowsDescriptionTitle
             hr
             h3.card-details-item-title
-              i.fa.fa-align-left
+              | 📝
               | {{_ 'description'}}
           if currentBoard.allowsDescriptionText
             +inlinedCardDescription(classNames="card-description js-card-description")
               +descriptionForm
               .edit-controls.clearfix
                 button.primary(type="submit") {{_ 'save'}}
-                a.fa.fa-times-thin.js-close-inlined-form
+                a.js-close-inlined-form
             else
               if currentBoard.allowsDescriptionText
                 a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
-                  i.fa.fa-pencil-square-o
+                  | ✏️
                 a.js-open-inlined-form(title="{{_ 'edit'}}" value=title)
                   if getDescription
                     +viewer
@@ -583,7 +583,7 @@ template(name="cardDetails")
         if currentBoard.allowsAttachments
           hr
           h3.card-details-item-title
-            i.fa.fa-paperclip
+            | 📎
             | {{_ 'attachments'}}
           if Meteor.settings.public.attachmentsUploadMaxSize
             | {{_ 'max-upload-filesize'}} {{Meteor.settings.public.attachmentsUploadMaxSize}}
@@ -599,7 +599,7 @@ template(name="cardDetails")
       unless currentUser.isNoComments
         .comment-title
           h3.card-details-item-title
-            i.fa.fa-comment-o
+            | 💬
             | {{_ 'comments'}}
 
         if currentBoard.allowsComments
@@ -614,7 +614,7 @@ template(name="cardDetails")
       unless currentUser.isNoComments
         .activity-title
           h3.card-details-item-title
-            i.fa.fa-history
+            | 📜
             | {{ _ 'activities'}}
           if currentUser.isBoardMember
             .material-toggle-switch(title="{{_ 'show-activities'}}")
@@ -634,41 +634,41 @@ template(name="cardDetails")
             +activities(card=this mode="card")
 
 template(name="editCardTitleForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.js-edit-card-title(rows='1' autofocus dir="auto")
     = getTitle
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-title-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardRequesterForm")
   input.js-edit-card-requester(type='text' autofocus value=getRequestedBy dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-requester-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardAssignerForm")
   input.js-edit-card-assigner(type='text' autofocus value=getAssignedBy dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-assigner-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editCardSortOrderForm")
   input.js-edit-card-sort(type='text' autofocus value=sort dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-card-sort-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="cardDetailsActionsPopup")
   ul.pop-over-list
     li
       a.js-toggle-watch-card
         if isWatching
-          i.fa.fa-eye
+          | 👁️
           |  {{_ 'unwatch'}}
         else
-          i.fa.fa-eye-slash
+          | 👁️-slash
           |  {{_ 'watch'}}
   hr
   if canModifyCard
@@ -679,16 +679,16 @@ template(name="cardDetailsActionsPopup")
         //li: a.js-attachments {{_ 'card-edit-attachments'}}
         li
           a.js-start-voting
-            i.fa.fa-thumbs-up
+            | 👍
             | {{_ 'card-edit-voting'}}
         li
           a.js-start-planning-poker
-            i.fa.fa-thumbs-up
+            | 👍
             | {{_ 'card-edit-planning-poker'}}
         if currentUser.isBoardAdmin
           li
             a.js-custom-fields
-              i.fa.fa-list-alt
+              | 📋-alt
               | {{_ 'card-edit-custom-fields'}}
         //li: a.js-received-date {{_ 'editCardReceivedDatePopup-title'}}
         //li: a.js-start-date {{_ 'editCardStartDatePopup-title'}}
@@ -696,75 +696,75 @@ template(name="cardDetailsActionsPopup")
         //li: a.js-end-date {{_ 'editCardEndDatePopup-title'}}
         li
           a.js-spent-time
-            i.fa.fa-clock-o
+            | 🕐
             | {{_ 'editCardSpentTimePopup-title'}}
         li
           a.js-set-card-color
-            i.fa.fa-paint-brush
+            | 🎨
             | {{_ 'setCardColorPopup-title'}}
         li
           a.js-toggle-show-list-on-minicard
             if showListOnMinicard
-              i.fa.fa-eye
+              | 👁️
               | {{_ 'hide-list-on-minicard'}}
             else
-              i.fa.fa-eye-slash
+              | 👁️-slash
               | {{_ 'show-list-on-minicard'}}
   hr
   ul.pop-over-list
     li
       a.js-export-card
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-card'}}
   hr
   ul.pop-over-list
     li
       a.js-move-card-to-top
-        i.fa.fa-arrow-up
+        | ⬆️
         | {{_ 'moveCardToTop-title'}}
     li
       a.js-move-card-to-bottom
-        i.fa.fa-arrow-down
+        | ⬇️
         | {{_ 'moveCardToBottom-title'}}
   hr
   ul.pop-over-list
     if currentUser.isBoardAdmin
       li
         a.js-move-card
-          i.fa.fa-arrow-right
+          | ➡️
           | {{_ 'moveCardPopup-title'}}
     unless currentUser.isWorker
       li
         a.js-copy-card
-          i.fa.fa-copy
+          | 📋
           | {{_ 'copyCardPopup-title'}}
   unless currentUser.isWorker
     ul.pop-over-list
       li
         a.js-copy-checklist-cards
-          i.fa.fa-copy
+          | 📋
-          i.fa.fa-copy
+          | 📋
           | {{_ 'copyManyCardsPopup-title'}}
     unless archived
       hr
       ul.pop-over-list
         li
           a.js-archive
-            i.fa.fa-arrow-right
+            | ➡️
-            i.fa.fa-archive
+            | 📦
             | {{_ 'archive-card'}}
     hr
     ul.pop-over-list
       li
         a.js-more
-          i.fa.fa-link
+          | 🔗
           | {{_ 'cardMorePopup-title'}}
 
 template(name="exportCardPopup")
   ul.pop-over-list
     li
       a(href="{{exportUrlCardPDF}}",, download="{{exportFilenameCardPDF}}")
-        i.fa.fa-share-alt
+        | 📤
         | {{_ 'export-card-pdf'}}
 
 template(name="moveCardPopup")
@@ -867,7 +867,7 @@ template(name="cardMorePopup")
     span.clearfix
       span {{_ 'link-card'}}
       = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      | {{#if board.isPublic}}🌐{{else}}🔒{{/if}}
       input.inline-input(type="text" id="cardURL" readonly value="{{ originRelativeUrl }}" autofocus="autofocus")
       button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}}
       .copied-tooltip {{_ 'copied'}}
@@ -943,12 +943,12 @@ template(name="cardStartVotingPopup")
           .materialCheckBox#vote-public(name="vote-public" class="{{#if votePublic}}is-checked{{/if}}")
           span {{_ 'vote-public'}}
       .check-div.flex
-        i.fa.fa-hourglass-end
+        | ⏰
         a.js-end-date
           span
             | {{_ 'card-end'}}
             unless getVoteEnd
-              i.fa.fa-plus
+              | ➕
         if getVoteEnd
           +voteEndDate
 
@@ -989,12 +989,12 @@ template(name="cardStartPlanningPokerPopup")
           .materialCheckBox#poker-allow-non-members(name="poker-allow-non-members" class="{{#if pokerAllowNonBoardMembers}}is-checked{{/if}}")
           span {{_ 'allowNonBoardMembers'}}
       .check-div.flex
-        i.fa.fa-hourglass-end
+        | ⏰
         a.js-end-date
           span
             | {{_ 'card-end'}}
             unless getPokerEnd
-              i.fa.fa-plus
+              | ➕
         if getPokerEnd
           +pokerEndDate
 

client/components/cards/checklists.jade

@@ -1,14 +1,14 @@
 template(name="checklists")
   .checklists-title
     h3.card-details-item-title
-      i.fa.fa-check
+      | ✅
       | {{_ 'checklists'}}
       if canModifyCard
         +inlinedForm(autoclose=false classNames="js-add-checklist" cardId = cardId  position="top")
           +addChecklistItemForm
         else
           a.add-checklist-top.js-open-inlined-form(title="{{_ 'add-checklist'}}")
-            i.fa.fa-plus
+            | ➕
     if currentUser.isBoardMember
       .material-toggle-switch(title="{{_ 'hide-finished-checklist'}}")
         //span.toggle-switch-title
@@ -28,7 +28,7 @@ template(name="checklists")
       +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=false)
     else
       a.add-checklist.js-open-inlined-form(title="{{_ 'add-checklist'}}")
-        i.fa.fa-plus
+        | ➕
 
 template(name="checklistDetail")
   .js-checklist.checklist.nodragscroll
@@ -38,7 +38,7 @@ template(name="checklistDetail")
       .checklist-title
         span
         if canModifyCard
-          a.fa.fa-navicon.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
+          a.checklist-details-menu.js-open-checklist-details-menu(title="{{_ 'checklistActionsPopup-title'}}")
 
         if canModifyCard
           h4.title.js-open-inlined-form.is-editable
@@ -63,12 +63,12 @@ template(name="checklistDeletePopup")
   button.js-confirm.negate.full(type="submit") {{_ 'delete'}}
 
 template(name="addChecklistItemForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.js-add-checklist-item(rows='1' autofocus)
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
+    a.js-close-inlined-form(title="{{_ 'close-add-checklist-item'}}")
     if showNewlineBecomesNewChecklistItem
       .material-toggle-switch(title="{{_ 'newlineBecomesNewChecklistItem'}}")
         input.toggle-switch(type="checkbox" id="toggleNewlineBecomesNewChecklistItem")
@@ -81,7 +81,7 @@ template(name="addChecklistItemForm")
           | {{_ 'originOrder'}}
 
 template(name="editChecklistItemForm")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+  a(title="{{_ 'copy-text-to-clipboard'}}")
   span.copied-tooltip {{_ 'copied'}}
   textarea.js-edit-checklist-item(rows='1' autofocus dir="auto")
     if $eq type 'item'
@@ -90,12 +90,12 @@ template(name="editChecklistItemForm")
       = checklist.title
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-checklist-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
+    a.js-close-inlined-form(title="{{_ 'close-edit-checklist-item'}}")
     span(title=createdAt) {{ moment createdAt }}
     if canModifyCard
       a.js-delete-checklist-item {{_ "delete"}}...
       a.js-convert-checklist-item-to-card
-        i.fa.fa-copy
+        | 📋
         | {{_ 'convertChecklistItemToCardPopup-title'}}
 
 template(name="checklistItems")
@@ -105,7 +105,7 @@ template(name="checklistItems")
         +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true position="top")
       else
         a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
-          i.fa.fa-plus
+          | ➕
   .checklist-items.js-checklist-items
     each item in checklist.items
       +inlinedForm(classNames="js-edit-checklist-item" item = item checklist = checklist)
@@ -117,7 +117,7 @@ template(name="checklistItems")
         +addChecklistItemForm(checklist=checklist showNewlineBecomesNewChecklistItem=true)
       else
         a.add-checklist-item.js-open-inlined-form(title="{{_ 'add-checklist-item'}}")
-          i.fa.fa-plus
+          | ➕
 
 template(name='checklistItemDetail')
   .js-checklist-item.checklist-item(class="{{#if item.isFinished }}is-checked{{#if checklist.hideCheckedChecklistItems}} invisible{{/if}}{{/if}}{{#if checklist.hideAllChecklistItems}} is-checked invisible{{/if}}"
@@ -140,16 +140,16 @@ template(name="checklistActionsPopup")
   ul.pop-over-list
     li
       a.js-delete-checklist.delete-checklist
-        i.fa.fa-trash
+        | 🗑️
         | {{_ "delete"}} ...
       a.js-move-checklist.move-checklist
-        i.fa.fa-arrow-right
+        | ➡️
         | {{_ "moveChecklist"}} ...
       a.js-copy-checklist.copy-checklist
-        i.fa.fa-copy
+        | 📋
         | {{_ "copyChecklist"}} ...
       a.js-hide-checked-checklist-items
-        i.fa.fa-eye-slash
+        | 🙈
         | {{_ "hideCheckedChecklistItems"}} ...
         .material-toggle-switch(title="{{_ 'hide-checked-items'}}")
           if checklist.hideCheckedChecklistItems
@@ -158,7 +158,7 @@ template(name="checklistActionsPopup")
             input.toggle-switch(type="checkbox" id="toggleHideCheckedChecklistItems_{{checklist._id}}")
           label.toggle-label(for="toggleHideCheckedChecklistItems_{{checklist._id}}")
       a.js-hide-all-checklist-items
-        i.fa.fa-ban
+        | 🚫
         | {{_ "hideAllChecklistItems"}} ...
         .material-toggle-switch(title="{{_ 'hideAllChecklistItems'}}")
           if checklist.hideAllChecklistItems

client/components/cards/labels.jade

@@ -6,7 +6,7 @@ template(name="formLabel")
   .palette-colors: each labels
     span.card-label.palette-color.js-palette-color(class="card-label-{{color}}")
       if(isSelected color)
-        i.fa.fa-check
+        | ✅
 
 template(name="createLabelPopup")
   form.create-label
@@ -28,7 +28,8 @@ template(name="cardLabelsPopup")
   ul.edit-labels-pop-over
     each board.labels
       li.js-card-label-item
-        a.card-label-edit-button.fa.fa-pencil.js-edit-label
+        a.card-label-edit-button.js-edit-label
+          | ✏️
         if isTouchScreenOrShowDesktopDragHandles
           span.fa.label-handle(class="fa-arrows" title="{{_ 'dragLabel'}}")
         span.card-label.card-label-selectable.js-select-label.card-label-wrapper(class="card-label-{{color}}"
@@ -36,5 +37,5 @@ template(name="cardLabelsPopup")
             +viewer
               = name
             if(isLabelSelected ../_id)
-              i.card-label-selectable-icon.fa.fa-check
+              | ✅
   a.quiet-button.full.js-add-label {{_ 'label-create'}}

client/components/cards/resultCard.jade

@@ -13,7 +13,7 @@ template(name="resultCard")
             .broken-cards-null
               | NULL
         if getBoard.archived
-          i.fa.fa-archive
+          | 📦
       li.result-card-context.result-card-context-separator
         = ' '
         | {{_ 'context-separator'}}
@@ -27,7 +27,7 @@ template(name="resultCard")
             .broken-cards-null
               | NULL
         if getSwimlane.archived
-          i.fa.fa-archive
+          | 📦
       li.result-card-context.result-card-context-separator
         = ' '
         | {{_ 'context-separator'}}
@@ -41,4 +41,4 @@ template(name="resultCard")
             .broken-cards-null
               | NULL
         if getList.archived
-          i.fa.fa-archive
+          | 📦

client/components/cards/subtasks.jade

@@ -1,6 +1,6 @@
 template(name="subtasks")
   h3.card-details-item-title
-    i.fa.fa-sitemap
+    | 🌐
     | {{_ 'subtasks'}}
   if currentUser.isBoardAdmin
     if toggleDeleteDialog.get
@@ -16,7 +16,7 @@ template(name="subtasks")
       +addSubtaskItemForm
     else
       a.js-open-inlined-form(title="{{_ 'add-subtask'}}")
-        i.fa.fa-plus
+        | ➕
 
 template(name="subtaskDetail")
   .js-subtasks.subtask
@@ -26,7 +26,7 @@ template(name="subtaskDetail")
       .subtask-title
         span
         if canModifyCard
-          a.fa.fa-navicon.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
+          a.subtask-details-menu.js-open-subtask-details-menu(title="{{_ 'subtaskActionsPopup-title'}}")
         if canModifyCard
           h2.title.js-open-inlined-form.is-editable
             +viewer
@@ -40,7 +40,7 @@ template(name="addSubtaskItemForm")
   textarea.js-add-subtask-item(rows='1' autofocus dir="auto")
   .edit-controls.clearfix
     button.primary.confirm.js-submit-add-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
 
 template(name="editSubtaskItemForm")
   textarea.js-edit-subtask-item(rows='1' autofocus dir="auto")
@@ -50,7 +50,7 @@ template(name="editSubtaskItemForm")
       = subtask.title
   .edit-controls.clearfix
     button.primary.confirm.js-submit-edit-subtask-item-form(type="submit") {{_ 'save'}}
-    a.fa.fa-times-thin.js-close-inlined-form
+    a.js-close-inlined-form
     span(title=createdAt) {{ moment createdAt }}
     if canModifyCard
       if currentUser.isBoardAdmin
@@ -68,7 +68,7 @@ template(name="subtasksItems")
         +addSubtaskItemForm
       else
         a.add-subtask-item.js-open-inlined-form
-          i.fa.fa-plus
+          | ➕
           | {{_ 'add-subtask-item'}}...
 
 template(name='subtaskItemDetail')
@@ -92,10 +92,10 @@ template(name="subtaskActionsPopup")
   ul.pop-over-list
     li
       a.js-view-subtask(title="{{ subtask.title }}")
-        i.fa.fa-eye
+        | 👁️
         | {{_ "view-it"}}
       if currentUser.isBoardAdmin
         a.js-delete-subtask.delete-subtask
-          i.fa.fa-trash
+          | 🗑️
           | {{_ "delete"}} ...
 

client/components/lists/listHeader.jade

@@ -7,7 +7,8 @@ template(name="listHeader")
     else
       if isMiniScreen
         if currentList
-          a.list-header-left-icon.fa.fa-angle-left.js-unselect-list
+          a.list-header-left-icon.js-unselect-list
+            | ◀️
       else
         if collapsed
           if showCardsCountForList cards.length
@@ -78,62 +79,63 @@ template(name="editListTitleForm")
     input.list-name-input.full-line(type="text" value=title autofocus)
     .edit-controls.clearfix
       button.primary.confirm(type="submit") {{_ 'save'}}
-      a.fa.fa-times-thin.js-close-inlined-form
+      a.js-close-inlined-form
+        | ❌
 
 template(name="listActionPopup")
   ul.pop-over-list
     li
       a.js-add-card.list-header-plus-bottom
-        i.fa.fa-plus
+        | ➕
-        i.fa.fa-arrow-down
+        | ⬇️
         | {{_ 'add-card-to-bottom-of-list'}}
   hr
   ul.pop-over-list
     li
       a.js-set-list-width
-        i.fa.fa-arrows-h
+        | ↔️
         |  {{_ 'set-list-width'}}
   ul.pop-over-list
     li
       a.js-toggle-watch-list
         if isWatching
-          i.fa.fa-eye
+          | 👁️
           |  {{_ 'unwatch'}}
         else
-          i.fa.fa-eye-slash
+          | 🙈
           |  {{_ 'watch'}}
   unless currentUser.isCommentOnly
     unless currentUser.isWorker
       ul.pop-over-list
         li
           a.js-set-color-list
-            i.fa.fa-paint-brush
+            | 🎨
             | {{_ 'set-color-list'}}
     ul.pop-over-list
       if cards.length
         li
           a.js-select-cards
-            i.fa.fa-check-square
+            | ☑️
             | {{_ 'list-select-cards'}}
     if currentUser.isBoardAdmin
       ul.pop-over-list
         li
           a.js-set-wip-limit
-            i.fa.fa-ban
+            | 🚫
             | {{#if isWipLimitEnabled }}{{_ 'edit-wip-limit'}}{{else}}{{_ 'setWipLimitPopup-title'}}{{/if}}
     unless currentUser.isWorker
       hr
       ul.pop-over-list
         li
           a.js-close-list
-            i.fa.fa-arrow-right
+            | ➡️
-            i.fa.fa-archive
+            | 📦
             | {{_ 'archive-list'}}
     hr
     ul.pop-over-list
       li
         a.js-more
-          i.fa.fa-link
+          | 🔗
           | {{_ 'listMorePopup-title'}}
 
 template(name="boardLists")
@@ -150,7 +152,7 @@ template(name="listMorePopup")
     span.clearfix
       span {{_ 'link-list'}}
       = ' '
-      i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}")
+      | {{#if board.isPublic}}🌐{{else}}🔒{{/if}}
       input.inline-input(type="text" readonly value="{{ rootUrl }}")
     | {{_ 'added'}}
     span.date(title=list.createdAt) {{ moment createdAt 'LLL' }}
@@ -170,7 +172,7 @@ template(name="setWipLimitPopup")
     ul.pop-over-list
       li: a.js-enable-wip-limit {{_ 'enable-wip-limit'}}
         if isWipLimitEnabled
-          i.fa.fa-check
+          | ✅
     if isWipLimitEnabled
       p
         input.wip-limit-value(type="number" value="{{ wipLimitValue }}" min="1" max="99")
@@ -198,7 +200,7 @@ template(name="setListWidthPopup")
         br
         a.js-auto-width-board(
           title="{{#if isAutoWidth}}{{_ 'click-to-disable-auto-width'}}{{else}}{{_ 'click-to-enable-auto-width'}}{{/if}}")
-          i.fa(class="fa-solid fa-{{#if isAutoWidth}}compress{{else}}expand{{/if}}")
+          | {{#if isAutoWidth}}🗜️{{else}}📏{{/if}}
           span {{_ 'auto-list-width'}}
 
 template(name="listWidthErrorPopup")
@@ -212,6 +214,6 @@ template(name="setListColorPopup")
       // note: we use the swimlane palette to have more than just the border
       span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
         if(isSelected color)
-          i.fa.fa-check
+          | ✅
     button.primary.confirm.js-submit {{_ 'save'}}
     button.js-remove-color.negate.wide.right {{_ 'unset-color'}}

client/components/main/dueCards.jade

@@ -1,23 +1,23 @@
 template(name="dueCardsHeaderBar")
   if currentUser
     h1
-      i.fa.fa-calendar
+      | 📅
       | {{_ 'dueCards-title'}}
 
     .board-header-btns.left
       a.board-header-btn.js-due-cards-view-change(title="{{_ 'dueCardsViewChange-title'}}")
-        i.fa.fa-caret-down
+        | ▼
         if $eq dueCardsView 'me'
-          i.fa.fa-user
+          | 👤
           | {{_ 'dueCardsViewChange-choice-me'}}
         if $eq dueCardsView 'all'
-          i.fa.fa-users
+          | 👥
           | {{_ 'dueCardsViewChange-choice-all'}}
 
 template(name="dueCardsModalTitle")
   if currentUser
     h2
-      i.fa.fa-keyboard-o
+      | ⌨️
       | {{_ 'dueCards-title'}}
 
 template(name="dueCards")
@@ -40,18 +40,18 @@ template(name="dueCardsViewChangePopup")
       li
         with "dueCardsViewChange-choice-me"
           a.js-due-cards-view-me
-            i.fa.fa-user.colorful
+            | 👤
             | {{_ 'dueCardsViewChange-choice-me'}}
             if $eq Utils.dueCardsView "me"
-              i.fa.fa-check
+              | ✅
       hr
       li
         with "dueCardsViewChange-choice-all"
           a.js-due-cards-view-all
-            i.fa.fa-users.colorful
+            | 👥
             | {{_ 'dueCardsViewChange-choice-all'}}
             span.sub-name
               +viewer
                 | {{_ 'dueCardsViewChange-choice-all-description' }}
             if $eq Utils.dueCardsView "all"
-              i.fa.fa-check
+              | ✅

client/components/main/editor.jade

@@ -1,6 +1,8 @@
 template(name="editor")
-  a.fa.fa-brands.fa-markdown(title="{{_ 'convert-to-markdown'}}")
+  a(title="{{_ 'convert-to-markdown'}}")
-  a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}")
+    | 📝
+  a(title="{{_ 'copy-text-to-clipboard'}}")
+    | 📋
   span.copied-tooltip {{_ 'copied'}}
   textarea.editor(
     dir="auto"

client/components/main/globalSearch.jade

@@ -1,20 +1,21 @@
 template(name="globalSearchHeaderBar")
   if currentUser
     h1
-      i.fa.fa-search
+      | 🔍
       | {{_ 'globalSearch-title'}}
 
 template(name="globalSearchModalTitle")
   if currentUser
     h2
-      i.fa.fa-keyboard-o
+      | ⌨️
       | {{_ 'globalSearch-title'}}
 
 template(name="resultsPaged")
   if resultsHeading.get
     h1
       = resultsHeading.get
-      a.fa.fa-link(title="{{_ 'link-to-search' }}" href="{{ getSearchHref }}")
+      a(title="{{_ 'link-to-search' }}" href="{{ getSearchHref }}")
+        | 🔗
   each card in results.get
     +resultCard(card)
   table.global-search-footer
@@ -41,7 +42,8 @@ template(name="globalSearch")
           value="{{ query.get }}"
           autofocus dir="auto"
         )
-        a.js-new-search.fa.fa-eraser
+        a.js-new-search
+          | 🧹
       if debug.get.show
         h1 Debug
         if debug.get.showSelector

client/components/main/header.css

@@ -58,7 +58,7 @@
   float: left;
   overflow: hidden;
   line-height: 28px;
-  margin: 0 2px;
+  margin: 0 12px;
 }
 #header #header-main-bar .board-header-btn i.fa {
   float: left;

client/components/main/keyboardShortcuts.jade

@@ -1,12 +1,12 @@
 template(name="shortcutsHeaderBar")
   h1
     a.back-btn(href="{{pathFor 'home'}}")
-      i.fa.fa-chevron-left
+      | ◀️
     | {{_ 'keyboard-shortcuts'}}
 
 template(name="shortcutsModalTitle")
   h2
-    i.fa.fa-keyboard-o
+    | ⌨️
     | {{_ 'keyboard-shortcuts'}}
 
 template(name="keyboardShortcuts")

client/components/main/myCards.jade

@@ -3,23 +3,23 @@ template(name="myCardsHeaderBar")
     h1
       //a.back-btn(href="{{pathFor 'home'}}")
       //  i.fa.fa-chevron-left
-      i.fa.fa-list
+      | 📋
       | {{_ 'my-cards'}}
 
     .board-header-btns.left
       a.board-header-btn.js-my-cards-view-change(title="{{_ 'myCardsViewChange-title'}}")
-        i.fa.fa-caret-down
+        | ▼
         if $eq myCardsView 'boards'
-          i.fa.fa-trello
+          | 📋
           | {{_ 'myCardsViewChange-choice-boards'}}
         if $eq myCardsView 'table'
-          i.fa.fa-table
+          | 📊
           | {{_ 'myCardsViewChange-choice-table'}}
 
 template(name="myCardsModalTitle")
   if currentUser
     h2
-      i.fa.fa-keyboard-o
+      | ⌨️
       | {{_ 'my-cards'}}
 
 template(name="myCards")
@@ -102,15 +102,15 @@ template(name="myCardsViewChangePopup")
       li
         with "myCardsViewChange-choice-boards"
           a.js-my-cards-view-boards
-            i.fa.fa-trello.colorful
+            | 📋
             | {{_ 'myCardsViewChange-choice-boards'}}
             if $eq Utils.myCardsView "boards"
-              i.fa.fa-check
+              | ✅
       hr
       li
         with "myCardsViewChange-choice-table"
           a.js-my-cards-view-table
-            i.fa.fa-table.colorful
+            | 📊
             | {{_ 'myCardsViewChange-choice-table'}}
             if $eq Utils.myCardsView "table"
-              i.fa.fa-check
+              | ✅

client/components/notifications/notifications.jade

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

client/components/rules/actions/boardActions.jade

@@ -10,7 +10,7 @@ template(name="boardActions")
       div.trigger-text
         | {{_'r-its-list'}}
     div.trigger-button.js-add-gen-move-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -38,7 +38,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlaneName",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-add-spec-move-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -49,7 +49,7 @@ template(name="boardActions")
       div.trigger-text
         | {{_'r-card'}}
     div.trigger-button.js-add-arch-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -58,7 +58,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlane-name",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-add-swimlane-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -75,7 +75,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlane-name2",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-create-card-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -99,7 +99,7 @@ template(name="boardActions")
       div.trigger-dropdown
         input(id="swimlaneName-link",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-link-card-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
 
 

client/components/rules/actions/cardActions.jade

@@ -16,7 +16,7 @@ template(name="cardActions")
       div.trigger-text
         | {{_'r-to-current-datetime'}}
     div.trigger-button.js-set-date-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -30,7 +30,7 @@ template(name="cardActions")
           option(value="endAt") {{_'r-df-end-at'}}
           option(value="receivedAt") {{_'r-df-received-at'}}
     div.trigger-button.js-remove-datevalue-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -46,7 +46,7 @@ template(name="cardActions")
             option(value="#{_id}")
               = name
     div.trigger-button.js-add-label-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -59,14 +59,14 @@ template(name="cardActions")
       div.trigger-dropdown
         input(id="member-name",type=text,placeholder="{{_'r-name'}}")
     div.trigger-button.js-add-member-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
       div.trigger-text
         | {{_'r-remove-all'}}
     div.trigger-button.js-add-removeall-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -77,12 +77,12 @@ template(name="cardActions")
           class="card-details-{{cardColorButton}}")
           | {{_ cardColorButtonText }}
     div.trigger-button.js-set-color-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
 template(name="setCardActionsColorPopup")
   form.edit-label
     .palette-colors: each colors
       span.card-label.palette-color.js-palette-color(class="card-details-{{color}}")
         if(isSelected color)
-          i.fa.fa-check
+          | ✅
     button.primary.confirm.js-submit {{_ 'save'}}

client/components/rules/actions/checklistActions.jade

@@ -10,7 +10,7 @@ template(name="checklistActions")
       div.trigger-dropdown
         input(id="checklist-name",type=text,placeholder="{{_'r-name'}}")  
     div.trigger-button.js-add-checklist-action.js-goto-rules
-      i.fa.fa-plus  
+      | ➕  
 
   div.trigger-item
     div.trigger-content
@@ -23,7 +23,7 @@ template(name="checklistActions")
       div.trigger-dropdown
         input(id="checklist-name2",type=text,placeholder="{{_'r-name'}}")  
     div.trigger-button.js-add-checkall-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
 
   div.trigger-item
@@ -41,7 +41,7 @@ template(name="checklistActions")
       div.trigger-dropdown
         input(id="checklist-name3",type=text,placeholder="{{_'r-name'}}")  
     div.trigger-button.js-add-check-item-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
       div.trigger-content
@@ -54,7 +54,7 @@ template(name="checklistActions")
         div.trigger-dropdown
           input(id="checklist-items",type=text,placeholder="{{_'r-items-list'}}")    
       div.trigger-button.js-add-checklist-items-action.js-goto-rules
-        i.fa.fa-plus  
+        | ➕  
 
   div.trigger-item
       div.trigger-content

client/components/rules/actions/mailActions.jade

@@ -8,4 +8,4 @@ template(name="mailActions")
       input(id="email-subject",type=text,placeholder="{{_'r-subject'}}")
       textarea(id="email-msg")  
     div.trigger-button.trigger-button-email.js-mail-action.js-goto-rules
-      i.fa.fa-plus
+      | ➕

client/components/rules/ruleDetails.jade

@@ -1,7 +1,7 @@
 template(name="ruleDetails")
   .rules
     h2
-      i.fa.fa-magic
+      | ✨
       | {{_ 'r-rule-details' }}
     .triggers-content
         .triggers-body
@@ -20,5 +20,5 @@ template(name="ruleDetails")
                         = action 
     div.rules-back
         button.js-goback
-          i.fa.fa-chevron-left
+          | ◀️
           | {{_ 'back'}}

client/components/rules/rulesActions.jade

@@ -1,19 +1,19 @@
 template(name="rulesActions")
   h2
-    i.fa.fa-magic
+    | ✨
     | {{_ 'r-rule' }} "#{data.ruleName.get}" - {{_ 'r-add-action'}}
   .triggers-content
     .triggers-body
       .triggers-side-menu
         ul
           li.active.js-set-board-actions
-            i.fa.fa-columns
+            | 📊
           li.js-set-card-actions
-            i.fa.fa-sticky-note
+            | 📝
           li.js-set-checklist-actions
-            i.fa.fa-check
+            | ✅
           li.js-set-mail-actions
-            i.fa.fa-at
+            | @
       .triggers-main-body
         if ($eq currentActions.get 'board')
           +boardActions(ruleName=data.ruleName triggerVar=data.triggerVar)
@@ -25,5 +25,5 @@ template(name="rulesActions")
           +mailActions(ruleName=data.ruleName triggerVar=data.triggerVar)
   div.rules-back
         button.js-goback
-          i.fa.fa-chevron-left
+          | ◀️
           | {{_ 'back'}}

client/components/rules/rulesList.jade

@@ -1,7 +1,7 @@
 template(name="rulesList")
   .rules
     h2
-      i.fa.fa-magic
+      | ✨
       | {{_ 'r-board-rules' }}
 
     ul.rules-list
@@ -11,27 +11,27 @@ template(name="rulesList")
             = title
           div.rules-btns-group
             button.js-goto-details
-              i.fa.fa-eye
+              | 👁️
               | {{_ 'r-view-rule'}}
             if currentUser.isAdmin
               button.js-delete-rule
-                i.fa.fa-trash-o
+                | 🗑️
                 | {{_ 'r-delete-rule'}}
             else if currentUser.isBoardAdmin
               button.js-delete-rule
-                i.fa.fa-trash-o
+                | 🗑️
                 | {{_ 'r-delete-rule'}}
       else
         li.no-items-message {{_ 'r-no-rules' }}
     if currentUser.isAdmin
       div.rules-add
         button.js-goto-trigger
-          i.fa.fa-plus
+          | ➕
           | {{_ 'r-add-rule'}}
         input(type=text,placeholder="{{_ 'r-new-rule-name' }}",id="ruleTitle")
     else if currentUser.isBoardAdmin
       div.rules-add
         button.js-goto-trigger
-          i.fa.fa-plus
+          | ➕
           | {{_ 'r-add-rule'}}
         input(type=text,placeholder="{{_ 'r-new-rule-name' }}",id="ruleTitle")

client/components/rules/rulesTriggers.jade

@@ -1,17 +1,17 @@
 template(name="rulesTriggers")
   h2
-    i.fa.fa-magic
+    | ✨
     | {{_ 'r-rule' }} "#{data.ruleName.get}" - {{_ 'r-add-trigger'}}
   .triggers-content
     .triggers-body
       .triggers-side-menu
         ul
           li.active.js-set-board-triggers
-            i.fa.fa-columns
+            | 📊
           li.js-set-card-triggers
-            i.fa.fa-sticky-note
+            | 📝
           li.js-set-checklist-triggers
-            i.fa.fa-check
+            | ✅
       .triggers-main-body
         if showBoardTrigger.get
           +boardTriggers
@@ -21,5 +21,5 @@ template(name="rulesTriggers")
           +checklistTriggers
   div.rules-back
         button.js-goback
-          i.fa.fa-chevron-left
+          | ◀️
           | {{_ 'back'}}

client/components/rules/triggers/boardTriggers.jade

@@ -4,7 +4,7 @@ template(name="boardTriggers")
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is'}}
       div.trigger-text 
@@ -18,39 +18,39 @@ template(name="boardTriggers")
       div.trigger-dropdown
         input(id="create-swimlane-name",type=text,placeholder="{{_'r-swimlane-name'}}") 
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-create-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item#trigger-three
     div.trigger-content
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is-moved'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-moved-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item#trigger-four
     div.trigger-content
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is'}}
       div.trigger-dropdown
@@ -66,21 +66,21 @@ template(name="boardTriggers")
       div.trigger-dropdown
         input(id="create-swimlane-name-2",type=text,placeholder="{{_'r-swimlane-name'}}") 
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-moved-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item#trigger-five
     div.trigger-content
       div.trigger-text 
         | {{_'r-when-a-card'}}
       div.trigger-inline-button.js-open-card-title-popup 
-        i.fa.fa-filter
+        | 🔍
       div.trigger-text 
         | {{_'r-is'}}
       div.trigger-dropdown
@@ -88,14 +88,14 @@ template(name="boardTriggers")
           option(value="archived") {{_'r-archived'}}
           option(value="unarchived") {{_'r-unarchived'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-arch-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
       div.trigger-content

client/components/rules/triggers/cardTriggers.jade

@@ -10,14 +10,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-label-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -37,14 +37,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-label-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -57,14 +57,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-member-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
 
   div.trigger-item
@@ -82,14 +82,14 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-member-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -104,11 +104,11 @@ template(name="cardTriggers")
       div.trigger-text
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-attachment-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕

client/components/rules/triggers/checklistTriggers.jade

@@ -10,14 +10,14 @@ template(name="checklistTriggers")
       div.trigger-text 
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-check-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
 
   div.trigger-item
@@ -35,14 +35,14 @@ template(name="checklistTriggers")
       div.trigger-text 
         | {{_'r-a-card'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-check-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -53,14 +53,14 @@ template(name="checklistTriggers")
           option(value="completed") {{_'r-completed'}}
           option(value="uncompleted") {{_'r-made-incomplete'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-comp-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -75,14 +75,14 @@ template(name="checklistTriggers")
           option(value="completed") {{_'r-completed'}}
           option(value="uncompleted") {{_'r-made-incomplete'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-comp-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -93,14 +93,14 @@ template(name="checklistTriggers")
           option(value="checked") {{_'r-checked'}}
           option(value="unchecked") {{_'r-unchecked'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-gen-check-item-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕
 
   div.trigger-item
     div.trigger-content
@@ -115,11 +115,11 @@ template(name="checklistTriggers")
           option(value="checked") {{_'r-checked'}}
           option(value="unchecked") {{_'r-unchecked'}}
       div.trigger-button.trigger-button-person.js-show-user-field
-        i.fa.fa-user
+        | 👤
       div.user-details.hide-element
         div.trigger-text
           | {{_'r-by'}}
         div.trigger-dropdown
           input(class="user-name",type=text,placeholder="{{_'username'}}")
     div.trigger-button.js-add-spec-check-item-trigger.js-goto-action
-      i.fa.fa-plus
+      | ➕

client/components/settings/adminReports.jade

@@ -8,27 +8,27 @@ template(name="adminReports")
           ul
             li
               a.js-report-broken(data-id="report-broken")
-                i.fa.fa-chain-broken
+                | 🔗
                 | {{_ 'broken-cards'}}
 
             li
               a.js-report-files(data-id="report-files")
-                i.fa.fa-paperclip
+                | 📎
                 | {{_ 'filesReportTitle'}}
 
             li
               a.js-report-rules(data-id="report-rules")
-                i.fa.fa-magic
+                | ✨
                 | {{_ 'rulesReportTitle'}}
 
             li
               a.js-report-boards(data-id="report-boards")
-                i.fa.fa-magic
+                | ✨
                 | {{_ 'boardsReportTitle'}}
 
             li
               a.js-report-cards(data-id="report-cards")
-                i.fa.fa-magic
+                | ✨
                 | {{_ 'cardsReportTitle'}}
 
         .main-body

client/components/settings/attachments.jade

@@ -8,7 +8,7 @@ template(name="attachments")
           ul
             li
               a.js-move-attachments(data-id="move-attachments")
-                i.fa.fa-arrow-right
+                | ➡️
                 | {{_ 'attachment-move'}}
 
         .main-body
@@ -80,17 +80,17 @@ template(name="moveAttachment")
       td
         if $neq version.storageName "fs"
           button.js-move-storage-fs
-            i.fa.fa-arrow-right
+            | ➡️
             | {{_ 'attachment-move-storage-fs'}}
 
         if $neq version.storageName "gridfs"
           if version.storageName
             button.js-move-storage-gridfs
-              i.fa.fa-arrow-right
+              | ➡️
               | {{_ 'attachment-move-storage-gridfs'}}
 
         if $neq version.storageName "s3"
           if version.storageName
             button.js-move-storage-s3
-              i.fa.fa-arrow-right
+              | ➡️
               | {{_ 'attachment-move-storage-s3'}}

client/components/settings/informationBody.jade

@@ -5,14 +5,14 @@ template(name='information')
     else
       .content-title
         span
-          i.fa.fa-info-circle
+          | ℹ️
           | {{_ 'info'}}
       .content-body
         .side-menu
           ul
             li.active
               a.js-setting-menu(data-id="information-display")
-                i.fa.fa-info-circle
+                | ℹ️
                 | {{_ 'info'}}
         .main-body
           +statistics

client/components/settings/peopleBody.jade

@@ -9,34 +9,34 @@ template(name="people")
             +spinner
           else if orgSetting.get
             span
-              i.fa.fa-sitemap
+              | 🌐
               unless isMiniScreen
                 | {{_ 'organizations'}}
             input#searchOrgInput(placeholder="{{_ 'search'}}")
             button#searchOrgButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'org-number'}}{{/unless}} #{orgNumber}
           else if teamSetting.get
             span
-              i.fa.fa-users
+              | 👥
               unless isMiniScreen
                 | {{_ 'teams'}}
             input#searchTeamInput(placeholder="{{_ 'search'}}")
             button#searchTeamButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'team-number'}}{{/unless}} #{teamNumber}
           else if peopleSetting.get
             span
-              i.fa.fa-user
+              | 👤
               unless isMiniScreen
                 | {{_ 'people'}}
             input#searchInput(placeholder="{{_ 'search'}}")
             button#searchButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .divLockedUsersFilter
               .flex-container
@@ -47,17 +47,17 @@ template(name="people")
                   option(value="active") {{_ 'admin-people-filter-active'}}
                   option(value="inactive") {{_ 'admin-people-filter-inactive'}}
               button#unlockAllUsers.unlock-all-btn
-                i.fa.fa-unlock
+                | 🔓
                 | {{_ 'accounts-lockout-unlock-all'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'people-number'}}{{/unless}} #{peopleNumber}
             .divAddOrRemoveTeam#divAddOrRemoveTeam
               button#addOrRemoveTeam
-                i.fa.fa-edit
+                | ✏️
                 | {{_ 'add'}} / {{_ 'delete'}} {{_ 'teams'}}
           else if lockedUsersSetting.get
             span
-              i.fa.fa-lock.text-red
+              | 🔒.text-red
               unless isMiniScreen
                 | {{_ 'accounts-lockout-locked-users'}}
 
@@ -66,19 +66,19 @@ template(name="people")
           ul
             li.active
               a.js-org-menu(data-id="org-setting")
-                i.fa.fa-sitemap
+                | 🌐
                 | {{_ 'organizations'}}
             li
               a.js-team-menu(data-id="team-setting")
-                i.fa.fa-users
+                | 👥
                 | {{_ 'teams'}}
             li
               a.js-people-menu(data-id="people-setting")
-                i.fa.fa-user
+                | 👤
                 | {{_ 'people'}}
             li
               a.js-locked-users-menu(data-id="locked-users-setting")
-                i.fa.fa-lock.text-red
+                | 🔒.text-red
                 | {{_ 'accounts-lockout-locked-users'}}
         .main-body
           if loading.get
@@ -163,17 +163,17 @@ template(name="selectAllUser")
 
 template(name="newOrgRow")
   a.new-org
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="newTeamRow")
   a.new-team
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="newUserRow")
   a.new-user
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="orgRow")
@@ -209,10 +209,10 @@ template(name="orgRow")
         | {{_ 'no'}}
     td
       a.edit-org
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-org
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="teamRow")
   tr
@@ -243,10 +243,10 @@ template(name="teamRow")
         | {{_ 'no'}}
     td
       a.edit-team
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-team
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="peopleRow")
   tr
@@ -258,14 +258,14 @@ template(name="peopleRow")
         input.selectUserChkBox(type="checkbox", id="{{userData._id}}")
     td.account-status
       if isUserLocked
-        i.fa.fa-lock.text-red.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="true", title="{{_ 'accounts-lockout-click-to-unlock'}}")
+        | 🔒.text-red.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="true", title="{{_ 'accounts-lockout-click-to-unlock'}}")
       else
-        i.fa.fa-unlock.text-green.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="false", title="{{_ 'accounts-lockout-user-unlocked'}}")
+        | 🔓.text-green.js-toggle-lock-status(data-user-id=userData._id, data-is-locked="false", title="{{_ 'accounts-lockout-user-unlocked'}}")
     td.account-active-status
       if userData.loginDisabled
-        i.fa.fa-ban.text-red.js-toggle-active-status(data-user-id=userData._id, data-is-active="false", title="{{_ 'admin-people-user-inactive'}}")
+        | 🚫.text-red.js-toggle-active-status(data-user-id=userData._id, data-is-active="false", title="{{_ 'admin-people-user-inactive'}}")
       else
-        i.fa.fa-check-circle.text-green.js-toggle-active-status(data-user-id=userData._id, data-is-active="true", title="{{_ 'admin-people-user-active'}}")
+        | ✅.text-green.js-toggle-active-status(data-user-id=userData._id, data-is-active="true", title="{{_ 'admin-people-user-active'}}")
     if userData.loginDisabled
       td.username <s>{{ userData.username }}</s>
     else if isUserLocked
@@ -335,10 +335,10 @@ template(name="peopleRow")
       td {{ userData.teamsUserBelongs }}
     td
       a.edit-user
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-user
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="editOrgPopup")
   form
@@ -448,8 +448,8 @@ template(name="editUserPopup")
             option(value="{{value}}") {{_ value}}
     label
       | {{_ 'organizations'}}
-      i.fa.fa-plus-square#addUserOrg
+      | ➕#addUserOrg
-      i.fa.fa-minus-square#removeUserOrg
+      | ➖#removeUserOrg
       select.js-orgs#jsOrgs
         option(value="-1") {{_ 'organizations'}} :
         each value in orgsDatas
@@ -458,8 +458,8 @@ template(name="editUserPopup")
       input#jsUserOrgIdsInPut.js-userOrgIds.hide(type="hidden" value=user.orgIdsUserBelongs)
     label
       | {{_ 'teams'}}
-      i.fa.fa-plus-square#addUserTeam
+      | ➕#addUserTeam
-      i.fa.fa-minus-square#removeUserTeam
+      | ➖#removeUserTeam
       select.js-teams#jsTeams
         option(value="-1") {{_ 'teams'}} :
         each value in teamsDatas
@@ -591,8 +591,8 @@ template(name="newUserPopup")
             option(value="{{value}}") {{_ value}}
     label
       | {{_ 'organizations'}}
-      i.fa.fa-plus-square#addUserOrgNewUser
+      | ➕#addUserOrgNewUser
-      i.fa.fa-minus-square#removeUserOrgNewUser
+      | ➖#removeUserOrgNewUser
       select.js-orgsNewUser#jsOrgsNewUser
         option(value="-1") {{_ 'organizations'}} :
         each value in orgsDatas
@@ -601,8 +601,8 @@ template(name="newUserPopup")
       input#jsUserOrgIdsInPutNewUser.js-userOrgIdsNewUser.hide(type="text" value=user.orgIdsUserBelongs)
     label
       | {{_ 'teams'}}
-      i.fa.fa-plus-square#addUserTeamNewUser
+      | ➕#addUserTeamNewUser
-      i.fa.fa-minus-square#removeUserTeamNewUser
+      | ➖#removeUserTeamNewUser
       select.js-teamsNewUser#jsTeamsNewUser
         option(value="-1") {{_ 'teams'}} :
         each value in teamsDatas
@@ -636,7 +636,7 @@ template(name="settingsOrgPopup")
   // to impersonate organization?
   //  li
   //    a.impersonate-org
-  //      i.fa.fa-user
+  //      | 👤
   //      | {{_ 'impersonate-org'}}
   //
   //
@@ -659,7 +659,7 @@ template(name="settingsUserPopup")
   ul.pop-over-list
     li
       a.impersonate-user
-        i.fa.fa-user
+        | 👤
         | {{_ 'impersonate-user'}}
     br
     hr

client/components/settings/settingHeader.jade

@@ -5,31 +5,31 @@ template(name="settingHeaderBar")
   .setting-header-btns.left
     if currentUser
       a.setting-header-btn.settings(href="{{pathFor 'setting'}}")
-        i.fa(class="fa-cog")
+        | ⚙️
         span {{_ 'settings'}}
 
       a.setting-header-btn.people(href="{{pathFor 'people'}}")
-        i.fa(class="fa-users")
+        | 👥
         span {{_ 'people'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'admin-reports'}}")
-        i.fa(class="fa-list")
+        | 📋
         span {{_ 'reports'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'attachments'}}")
-        i.fa(class="fa-paperclip")
+        | 📎
         span {{_ 'attachments'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'translation'}}")
-        i.fa(class="fa-font")
+        | 🔤
         span {{_ 'translation'}}
 
       a.setting-header-btn.informations(href="{{pathFor 'information'}}")
-        i.fa(class="fa-info-circle")
+        | ℹ️
         span {{_ 'info'}}
 
     else
       a.setting-header-btn.js-log-in(
         title="{{_ 'log-in'}}")
-        i.fa.fa-sign-in
+        | 🚪
         span {{_ 'log-in'}}

client/components/settings/translationBody.jade

@@ -9,12 +9,12 @@ template(name="translation")
             +spinner
           else if translationSetting.get
             span
-              i.fa.fa-font
+              | 🔤
               unless isMiniScreen
                 | {{_ 'translation'}}
             input#searchTranslationInput(placeholder="{{_ 'search'}}")
             button#searchTranslationButton
-              i.fa.fa-search
+              | 🔍
               | {{_ 'search'}}
             .ext-box-right
               span {{#unless isMiniScreen}}{{_ 'translation-number'}}{{/unless}} #{translationNumber}
@@ -24,7 +24,7 @@ template(name="translation")
           ul
             li.active
               a.js-translation-menu(data-id="translation-setting")
-                i.fa.fa-font
+                | 🔤
                 | {{_ 'translation'}}
         .main-body
           if loading.get
@@ -47,7 +47,7 @@ template(name="translationGeneral")
 
 template(name="newTranslationRow")
   a.new-translation
-    i.fa.fa-plus-square
+    | ➕
     | {{_ 'new'}}
 
 template(name="translationRow")
@@ -57,10 +57,10 @@ template(name="translationRow")
     td {{translationData.translationText}}
     td
       a.edit-translation
-        i.fa.fa-edit
+        | ✏️
         | {{_ 'edit'}}
       a.more-settings-translation
-        i.fa.fa-ellipsis-h
+        | ⋯
 
 template(name="editTranslationPopup")
   form

client/components/sidebar/sidebar.jade

@@ -187,14 +187,14 @@ template(name="boardInfoOnMyBoardsPopup")
         a.flex.js-field-has-cardcounterlist(class="{{#if allowsCardCounterList}}is-checked{{/if}}")
           .materialCheckBox(class="{{#if allowsCardCounterList}}is-checked{{/if}}")
           span
-            i.fa.fa-sign-out
+            | 🚪
             | {{_ 'show-card-counter-per-list'}}
     unless currentSetting.hideBoardMemberList
       div.check-div
         a.flex.js-field-has-boardmemberlist(class="{{#if allowsBoardMemberList}}is-checked{{/if}}")
           .materialCheckBox(class="{{#if allowsBoardMemberList}}is-checked{{/if}}")
           span
-            i.fa.fa-hourglass-start
+            | ⏳
             | {{_ 'show-board_members-avatar'}}
 
 template(name="boardCardSettingsPopup")
@@ -204,149 +204,149 @@ template(name="boardCardSettingsPopup")
       a.flex.js-field-has-receiveddate(class="{{#if allowsReceivedDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsReceivedDate}}is-checked{{/if}}")
         span
-          i.fa.fa-sign-out
+          | 🚪
           | {{_ 'card-received'}}
     div.check-div
       a.flex.js-field-has-startdate(class="{{#if allowsStartDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsStartDate}}is-checked{{/if}}")
         span
-          i.fa.fa-hourglass-start
+          | ⏳
           | {{_ 'card-start'}}
     div.check-div
       a.flex.js-field-has-duedate(class="{{#if allowsDueDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDueDate}}is-checked{{/if}}")
         span
-          i.fa.fa-sign-in
+          | 🚪
           | {{_ 'card-due'}}
     div.check-div
       a.flex.js-field-has-enddate(class="{{#if allowsEndDate}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsEndDate}}is-checked{{/if}}")
         span
-          i.fa.fa-hourglass-end
+          | ⏰
           | {{_ 'card-end'}}
     div.check-div
       a.flex.js-field-has-members(class="{{#if allowsMembers}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsMembers}}is-checked{{/if}}")
         span
-          i.fa.fa-users
+          | 👥
           | {{_ 'members'}}
     div.check-div
       a.flex.js-field-has-creator(class="{{#if allowsCreator}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCreator}}is-checked{{/if}}")
         span
-          i.fa.fa-user
+          | 👤
           | {{_ 'creator'}}
     div.check-div
       a.flex.js-field-has-creator-on-minicard(class="{{#if allowsCreatorOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCreatorOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-user
+          | 👤
           | {{_ 'creator-on-minicard'}}
     div.check-div
       a.flex.js-field-has-assignee(class="{{#if allowsAssignee}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsAssignee}}is-checked{{/if}}")
         span
-          i.fa.fa-user
+          | 👤
           | {{_ 'assignee'}}
     div.check-div
       a.flex.js-field-has-assigned-by(class="{{#if allowsAssignedBy}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsAssignedBy}}is-checked{{/if}}")
         span
-          i.fa.fa-shopping-cart
+          | 🛒
           | {{_ 'assigned-by'}}
     div.check-div
       a.flex.js-field-has-requested-by(class="{{#if allowsRequestedBy}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsRequestedBy}}is-checked{{/if}}")
         span
-          i.fa.fa-user-plus
+          | 👤➕
           | {{_ 'requested-by'}}
     div.check-div
       a.flex.js-field-has-card-sorting-by-number(class="{{#if allowsCardSortingByNumber}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCardSortingByNumber}}is-checked{{/if}}")
         span
-          i.fa.fa-sort
+          | 🔢
           | {{_ 'card-sorting-by-number'}}
     div.check-div
       a.flex.js-field-has-card-sorting-by-number-on-minicard(class="{{#if allowsCardSortingByNumberOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCardSortingByNumberOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-sort
+          | 🔢
           | {{_ 'card-sorting-by-number-on-minicard'}}
     div.check-div
       a.flex.js-field-has-card-show-lists(class="{{#if allowsShowLists}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsShowLists}}is-checked{{/if}}")
         span
-          i.fa.fa-list
+          | 📋
           | {{_ 'card-show-lists'}}
     div.check-div
       a.flex.js-field-has-labels(class="{{#if allowsLabels}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsLabels}}is-checked{{/if}}")
         span
-          i.fa.fa-tags
+          | 🏷️
           | {{_ 'labels'}}
     div.check-div
       a.flex.js-field-has-card-show-lists-on-minicard(class="{{#if allowsShowListsOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsShowListsOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-list
+          | 📋
           | {{_ 'card-show-lists-on-minicard'}}
     div.check-div
       a.flex.js-field-has-card-number(class="{{#if allowsCardNumber}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCardNumber}}is-checked{{/if}}")
         span
-          i.fa.fa-hashtag
+          | #️⃣
           | {{_ 'card'}}
           | {{_ 'number'}}
     div.check-div
       a.flex.js-field-has-description-title(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDescriptionTitle}}is-checked{{/if}}")
         span
-          i.fa.fa-align-left
+          | 📝
           | {{_ 'description'}}
           | {{_ 'title'}}
     div.check-div
       a.flex.js-field-has-description-text(class="{{#if allowsDescriptionText}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDescriptionText}}is-checked{{/if}}")
         span
-          i.fa.fa-align-left
+          | 📝
           | {{_ 'description'}}
           | {{_ 'custom-field-text'}}
     div.check-div
       a.flex.js-field-has-description-text-on-minicard(class="{{#if allowsDescriptionTextOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsDescriptionTextOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-align-left
+          | 📝
           | {{_ 'description-on-minicard'}}
     div.check-div
       a.flex.js-field-has-checklists(class="{{#if allowsChecklists}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsChecklists}}is-checked{{/if}}")
         span
-          i.fa.fa-check
+          | ✅
           | {{_ 'checklists'}}
     div.check-div
       a.flex.js-field-has-subtasks(class="{{#if allowsSubtasks}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsSubtasks}}is-checked{{/if}}")
         span
-          i.fa.fa-sitemap
+          | 🌐
           | {{_ 'subtasks'}}
     div.check-div
       a.flex.js-field-has-attachments(class="{{#if allowsAttachments}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsAttachments}}is-checked{{/if}}")
         span
-          i.fa.fa-paperclip
+          | 📎
           | {{_ 'attachments'}}
     div.check-div
       a.flex.js-field-has-badge-attachment-on-minicard(class="{{#if allowsBadgeAttachmentOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsBadgeAttachmentOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-paperclip
+          | 📎
           | {{_ 'badge-attachment-on-minicard'}}
     div.check-div
       a.flex.js-field-has-cover-attachment-on-minicard(class="{{#if allowsCoverAttachmentOnMinicard}}is-checked{{/if}}")
         .materialCheckBox(class="{{#if allowsCoverAttachmentOnMinicard}}is-checked{{/if}}")
         span
-          i.fa.fa-book
+          | 📖
-          i.fa.fa-picture-o
+          | 🖼️
           | {{_ 'cover-attachment-on-minicard'}}
     //div.check-div
     //  a.flex.js-field-has-comments(class="{{#if allowsComments}}is-checked{{/if}}")

client/components/sidebar/sidebarCustomFields.jade

@@ -4,7 +4,8 @@ template(name="customFieldsSidebar")
             li
                 div.minicard-wrapper.js-minicard
                     div.minicard
-                        a.fa.fa-pencil.js-edit-custom-field.minicard-edit-button
+                        a.js-edit-custom-field.minicard-edit-button
+                          | ✏️
                         div.minicard-title
                           +viewer
                             =name
@@ -13,7 +14,7 @@ template(name="customFieldsSidebar")
     if currentUser.isBoardMember
         hr
         a.sidebar-btn.js-open-create-custom-field
-            i.fa.fa-plus
+            | ➕
             span {{_ 'createCustomField'}}
 
 template(name="createCustomFieldPopup")

client/components/sidebar/sidebarFilters.jade

@@ -5,19 +5,19 @@
 
 template(name="filterSidebar")
   h3
-    i.fa.fa-trello
+    | 📋
     | {{_ 'list-filter-label'}}
   ul.sidebar-list
     form.js-list-filter
       input(type="text")
   hr
   h3
-    i.fa.fa-list-alt
+    | 📋
     | {{_ 'filter-card-title-label'}}
   input.js-field-card-filter(type="text")
   hr
   h3
-    i.fa.fa-tags
+    | 🏷️
     | {{_ 'filter-labels-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.labelIds.isSelected undefined}}active{{/if}}")
@@ -25,7 +25,7 @@ template(name="filterSidebar")
             span.sidebar-list-item-description
               | {{_ 'filter-no-label'}}
             if Filter.labelIds.isSelected undefined
-              i.fa.fa-check
+              | ✅
     each currentBoard.labels
       li
         a.name.js-toggle-label-filter
@@ -39,7 +39,7 @@ template(name="filterSidebar")
             i.fa.fa-check
   hr
   h3
-    i.fa.fa-users
+    | 👥
     | {{_ 'filter-member-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.members.isSelected undefined}}active{{/if}}")
@@ -47,7 +47,7 @@ template(name="filterSidebar")
             span.sidebar-list-item-description
               | {{_ 'filter-no-member'}}
             if Filter.members.isSelected undefined
-              i.fa.fa-check
+              | ✅
     each currentBoard.activeMembers
       with getUser userId
         li(class="{{#if Filter.members.isSelected _id}}active{{/if}}")
@@ -57,10 +57,10 @@ template(name="filterSidebar")
               = profile.fullname
               | (<span class="username">{{ username }}</span>)
             if Filter.members.isSelected _id
-              i.fa.fa-check
+              | ✅
   hr
   h3
-    i.fa.fa-user
+    | 👤
     | {{_ 'filter-assignee-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.assignees.isSelected undefined}}active{{/if}}")
@@ -78,11 +78,11 @@ template(name="filterSidebar")
               = profile.fullname
               | (<span class="username">{{ username }}</span>)
             if Filter.assignees.isSelected _id
-              i.fa.fa-check
+              | ✅
 
   hr
   h3
-    i.fa.fa-list-alt
+    | 📅
     | {{_ 'filter-dates-label' }}
   ul.sidebar-list
     li(class="{{#if Filter.dueAt.isSelected 'noDate'}}active{{/if}}")
@@ -123,7 +123,7 @@ template(name="filterSidebar")
           i.fa.fa-check
   hr
   h3
-    i.fa.fa-list-alt
+    | 📋
     | {{_ 'filter-custom-fields-label'}}
   ul.sidebar-list
     li(class="{{#if Filter.customFields.isSelected undefined}}active{{/if}}")
@@ -131,7 +131,7 @@ template(name="filterSidebar")
             span.sidebar-list-item-description
               | {{_ 'filter-no-custom-fields'}}
             if Filter.customFields.isSelected undefined
-              i.fa.fa-check
+              | ✅
     each currentBoard.customFields
       li(class="{{#if Filter.customFields.isSelected _id}}active{{/if}}")
         a.name.js-toggle-custom-fields-filter
@@ -163,15 +163,15 @@ template(name="filterSidebar")
   if Filter.isActive
     hr
     a.sidebar-btn.js-clear-all
-      i.fa.fa-filter
+      | 🔍
       span {{_ 'filter-clear'}}
     a.sidebar-btn.js-filter-to-selection
-      i.fa.fa-check-square-o
+      | ☑️
       span {{_ 'filter-to-selection'}}
 
 template(name="multiselectionSidebar")
   h3
-    i.fa.fa-tags
+    | 🏷️
     | {{_ 'multi-selection-label'}}
   ul.sidebar-list
     each currentBoard.labels
@@ -184,12 +184,12 @@ template(name="multiselectionSidebar")
             else
               span.quiet {{_ "label-default" (_ (concat "color-" color))}}
           if allSelectedElementHave 'label' _id
-            i.fa.fa-check
+            | ✅
           else if someSelectedElementHave 'label' _id
-            i.fa.fa-ellipsis-h
+            | ⋯
   hr
   h3
-    i.fa.fa-users
+    | 👥
     | {{_ 'multi-selection-member'}}
   ul.sidebar-list
     each currentBoard.activeMembers
@@ -201,16 +201,16 @@ template(name="multiselectionSidebar")
               = profile.fullname
               | (<span class="username">{{ username }}</span>)
             if allSelectedElementHave 'member' _id
-              i.fa.fa-check
+              | ✅
             else if someSelectedElementHave 'member' _id
-              i.fa.fa-ellipsis-h
+              | ⋯
   if currentUser.isBoardAdmin
     hr
     a.sidebar-btn.js-move-selection
-      i.fa.fa-share
+      | 📤
       span {{_ 'move-selection'}}
     a.sidebar-btn.js-archive-selection
-      i.fa.fa-archive
+      | 📦
       span {{_ 'archive-selection'}}
 
 template(name="disambiguateMultiLabelPopup")

client/components/swimlanes/miniswimlane.jade

@@ -3,6 +3,6 @@ template(name="miniswimlane")
     class="minicard-{{colorClass}}")
     .minicard-title
       .handle
-        .fa.fa-arrows
+        | ↕️
       +viewer
         = title

client/components/swimlanes/swimlaneHeader.jade

@@ -39,9 +39,11 @@ template(name="swimlaneFixedHeader")
       //    i.fa.fa-arrow-down.swimlane-header-collapse-down
       unless isTouchScreen
         if isShowDesktopDragHandles
-          a.swimlane-header-handle.handle.fa.fa-arrows.js-swimlane-header-handle
+          a.swimlane-header-handle.handle.js-swimlane-header-handle
+            | ↕️
       if isTouchScreen
-        a.swimlane-header-miniscreen-handle.handle.fa.fa-arrows.js-swimlane-header-handle
+        a.swimlane-header-miniscreen-handle.handle.js-swimlane-header-handle
+          | ↕️
 
 template(name="editSwimlaneTitleForm")
   .list-composer

client/components/swimlanes/swimlanes.jade

@@ -60,7 +60,8 @@ template(name="addListForm")
                   option(value="{{_id}}" selected=currentBoard.getLastList.title) {{title}}
             .edit-controls.clearfix
               button.primary.confirm(type="submit") {{_ 'save'}}
-              .fa.fa-times-thin.js-close-inlined-form
+              .js-close-inlined-form
+                | ❌
               unless currentBoard.isTemplatesBoard
                 unless currentBoard.isTemplateBoard
                   span.quiet