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

Thanks to xet7 !

.meteor/packages

@@ -93,4 +93,4 @@ ejson@1.1.3
 logging@1.3.3
 wekan-fullcalendar
 momentjs:moment@2.29.3
-wekan-fontawesome
+# wekan-fontawesome

.meteor/versions

@@ -155,7 +155,6 @@ wekan-accounts-cas@0.1.0
 wekan-accounts-lockout@1.0.0
 wekan-accounts-oidc@1.0.10
 wekan-accounts-sandstorm@0.8.0
-wekan-fontawesome@6.4.2
 wekan-fullcalendar@3.10.5
 wekan-ldap@0.0.2
 wekan-markdown@1.0.9

client/components/boardConversionProgress.jade

@@ -3,7 +3,7 @@ template(name="boardConversionProgress")
     .board-conversion-modal
       .board-conversion-header
         h3
-          i.fa.fa-cogs
+          | ⚙️
           | {{_ 'converting-board'}}
         p {{_ 'converting-board-description'}}
       
@@ -14,14 +14,14 @@ template(name="boardConversionProgress")
           .progress-text {{conversionProgress}}%
         
         .conversion-status
-          i.fa.fa-spinner.fa-spin
+          | ⚙️
           | {{conversionStatus}}
         
         .conversion-time(style="{{#unless conversionEstimatedTime}}display: none;{{/unless}}")
-          i.fa.fa-clock-o
+          | ⏰
           | {{_ 'estimated-time-remaining'}}: {{conversionEstimatedTime}}
       
       .board-conversion-footer
         .conversion-info
-          i.fa.fa-info-circle
+          | ℹ️
           | {{_ 'conversion-info-text'}}

client/components/cards/attachments.jade

@@ -34,10 +34,10 @@ template(name="attachmentViewer")
   #viewer-overlay.hidden
     #viewer-top-bar
       span#attachment-name
-      a#viewer-close.fa.fa-times-thin
+      a#viewer-close ❌
 
     #viewer-container
-      i.fa.fa-chevron-left.attachment-arrow#prev-attachment
+      | ◀️
       #viewer-content
         img#image-viewer.hidden
         video#video-viewer.hidden(controls="true")
@@ -45,7 +45,7 @@ template(name="attachmentViewer")
         object#pdf-viewer.hidden(type="application/pdf")
           span.pdf-preview-error {{_ 'preview-pdf-not-supported' }}
         object#txt-viewer.hidden(type="text/plain")
-      i.fa.fa-chevron-right.attachment-arrow#next-attachment
+      | ▶️
 
 template(name="attachmentGallery")
 
@@ -53,7 +53,7 @@ template(name="attachmentGallery")
 
     if canModifyCard
       a.attachment-item.add-attachment.js-add-attachment
-        i.fa.fa-plus.icon
+        | ➕
 
     each attachments
 
@@ -87,21 +87,22 @@ template(name="attachmentGallery")
               span.file-size ({{fileSize size}})
             .attachment-actions
               a.js-download(href="{{link}}?download=true", download="{{name}}")
-                i.fa.fa-download.icon(title="{{_ 'download'}}")
+                | ⬇️(title="{{_ 'download'}}")
               if currentUser.isBoardMember
                 unless currentUser.isCommentOnly
                   unless currentUser.isWorker
                     a.js-rename
-                      i.fa.fa-pencil-square-o.icon(title="{{_ 'rename'}}")
+                      | ✏️(title="{{_ 'rename'}}")
                     a.js-confirm-delete
-                      i.fa.fa-trash.icon(title="{{_ 'delete'}}")
-                    a.fa.fa-navicon.icon.js-open-attachment-menu(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
+                      | 🗑️(title="{{_ 'delete'}}")
+                    a.js-open-attachment-menu
+                      | ☰(data-attachment-link="{{link}}" title="{{_ 'attachmentActionsPopup-title'}}")
 
         // Migration spinner overlay
         if isAttachmentMigrating _id
           .attachment-migration-overlay
             .migration-spinner
-              i.fa.fa-cog.fa-spin
+              | ⚙️
             .migration-text {{_ 'migrating-attachment'}}
 
 template(name="attachmentActionsPopup")
@@ -109,8 +110,8 @@ template(name="attachmentActionsPopup")
     li
       if isImage
         a(class="{{#if isCover}}js-remove-cover{{else}}js-add-cover{{/if}}")
-          i.fa.fa-book
-          i.fa.fa-picture-o
+          | 📖
+          | 🖼️
           if isCover
             | {{_ 'remove-cover'}}
           else
@@ -118,7 +119,7 @@ template(name="attachmentActionsPopup")
       if currentUser.isBoardAdmin
         if isImage
           a(class="{{#if isBackgroundImage}}js-remove-background-image{{else}}js-add-background-image{{/if}}")
-            i.fa.fa-picture-o
+            | 🖼️
             if isBackgroundImage
               | {{_ 'remove-background-image'}}
             else
@@ -126,19 +127,19 @@ template(name="attachmentActionsPopup")
 
         if $neq versions.original.storage "fs"
           a.js-move-storage-fs
-            i.fa.fa-arrow-right
+            | ▶️
             | {{_ 'attachment-move-storage-fs'}}
 
         if $neq versions.original.storage "gridfs"
           if versions.original.storage
             a.js-move-storage-gridfs
-              i.fa.fa-arrow-right
+              | ▶️
               | {{_ 'attachment-move-storage-gridfs'}}
 
         if $neq versions.original.storage "s3"
           if versions.original.storage
             a.js-move-storage-s3
-              i.fa.fa-arrow-right
+              | ▶️
               | {{_ 'attachment-move-storage-s3'}}
 
 template(name="attachmentRenamePopup")

client/components/cards/cardDate.css

@@ -42,23 +42,64 @@
 .card-date.long-overdue.is-active {
   background-color: #fd3e24;
 }
+
+/* Date type specific colors */
+.card-date.received-date {
+  background-color: #0079bf; /* Blue for received */
+}
+
+.card-date.received-date:hover,
+.card-date.received-date.is-active {
+  background-color: #005a8b;
+}
+
+.card-date.start-date {
+  background-color: #3cb500; /* Green for start */
+}
+
+.card-date.start-date:hover,
+.card-date.start-date.is-active {
+  background-color: #2d8f00;
+}
+
+.card-date.due-date {
+  background-color: #ff9f19; /* Orange for due */
+}
+
+.card-date.due-date:hover,
+.card-date.due-date.is-active {
+  background-color: #e68a00;
+}
+
+.card-date.end-date {
+  background-color: #a632db; /* Purple for end */
+}
+
+.card-date.end-date:hover,
+.card-date.end-date.is-active {
+  background-color: #8a2bb8;
+}
 .card-date.end-date time::before {
-  content: "\f253";
+  content: "🏁"; /* Finish flag - represents end/completion */
 }
 .card-date.due-date time::before {
-  content: "\f090";
+  content: "⏰"; /* Alarm clock - represents due/deadline */
 }
 .card-date.start-date time::before {
-  content: "\f251";
+  content: "🚀"; /* Rocket - represents start/launch */
 }
 .card-date.received-date time::before {
-  content: "\f08b";
+  content: "📥"; /* Inbox tray - represents received/incoming */
+}
+
+/* Generic date badge and custom field date */
+.card-date:not(.received-date):not(.start-date):not(.due-date):not(.end-date) time::before {
+  content: "📅"; /* Calendar - represents generic date */
 }
 .card-date time::before {
-  font: normal normal normal 14px/1 FontAwesome;
   font-size: inherit;
-  -webkit-font-smoothing: antialiased;
   margin-right: 0.3em;
+  display: inline-block;
 }
 .customfield-date {
   display: block;

client/components/cards/cardDate.jade

@@ -21,3 +21,75 @@ template(name="dateCustomField")
       if showWeekOfYear
         b
           | {{showWeek}}
+
+template(name="minicardReceivedDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{_ 'card-received'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardStartDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{_ 'card-start'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardDueDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{_ 'card-due'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardEndDate")
+  if canModifyCard
+    a.js-edit-date.card-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+  else
+    a.card-date(title="{{_ 'card-end'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+      time(datetime="{{showISODate}}")
+        | {{showDate}}
+        if showWeekOfYear
+          b
+            | {{showWeek}}
+
+template(name="minicardCustomFieldDate")
+  a(title="{{_ 'date'}} {{_ 'predicate-week'}} {{#if showWeekOfYear}}{{showWeek}}{{/if}}" class="{{classes}}")
+    time(datetime="{{showISODate}}")
+      | {{showDate}}
+      if showWeekOfYear
+        b
+          | {{showWeek}}

client/components/cards/cardDate.js

@@ -329,30 +329,50 @@ class CardCustomFieldDate extends CardDate {
 CardCustomFieldDate.register('cardCustomFieldDate');
 
 (class extends CardReceivedDate {
+  template() {
+    return 'minicardReceivedDate';
+  }
+  
   showDate() {
     return format(this.date.get(), 'L');
   }
 }.register('minicardReceivedDate'));
 
 (class extends CardStartDate {
+  template() {
+    return 'minicardStartDate';
+  }
+  
   showDate() {
     return format(this.date.get(), 'YYYY-MM-DD HH:mm');
   }
 }.register('minicardStartDate'));
 
 (class extends CardDueDate {
+  template() {
+    return 'minicardDueDate';
+  }
+  
   showDate() {
     return format(this.date.get(), 'YYYY-MM-DD HH:mm');
   }
 }.register('minicardDueDate'));
 
 (class extends CardEndDate {
+  template() {
+    return 'minicardEndDate';
+  }
+  
   showDate() {
     return format(this.date.get(), 'YYYY-MM-DD HH:mm');
   }
 }.register('minicardEndDate'));
 
 (class extends CardCustomFieldDate {
+  template() {
+    return 'minicardCustomFieldDate';
+  }
+  
   showDate() {
     return format(this.date.get(), 'L');
   }

client/components/cards/cardDetails.jade

@@ -12,15 +12,19 @@ template(name="cardDetails")
       else
         unless isMiniScreen
           unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              | ❌
             if canModifyCard
               if cardMaximized
-                a.fa.fa-window-minimize.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+                a.minimize-card-details.js-minimize-card-details(title="{{_ 'minimize-card'}}")
+                  | 🔽
               else
-                a.fa.fa-window-maximize.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+                a.maximize-card-details.js-maximize-card-details(title="{{_ 'maximize-card'}}")
+                  | 🔼
           if canModifyCard
-            a.fa.fa-navicon.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-button.js-copy-link(
+            a.card-details-menu.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              | ☰
+            a.card-copy-button.js-copy-link(
               id="cardURL_copy"
               class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
@@ -29,10 +33,12 @@ template(name="cardDetails")
             span.copied-tooltip {{_ 'copied'}}
         else
           unless isPopup
-            a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+            a.close-card-details.js-close-card-details(title="{{_ 'close-card'}}")
+              | ❌
           if canModifyCard
-            a.fa.fa-navicon.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
-            a.fa.fa-link.card-copy-mobile-button.js-copy-link(
+            a.card-details-menu-mobile-web.js-open-card-details-menu(title="{{_ 'cardDetailsActionsPopup-title'}}")
+              | ☰
+            a.card-copy-mobile-button.js-copy-link(
               id="cardURL_copy"
               class="fa-link"
               title="{{_ 'copy-card-link-to-clipboard'}}"
@@ -47,7 +53,8 @@ template(name="cardDetails")
                   | ##{getCardNumber}
               = getTitle
             if isWatching
-              i.card-details-watch.fa.fa-eye
+              i.card-details-watch
+                | 👁️
         .card-details-path
           each parentList
             |   >  
@@ -69,7 +76,7 @@ template(name="cardDetails")
     if hasActiveUploads
       .card-details-upload-progress
         .upload-progress-header
-          i.fa.fa-upload
+          | 📤
           span {{_ 'uploading-files'}} ({{uploadCount}})
         each uploads
           .upload-progress-item(class="{{#if $eq status 'error'}}upload-error{{/if}}")
@@ -78,11 +85,11 @@ template(name="cardDetails")
               .upload-progress-fill(style="width: {{progress}}%")
             if $eq status 'error'
               .upload-progress-error
-                i.fa.fa-exclamation-triangle
+                | ⚠️
                 span {{_ 'upload-failed'}}
             else if $eq status 'completed'
               .upload-progress-success
-                i.fa.fa-check
+                | ✅
                 span {{_ 'upload-completed'}}
 
     .card-details-left
@@ -91,7 +98,7 @@ template(name="cardDetails")
         if currentBoard.allowsLabels
           .card-details-item.card-details-item-labels
             h3.card-details-item-title
-              i.fa.fa-tags
+              | 🏷️
               | {{_ 'labels'}}
             a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}")
               each labels
@@ -101,7 +108,7 @@ template(name="cardDetails")
             if canModifyCard
               unless currentUser.isWorker
                 a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}")
-                  i.fa.fa-plus
+                  | ➕
 
         if currentBoard.hasAnyAllowsDate
           hr
@@ -109,7 +116,7 @@ template(name="cardDetails")
         if currentBoard.allowsReceivedDate
           .card-details-item.card-details-item-received
             h3.card-details-item-title
-              i.fa.fa-sign-out
+              | 📥
               | {{_ 'card-received'}}
             if getReceived
               +cardReceivedDate
@@ -117,12 +124,12 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-received-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.allowsStartDate
           .card-details-item.card-details-item-start
             h3.card-details-item-title
-              i.fa.fa-hourglass-start
+              | 🚀
               | {{_ 'card-start'}}
             if getStart
               +cardStartDate
@@ -130,12 +137,12 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-start-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.allowsDueDate
           .card-details-item.card-details-item-due
             h3.card-details-item-title
-              i.fa.fa-sign-in
+              | ⏰
               | {{_ 'card-due'}}
             if getDue
               +cardDueDate
@@ -143,12 +150,12 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-due-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.allowsEndDate
           .card-details-item.card-details-item-end
             h3.card-details-item-title
-              i.fa.fa-hourglass-end
+              | 🏁
               | {{_ 'card-end'}}
             if getEnd
               +cardEndDate
@@ -156,7 +163,7 @@ template(name="cardDetails")
               if canModifyCard
                 unless currentUser.isWorker
                   a.card-label.add-label.js-end-date
-                    i.fa.fa-plus
+                    | ➕
 
         if currentBoard.hasAnyAllowsUser
           hr
@@ -164,7 +171,7 @@ template(name="cardDetails")
         if currentBoard.allowsCreator
           .card-details-item.card-details-item-creator
             h3.card-details-item-title
-              i.fa.fa-user
+              | 👤
               | {{_ 'creator'}}
 
             +userAvatar(userId=userId noRemove=true)
@@ -174,7 +181,7 @@ template(name="cardDetails")
         if currentBoard.allowsMembers
           .card-details-item.card-details-item-members
             h3.card-details-item-title
-              i.fa.fa-users
+              | 👤s
               | {{_ 'members'}}
             each userId in getMembers
               +userAvatar(userId=userId cardId=_id)
@@ -182,13 +189,13 @@ template(name="cardDetails")
             if canModifyCard
               unless currentUser.isWorker
                 a.member.add-member.card-details-item-add-button.js-add-members(title="{{_ 'card-members-title'}}")
-                  i.fa.fa-plus
+                  | ➕
 
         //if assigneeSelected
         if currentBoard.allowsAssignee
           .card-details-item.card-details-item-assignees
             h3.card-details-item-title
-              i.fa.fa-user
+              | 👤
               | {{_ 'assignee'}}
             each userId in getAssignees
               +userAvatar(userId=userId cardId=_id assignee=true)
@@ -199,7 +206,7 @@ template(name="cardDetails")
             if currentUser.isWorker
               unless assigneeSelected
                 a.assignee.add-assignee.card-details-item-add-button.js-add-assignees(title="{{_ 'assignee'}}")
-                  i.fa.fa-plus
+                  | ➕
 
         //.card-details-items
         if currentBoard.allowsRequestedBy
@@ -225,7 +232,7 @@ template(name="cardDetails")
         if currentBoard.allowsAssignedBy
           .card-details-item.card-details-item-name
             h3.card-details-item-title
-              i.fa.fa-user-plus
+              | 👤-plus
               | {{_ 'assigned-by'}}
             if canModifyCard
               unless currentUser.isWorker
@@ -350,52 +357,52 @@ template(name="cardDetails")
               .poker-card
                 span.inner.js-poker.js-poker-vote-one(class="{{#if $eq pokerState 'one'}}poker-voted{{/if}}") {{_ 'poker-one'}}
               if $eq pokerState "one"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-two(class="{{#if $eq pokerState 'two'}}poker-voted{{/if}}") {{_ 'poker-two'}}
               if $eq pokerState "two"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-three(class="{{#if $eq pokerState 'three'}}poker-voted{{/if}}") {{_ 'poker-three'}}
               if $eq pokerState "three"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-five(class="{{#if $eq pokerState 'five'}}poker-voted{{/if}}") {{_ 'poker-five'}}
               if $eq pokerState "five"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-eight(class="{{#if $eq pokerState 'eight'}}poker-voted{{/if}}") {{_ 'poker-eight'}}
               if $eq pokerState "eight"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-thirteen(class="{{#if $eq pokerState 'thirteen'}}poker-voted{{/if}}") {{_ 'poker-thirteen'}}
               if $eq pokerState "thirteen"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-twenty(class="{{#if $eq pokerState 'twenty'}}poker-voted{{/if}}") {{_ 'poker-twenty'}}
               if $eq pokerState "twenty"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-forty(class="{{#if $eq pokerState 'forty'}}poker-voted{{/if}}") {{_ 'poker-forty'}}
               if $eq pokerState "forty"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-one-hundred(class="{{#if $eq pokerState 'oneHundred'}}poker-voted{{/if}}") {{_ 'poker-oneHundred'}}
               if $eq pokerState "oneHundred"
-                i.fa.fa-check
+                | ✅
             .poker-deck
               .poker-card
                 span.inner.js-poker.js-poker-vote-unsure(class="{{#if $eq pokerState 'unsure'}}poker-voted{{/if}}") {{_ 'poker-unsure'}}
               if $eq pokerState "unsure"
-                i.fa.fa-check
+                | ✅
 
           if currentUser.isBoardAdmin
             button.card-details-blue.js-poker-finish(class="{{#if $eq voteState false}}poker-voted{{/if}}") {{_ 'poker-finish'}}
@@ -812,7 +819,7 @@ template(name="cardMembersPopup")
             = user.profile.fullname
             | (<span class="username">{{ user.username }}</span>)
           if isCardMember
-            i.fa.fa-check
+            | ✅
 
 template(name="cardAssigneesPopup")
   input.card-assignees-filter(type="text" placeholder="{{_ 'search'}}")
@@ -826,7 +833,7 @@ template(name="cardAssigneesPopup")
               = user.profile.fullname
               | (<span class="username">{{ user.username }}</span>)
             if isCardAssignee
-              i.fa.fa-check
+              | ✅
   if currentUser.isWorker
     ul.pop-over-list.js-card-assignee-list
       li.item(class="{{#if currentUser.isCardAssignee}}active{{/if}}")
@@ -836,7 +843,7 @@ template(name="cardAssigneesPopup")
             = currentUser.profile.fullname
             | (<span class="username">{{ currentUser.username }}</span>)
           if currentUser.isCardAssignee
-            i.fa.fa-check
+            | ✅
 
 template(name="cardAssigneePopup")
   .board-assignee-menu
@@ -902,7 +909,7 @@ template(name="setCardColorPopup")
       unless $eq color 'white'
         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/cards/cardTime.jade

@@ -15,8 +15,8 @@ template(name="editCardSpentTime")
 
 template(name="timeBadge")
   if canModifyCard
-    a.js-edit-time.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
-      | {{showTime}}
+    a.js-edit-time.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | ⏱️ {{showTime}}
   else
-    a.card-time(title="{{showTitle}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
-      | {{showTime}}
+    a.card-time(title="{{_ 'time'}}" class="{{#if getIsOvertime}}card-label-red{{else}}card-label-green{{/if}}")
+      | ⏱️ {{showTime}}

client/components/cards/minicard.css

@@ -168,6 +168,20 @@
 .minicard .date {
   margin-right: 0.4vw;
 }
+
+/* Font Awesome icons in minicard dates */
+.minicard .card-date i.fa {
+  margin-right: 0.3vw;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
+
+/* Font Awesome icons in minicard spent time */
+.minicard .card-time i.fa {
+  margin-right: 0.3vw;
+  font-size: 0.9em;
+  vertical-align: middle;
+}
 .minicard .badges {
   float: left;
   margin-top: 1vh;

client/components/main/bookmarks.jade

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

client/components/main/header.jade

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

client/components/main/layouts.jade

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

client/components/main/popup.tpl.jade

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

client/components/migrationProgress.jade

@@ -3,7 +3,7 @@ template(name="migrationProgress")
     .migration-modal
       .migration-header
         h3
-          i.fa.fa-database
+          | 🗄️
           | {{_ 'database-migration'}}
         p {{_ 'database-migration-description'}}
       
@@ -16,11 +16,11 @@ template(name="migrationProgress")
             .progress-label {{_ 'overall-progress'}}
           
           .current-step
-            i.fa.fa-cog.fa-spin
+            | ⚙️
             | {{migrationCurrentStep}}
           
           .estimated-time(style="{{#unless migrationEstimatedTime}}display: none;{{/unless}}")
-            i.fa.fa-clock-o
+            | ⏰
             | {{_ 'estimated-time-remaining'}}: {{migrationEstimatedTime}}
         
         .migration-steps
@@ -31,11 +31,11 @@ template(name="migrationProgress")
                 .step-header
                   .step-icon
                     if completed
-                      i.fa.fa-check-circle
+                      | ✅
                     else if isCurrentStep
-                      i.fa.fa-cog.fa-spin
+                      | ⚙️
                     else
-                      i.fa.fa-circle-o
+                      | ⭕
                   .step-info
                     .step-name {{name}}
                     .step-description {{description}}
@@ -51,13 +51,13 @@ template(name="migrationProgress")
                     .progress-fill(style="width: {{progress}}%")
         
         .migration-status
-          i.fa.fa-info-circle
+          | ℹ️
           | {{migrationStatus}}
       
       .migration-footer
         .migration-info
-          i.fa.fa-lightbulb-o
+          | 💡
           | {{_ 'migration-info-text'}}
         .migration-warning
-          i.fa.fa-exclamation-triangle
+          | ⚠️
           | {{_ 'migration-warning-text'}}

client/components/settings/cronSettings.jade

@@ -47,17 +47,17 @@ template(name="cronMigrations")
   .cron-migrations
     .migration-header
       h2
-        i.fa.fa-database
+        | 🗄️
         | {{_ 'database-migrations'}}
       .migration-controls
         button.btn.btn-primary.js-start-all-migrations
-          i.fa.fa-play
+          | ▶️
           | {{_ 'start-all-migrations'}}
         button.btn.btn-warning.js-pause-all-migrations
-          i.fa.fa-pause
+          | ⏸️
           | {{_ 'pause-all-migrations'}}
         button.btn.btn-danger.js-stop-all-migrations
-          i.fa.fa-stop
+          | ⏹️
           | {{_ 'stop-all-migrations'}}
     
     .migration-progress
@@ -68,11 +68,11 @@ template(name="cronMigrations")
         .progress-label {{_ 'overall-progress'}}
       
       .current-step
-        i.fa.fa-cog.fa-spin
+        | ⚙️
         | {{migrationCurrentStep}}
       
       .migration-status
-        i.fa.fa-info-circle
+        | ℹ️
         | {{migrationStatus}}
     
     .migration-steps
@@ -83,11 +83,11 @@ template(name="cronMigrations")
             .step-header
               .step-icon
                 if completed
-                  i.fa.fa-check-circle
+                  | ✅
                 else if isCurrentStep
-                  i.fa.fa-cog.fa-spin
+                  | ⚙️
                 else
-                  i.fa.fa-circle-o
+                  | ⭕
               .step-info
                 .step-name {{name}}
                 .step-description {{description}}
@@ -106,17 +106,17 @@ template(name="cronBoardOperations")
   .cron-board-operations
     .board-operations-header
       h2
-        i.fa.fa-tasks
+        | 📋
         | {{_ 'board-operations'}}
       .board-operations-controls
         button.btn.btn-success.js-refresh-board-operations
-          i.fa.fa-refresh
+          | 🔄
           | {{_ 'refresh'}}
         button.btn.btn-primary.js-start-test-operation
-          i.fa.fa-play
+          | ▶️
           | {{_ 'start-test-operation'}}
         button.btn.btn-info.js-force-board-scan
-          i.fa.fa-search
+          | 🔍
           | {{_ 'force-board-scan'}}
     
     .board-operations-stats
@@ -164,7 +164,7 @@ template(name="cronBoardOperations")
     .board-operations-search
       .search-box
         input.form-control.js-search-board-operations(type="text" placeholder="{{_ 'search-boards-or-operations'}}")
-        i.fa.fa-search.search-icon
+        | 🔍.search-icon
     
     .board-operations-list
       .operations-header
@@ -203,36 +203,36 @@ template(name="cronBoardOperations")
                   .btn-group
                     if isRunning
                       button.btn.btn-sm.btn-warning.js-pause-operation(data-operation="{{id}}")
-                        i.fa.fa-pause
+                        | ⏸️
                     else
                       button.btn.btn-sm.btn-success.js-resume-operation(data-operation="{{id}}")
-                        i.fa.fa-play
+                        | ▶️
                     button.btn.btn-sm.btn-danger.js-stop-operation(data-operation="{{id}}")
-                      i.fa.fa-stop
+                      | ⏹️
                     button.btn.btn-sm.btn-info.js-view-details(data-operation="{{id}}")
-                      i.fa.fa-info-circle
+                      | ℹ️
       
       .pagination
         if pagination.hasPrev
           button.btn.btn-sm.btn-default.js-prev-page
-            i.fa.fa-chevron-left
+            | ◀️
             | {{_ 'previous'}}
         .page-info
           | {{_ 'page'}} {{pagination.page}} {{_ 'of'}} {{pagination.totalPages}}
         if pagination.hasNext
           button.btn.btn-sm.btn-default.js-next-page
             | {{_ 'next'}}
-            i.fa.fa-chevron-right
+            | ▶️
 
 template(name="cronJobs")
   .cron-jobs
     .jobs-header
       h2
-        i.fa.fa-clock-o
+        | ⏰
         | {{_ 'cron-jobs'}}
       .jobs-controls
         button.btn.btn-success.js-refresh-jobs
-          i.fa.fa-refresh
+          | 🔄
           | {{_ 'refresh'}}
     
     .jobs-list
@@ -258,20 +258,20 @@ template(name="cronJobs")
                 .btn-group
                   if isRunning
                     button.btn.btn-sm.btn-warning.js-pause-job(data-job="{{name}}")
-                      i.fa.fa-pause
+                      | ⏸️
                   else
                     button.btn.btn-sm.btn-success.js-start-job(data-job="{{name}}")
-                      i.fa.fa-play
+                      | ▶️
                   button.btn.btn-sm.btn-danger.js-stop-job(data-job="{{name}}")
-                    i.fa.fa-stop
+                    | ⏹️
                   button.btn.btn-sm.btn-danger.js-remove-job(data-job="{{name}}")
-                    i.fa.fa-trash
+                    | 🗑️
 
 template(name="cronAddJob")
   .cron-add-job
     .add-job-header
       h2
-        i.fa.fa-plus
+        | ➕
         | {{_ 'add-cron-job'}}
     
     .add-job-form
@@ -302,8 +302,8 @@ template(name="cronAddJob")
         
         .form-actions
           button.btn.btn-primary(type="submit")
-            i.fa.fa-plus
+            | ➕
             | {{_ 'add-job'}}
           button.btn.btn-default.js-cancel-add-job
-            i.fa.fa-times
+            | ❌
             | {{_ 'cancel'}}

client/components/settings/settingBody.jade

@@ -6,87 +6,87 @@ template(name="setting")
       .content-title.ext-box
         if isGeneralSetting
           span
-            i.fa.fa-sign-in
+            | 🔑
             | {{_ 'registration'}}
         else if isEmailSetting
           span
-            i.fa.fa-envelope
+            | ✉️
             | {{_ 'email'}}
         else if isAccountSetting
           span
-            i.fa.fa-users
+            | 👥
             | {{_ 'accounts'}}
         else if isTableVisibilityModeSetting
           span
-            i.fa.fa-eye
+            | 👁️
             | {{_ 'tableVisibilityMode'}}
         else if isAnnouncementSetting
           span
-            i.fa.fa-bullhorn
+            | 📢
             | {{_ 'admin-announcement'}}
         else if isAccessibilitySetting
           span
-            i.fa.fa-universal-access
+            | ♿
             | {{_ 'accessibility'}}
         else if isLayoutSetting
           span
-            i.fa.fa-object-group
+            | 🔗
             | {{_ 'layout'}}
         else if isWebhookSetting
           span
-            i.fa.fa-globe
+            | 🌐
             | {{_ 'global-webhook'}}
         else if isAttachmentSettings
           span
-            i.fa.fa-paperclip
+            | 📎
             | {{_ 'attachments'}}
         else if isCronSettings
           span
-            i.fa.fa-clock-o
+            | ⏰
             | {{_ 'cron'}}
       .content-body
         .side-menu
           ul
             li(class="{{#if isGeneralSetting}}active{{/if}}")
               a.js-setting-menu(data-id="registration-setting")
-                i.fa.fa-sign-in
+                | 🔑
                 | {{_ 'registration'}}
             unless isSandstorm
               li(class="{{#if isEmailSetting}}active{{/if}}")
                 a.js-setting-menu(data-id="email-setting")
-                  i.fa.fa-envelope
+                  | ✉️
                   | {{_ 'email'}}
             li(class="{{#if isAccountSetting}}active{{/if}}")
               a.js-setting-menu(data-id="account-setting")
-                i.fa.fa-users
+                | 👥
                 | {{_ 'accounts'}}
             li(class="{{#if isTableVisibilityModeSetting}}active{{/if}}")
               a.js-setting-menu(data-id="tableVisibilityMode-setting")
-                i.fa.fa-eye
+                | 👁️
                 | {{_ 'tableVisibilityMode'}}
             li(class="{{#if isAnnouncementSetting}}active{{/if}}")
               a.js-setting-menu(data-id="announcement-setting")
-                i.fa.fa-bullhorn
+                | 📢
                 | {{_ 'admin-announcement'}}
             li(class="{{#if isAccessibilitySetting}}active{{/if}}")
               a.js-setting-menu(data-id="accessibility-setting")
-                i.fa.fa-universal-access
+                | ♿
                 | {{_ 'accessibility'}}
             li(class="{{#if isLayoutSetting}}active{{/if}}")
               a.js-setting-menu(data-id="layout-setting")
-                i.fa.fa-object-group
+                | 🔗
                 | {{_ 'layout'}}
             li(class="{{#if isWebhookSetting}}active{{/if}}")
               a.js-setting-menu(data-id="webhook-setting")
-                i.fa.fa-globe
+                | 🌐
                 | {{_ 'global-webhook'}}
             li(class="{{#if isAttachmentSettings}}active{{/if}}")
               a.js-setting-menu(data-id="attachment-settings")
-                i.fa.fa-paperclip
+                | 📎
                 | {{_ 'attachments'}}
             li(class="{{#if isCronSettings}}active{{/if}}")
               a.js-setting-menu(data-id="cron-settings")
-                i.fa.fa-clock-o
+                | ⏰
                 | {{_ 'cron'}}
         .main-body
           if isLoading

client/components/swimlanes/swimlaneHeader.jade

@@ -24,16 +24,18 @@ template(name="swimlaneFixedHeader")
           | {{isTitleDefault title}}
   .swimlane-header-menu
     unless currentUser.isCommentOnly
-      a.fa.fa-plus.js-open-add-swimlane-menu.swimlane-header-plus-icon(title="{{_ 'add-swimlane'}}")
-      a.fa.fa-navicon.js-open-swimlane-menu(title="{{_ 'swimlaneActionPopup-title'}}")
+      a.js-open-add-swimlane-menu.swimlane-header-plus-icon
+        | ➕(title="{{_ 'add-swimlane'}}")
+      a.js-open-swimlane-menu
+        | ☰(title="{{_ 'swimlaneActionPopup-title'}}")
       //// TODO: Collapse Swimlane: make button working, etc.
       //unless collapsed
       //  a.js-collapse-swimlane(title="{{_ 'collapse'}}")
       //    i.fa.fa-arrow-down.swimlane-header-collapse-down
-      //    i.fa.fa-arrow-up.swimlane-header-collapse-up
+      //    ⬆️.swimlane-header-collapse-up
       //if collapsed
       //  a.js-collapse-swimlane(title="{{_ 'uncollapse'}}")
-      //    i.fa.fa-arrow-up.swimlane-header-collapse-up
+      //    ⬆️.swimlane-header-collapse-up
       //    i.fa.fa-arrow-down.swimlane-header-collapse-down
       unless isTouchScreen
         if isShowDesktopDragHandles
@@ -46,33 +48,34 @@ template(name="editSwimlaneTitleForm")
     input.list-name-input.full-line(type="text" value="{{isTitleDefault 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="swimlaneActionPopup")
   unless currentUser.isCommentOnly
     ul.pop-over-list
        if currentUser.isBoardAdmin
          li: a.js-set-swimlane-color
-          i.fa.fa-paint-brush
+          | 🎨
           | {{_ 'select-color'}}
        li: a.js-set-swimlane-height
-        i.fa.fa-arrows-v
+        | ↕️
         |  {{_ 'set-swimlane-height'}}
     if currentUser.isBoardAdmin
       unless this.isTemplateContainer
         hr
         ul.pop-over-list
           li: a.js-close-swimlane
-            i.fa.fa-arrow-right
-            i.fa.fa-archive
+            | ▶️
+            | 📦
             | {{_ 'archive-swimlane'}}
         ul.pop-over-list
           li: a.js-copy-swimlane
-            i.fa.fa-copy
+            | 📋
             | {{_ 'copy-swimlane'}}
         ul.pop-over-list
           li: a.js-move-swimlane
-            i.fa.fa-arrow-up
+            | ⬆️
             | {{_ 'move-swimlane'}}
 
 template(name="swimlaneAddPopup")

client/components/users/userAvatar.jade

@@ -13,7 +13,7 @@ template(name="userAvatar")
       if showEdit
         if $eq currentUser._id userData._id
           a.edit-avatar.js-change-avatar
-            i.fa.fa-pencil
+            | ✏️
 
 template(name="userAvatarInitials")
   svg.avatar.avatar-initials(viewBox="0 0 {{viewPortWidth}} 15")
@@ -32,7 +32,8 @@ template(name="boardOrgRow")
     td
       if currentUser.isBoardAdmin
         a.member.orgOrTeamMember.add-member.js-manage-board-removeOrg(title="{{_ 'remove-from-board'}}")
-          i.removeTeamFaMinus.fa.fa-minus
+          i.removeTeamFaMinus
+            | ➖
         .divaddfaplusminus
           | {{_ 'remove-btn'}}
 
@@ -45,7 +46,8 @@ template(name="boardTeamRow")
     td
       if currentUser.isBoardAdmin
         a.member.orgOrTeamMember.add-member.js-manage-board-removeTeam(title="{{_ 'remove-from-board'}}")
-          i.removeTeamFaMinus.fa.fa-minus
+          i.removeTeamFaMinus
+            | ➖
         .divaddfaplusminus
           | {{_ 'remove-btn'}}
 
@@ -88,7 +90,7 @@ template(name="changeAvatarPopup")
           img.avatar.avatar-image(src="{{link}}?auth=false&brokenIsFine=true")
         | {{_ 'uploaded-avatar'}}
         if isSelected
-          i.fa.fa-check
+          | ✅
         p.sub-name
           unless isSelected
             a.js-delete-avatar {{_ 'delete'}}
@@ -99,7 +101,7 @@ template(name="changeAvatarPopup")
         +userAvatarInitials(userId=currentUser._id)
       | {{_ 'initials' }}
       if noAvatarUrl
-        i.fa.fa-check
+        | ✅
        p.sub-name {{_ 'default-avatar'}}
   input.hide.js-upload-avatar-input(accept="image/*;capture=camera" type="file")
   if Meteor.settings.public.avatarsUploadMaxSize
@@ -110,7 +112,7 @@ template(name="changeAvatarPopup")
     br
   | {{_ 'invalid-file'}}
   button.full.js-upload-avatar
-    i.fa.fa-upload
+    | 📤
     | {{_ 'upload-avatar'}}
 
 template(name="cardMemberPopup")

client/components/users/userHeader.jade

@@ -15,92 +15,92 @@ template(name="memberMenuPopup")
     // Bookmarks at the very top
     li
       a.js-open-bookmarks
-        i.fa.fa-bookmark
+        | 🔖
         | {{_ 'bookmarks'}}
     with currentUser
       li
         a.js-my-cards(href="{{pathFor 'my-cards'}}")
-          i.fa.fa-list
+          | 📋
           | {{_ 'my-cards'}}
       li
         a.js-due-cards(href="{{pathFor 'due-cards'}}")
-          i.fa.fa-calendar
+          | 📅
           | {{_ 'dueCards-title'}}
       li
         a.js-global-search(href="{{pathFor 'global-search'}}")
-          i.fa.fa-search
+          | 🔍
           | {{_ 'globalSearch-title'}}
       li
         a(href="{{pathFor 'home'}}")
-          span.fa.fa-home
+          | 🏠
           | {{_ 'all-boards'}}
       li
         a(href="{{pathFor 'public'}}")
-          span.fa.fa-globe
+          | 🌐
           | {{_ 'public'}}
       li
         a.board-header-btn.js-open-archived-board
-          i.fa.fa-archive
+          | 📦
           span {{_ 'archives'}}
       li
         a.js-notifications-drawer-toggle
-          i.fa.fa-bell
+          | 🔔
           | {{_ 'notifications'}}
       if currentSetting.customHelpLinkUrl
         li
           a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
-            i.fa.fa-question
+            | ❓
             | {{_ 'help'}}
       unless currentUser.isWorker
         ul.pop-over-list
           li
             a(href="{{pathFor 'board' id=templatesBoardId slug=templatesBoardSlug}}")
-              i.fa.fa-clone
+              | 📋
               | {{_ 'templates'}}
       if currentUser.isAdmin
         li
           a.js-go-setting(href="{{pathFor 'setting'}}")
-            i.fa.fa-lock
+            | 🔒
             | {{_ 'admin-panel'}}
       hr
       if isSameDomainNameSettingValue
         li
           a.js-invite-people
-            i.fa.fa-envelope
+            | ✉️
             | {{_ 'invite-people'}}
       if isNotOAuth2AuthenticationMethod
         li
           a.js-edit-profile
-            i.fa.fa-user
+            | 👤
             | {{_ 'edit-profile'}}
       li
         a.js-change-settings
-          i.fa.fa-cog
+          | ⚙️
           | {{_ 'change-settings'}}
       li
         a.js-change-avatar
-          i.fa.fa-picture-o
+          | 🖼️
           | {{_ 'edit-avatar'}}
       unless isSandstorm
         if isNotOAuth2AuthenticationMethod
           li
             a.js-change-password
-              i.fa.fa-key
+              | 🔑
               | {{_ 'changePasswordPopup-title'}}
       li
         a.js-change-language
-          i.fa.fa-flag
+          | 🏁
           | {{_ 'changeLanguagePopup-title'}}
       //li
       //  a.js-support
-      //    i.fa.fa-question-circle
+      //    ❓-circle
       //    | {{_ 'support'}}
   unless isSandstorm
     hr
     ul.pop-over-list
       li
         a.js-logout
-          i.fa.fa-sign-out
+          | 🚪
           | {{_ 'log-out'}}
 
 template(name="invitePeoplePopup")
@@ -190,7 +190,7 @@ template(name="changeSettingsPopup")
           | {{_ 'show-cards-minimum-count'}}
         input#show-cards-count-at.inline-input.left(type="number" value="#{showCardsCountAt}" min="-1")
         label.bold.clear
-          i.fa.fa-calendar
+          | 📅
           | {{_ 'start-day-of-week'}}
         select#start-day-of-week.inline-input.left
           each day in weekDays startDayOfWeek