From 849440ed19855a259c2ad1afc0dfcc21ca62fec0 Mon Sep 17 00:00:00 2001
From: Adam Coldrick <adam@sotk.co.uk>
Date: Sun, 18 Feb 2018 11:06:40 +0000
Subject: [PATCH] Update fontawesome to version 5

Version 5 of fontawesome has somewhat better icons for things
like tasks and boards. This commit makes the requisite changes
to our build process to support this upgrade, and switches to
the correct npm package for version 5. It also updates some
icon names which were changed between versions.

Change-Id: If7a538328156cc4007ae065ff96dac18fddd68da
---
 Gruntfile.js                                     | 13 +++++++------
 package.json                                     |  2 +-
 src/app/admin/template/team.html                 |  4 ++--
 src/app/admin/template/team_edit.html            |  2 +-
 src/app/admin/template/user.html                 |  4 ++--
 src/app/auth/template/busy.html                  |  2 +-
 .../board_contents/kanban_lane_contents.html     |  4 ++--
 .../kanban_lane_contents_static.html             |  4 ++--
 src/app/boards/template/card_details.html        |  8 ++++----
 src/app/boards/template/detail.html              |  6 +++---
 src/app/boards/template/list.html                |  8 ++++----
 src/app/boards/template/new.html                 |  2 +-
 src/app/profile/template/token_new.html          |  2 +-
 src/app/project_group/template/detail.html       |  4 ++--
 src/app/project_group/template/edit.html         |  2 +-
 src/app/project_group/template/list.html         |  4 ++--
 src/app/project_group/template/new.html          |  2 +-
 src/app/projects/template/detail.html            |  4 ++--
 src/app/projects/template/list.html              |  4 ++--
 src/app/search/template/index.html               | 16 ++++++++--------
 .../template/project_group_search_item.html      |  2 +-
 src/app/services/template/result_set_pager.html  |  2 +-
 .../stories/template/add_task_to_worklist.html   |  2 +-
 .../template/comments/task_priority_changed.html |  2 +-
 .../template/comments/task_status_changed.html   |  2 +-
 .../stories/template/comments/user_comment.html  |  2 +-
 src/app/stories/template/detail.html             | 12 ++++++------
 src/app/stories/template/list.html               |  4 ++--
 src/app/stories/template/new.html                |  2 +-
 src/app/stories/template/new_page.html           |  6 +++---
 src/app/storyboard/template/header_menu.html     | 12 ++++++------
 src/app/storyboard/template/side_menu.html       |  4 ++--
 src/app/subscription/template/subscribe.html     |  6 +++---
 src/app/util/template/input_inline.html          |  4 ++--
 src/app/util/template/project_typeahead.html     |  8 ++++----
 src/app/util/template/user_typeahead.html        |  8 ++++----
 src/app/worklists/template/additem.html          |  4 ++--
 src/app/worklists/template/detail.html           | 10 +++++-----
 src/index.html                                   |  2 +-
 src/theme/base/icons.less                        |  4 ++--
 src/theme/main.less                              |  8 +++++++-
 yarn.lock                                        |  8 ++++----
 42 files changed, 109 insertions(+), 102 deletions(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index c71e8098..48426b84 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -46,7 +46,8 @@ module.exports = function (grunt) {
         test: './test',
         output: './dist',
         report: './reports',
-        node_modules: './node_modules'
+        node_modules: './node_modules',
+        fontawesome: './node_modules/@fortawesome/fontawesome-free-webfonts'
     };
 
     var proxies = {
@@ -152,9 +153,9 @@ module.exports = function (grunt) {
                         dir.theme + '/custom/',
                         dir.theme + '/storyboard/',
                         dir.node_modules + '/bootstrap/less/',
-                        dir.node_modules + '/font-awesome/less/',
                         dir.node_modules + '/highlightjs/styles/',
-                        dir.node_modules + '/ng-sortable/dist/'
+                        dir.node_modules + '/ng-sortable/dist/',
+                        dir.fontawesome + '/less/'
                     ];
                 },
                 cleancss: true,
@@ -252,10 +253,10 @@ module.exports = function (grunt) {
                     {
                         expand: true,
                         dot: true,
-                        cwd: dir.node_modules + '/font-awesome',
-                        dest: dir.output,
+                        cwd: dir.fontawesome + '/webfonts/',
+                        dest: dir.output + '/fonts',
                         src: [
-                            'fonts/*.*'
+                            '*.*'
                         ]
                     },
                     {
diff --git a/package.json b/package.json
index e3ceee42..aa41ba20 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "selenium-standalone": "2.43.1-2.9.0-1"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free-webfonts": "^1.0.3",
     "@uirouter/angularjs": "^1.0.12",
     "angular": "1.5.8",
     "angular-bootstrap": "0.12.2",
@@ -77,7 +78,6 @@
     "angular-scenario": "1.5.8",
     "angularjs-viewhead": "0.0.1",
     "bootstrap": "3.3.7",
-    "font-awesome": "4.5.0",
     "gifsicle": "1.0.0",
     "highlightjs": "9.10.0",
     "markdown-it": "8.4.0",
diff --git a/src/app/admin/template/team.html b/src/app/admin/template/team.html
index 3c3658e4..0e0925d6 100644
--- a/src/app/admin/template/team.html
+++ b/src/app/admin/template/team.html
@@ -40,7 +40,7 @@
                        ng-enter="search()"
                        placeholder="Search Teams">
                 <span class="form-control-feedback text-muted form-control-feedback-sm">
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-hide="teams.$resolved"></i>
                     <i class="fa fa-search"
                        ng-show="teams.$resolved"></i>
@@ -63,7 +63,7 @@
                 <tr>
                     <td>
                         <span class="text-muted text-center">
-                            <i class="fa fa-spin fa-refresh"></i>
+                            <i class="fa fa-spin fa-sync"></i>
                         </span>
                     </td>
                 </tr>
diff --git a/src/app/admin/template/team_edit.html b/src/app/admin/template/team_edit.html
index b03da965..9fffb21f 100644
--- a/src/app/admin/template/team_edit.html
+++ b/src/app/admin/template/team_edit.html
@@ -22,7 +22,7 @@
                 <i class="fa fa-sb-team"></i> {{team.name}}
                 <small>
                     <a ng-click="toggleEdit()">
-                        <i class="fa fa-pencil"></i>
+                        <i class="fa fa-pencil-alt"></i>
                     </a>
                 </small>
             </h1>
diff --git a/src/app/admin/template/user.html b/src/app/admin/template/user.html
index 0f0dd3ab..84e8fb95 100644
--- a/src/app/admin/template/user.html
+++ b/src/app/admin/template/user.html
@@ -41,7 +41,7 @@
                        ng-enter="search()"
                        placeholder="Search Users">
                 <span class="form-control-feedback text-muted form-control-feedback-sm">
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-hide="users.$resolved"></i>
                     <i class="fa fa-search"
                        ng-show="users.$resolved"></i>
@@ -66,7 +66,7 @@
                 <tr>
                     <td>
                         <span class="text-muted text-center">
-                            <i class="fa fa-spin fa-refresh"></i>
+                            <i class="fa fa-spin fa-sync"></i>
                         </span>
                     </td>
                 </tr>
diff --git a/src/app/auth/template/busy.html b/src/app/auth/template/busy.html
index 56f851cd..114c9447 100644
--- a/src/app/auth/template/busy.html
+++ b/src/app/auth/template/busy.html
@@ -19,7 +19,7 @@
         <div class="col-xs-12">
             <p class="text-center text-muted">
                 <br/>
-                <i class="fa fa-refresh fa-lg fa-spin"></i>
+                <i class="fa fa-sync fa-lg fa-spin"></i>
             </p>
         </div>
     </div>
diff --git a/src/app/boards/template/board_contents/kanban_lane_contents.html b/src/app/boards/template/board_contents/kanban_lane_contents.html
index e8bb1065..a0ee00ad 100644
--- a/src/app/boards/template/board_contents/kanban_lane_contents.html
+++ b/src/app/boards/template/board_contents/kanban_lane_contents.html
@@ -39,7 +39,7 @@
             </div>
             <div class="row target-date" ng-show="item.resolved_due_date">
                 <div class="col-xs-1">
-                    <i class="fa fa-clock-o text-muted"></i>
+                    <i class="fa fa-clock text-muted"></i>
                 </div>
                 <div class="col-xs-10">
                     <span time-moment
@@ -68,7 +68,7 @@
             </div>
             <div class="row target-date" ng-show="item.resolved_due_date">
                 <div class="col-xs-1">
-                    <i class="fa fa-clock-o text-muted"></i>
+                    <i class="fa fa-clock text-muted"></i>
                 </div>
                 <div class="col-xs-10">
                     <span time-moment
diff --git a/src/app/boards/template/board_contents/kanban_lane_contents_static.html b/src/app/boards/template/board_contents/kanban_lane_contents_static.html
index de308234..bad9d244 100644
--- a/src/app/boards/template/board_contents/kanban_lane_contents_static.html
+++ b/src/app/boards/template/board_contents/kanban_lane_contents_static.html
@@ -32,7 +32,7 @@
             </div>
             <div class="row target-date" ng-show="item.resolved_due_date">
                 <div class="col-xs-1">
-                    <i class="fa fa-clock-o text-muted"></i>
+                    <i class="fa fa-clock text-muted"></i>
                 </div>
                 <div class="col-xs-10">
                     <span time-moment
@@ -57,7 +57,7 @@
             </div>
             <div class="row target-date" ng-show="item.resolved_due_date">
                 <div class="col-xs-1">
-                    <i class="fa fa-clock-o text-muted"></i>
+                    <i class="fa fa-clock text-muted"></i>
                 </div>
                 <div class="col-xs-10">
                     <span time-moment
diff --git a/src/app/boards/template/card_details.html b/src/app/boards/template/card_details.html
index 08b6a80f..dd5dc30c 100644
--- a/src/app/boards/template/card_details.html
+++ b/src/app/boards/template/card_details.html
@@ -45,7 +45,7 @@
                         {{card.task.title}}
                         <small ng-show="permissions.moveCards || permissions.editBoard">
                             <a href ng-click="toggleEditTitle()">
-                                <i class="fa fa-pencil"></i>
+                                <i class="fa fa-pencil-alt"></i>
                             </a>
                         </small>
                     </span>
@@ -151,7 +151,7 @@
                  ng-click="toggleEditDueDate(); toggleDueDateDropdown()">
                 <div class="row">
                     <div class="col-xs-1">
-                        <i class="fa fa-clock-o"></i>
+                        <i class="fa fa-clock"></i>
                     </div>
                     <div class="col-xs-11" ng-show="!editingDueDate">
                         <span ng-show="validDueDate(card.resolved_due_date)">
@@ -275,7 +275,7 @@
                         </a>
                         <small>
                             <a href ng-click="toggleEditTitle()">
-                                <i class="fa fa-pencil"></i>
+                                <i class="fa fa-pencil-alt"></i>
                             </a>
                         </small>
                     </span>
@@ -375,7 +375,7 @@
                  ng-click="toggleEditDueDate(); toggleDueDateDropdown()">
                 <div class="row">
                     <div class="col-xs-1">
-                        <i class="fa fa-clock-o"></i>
+                        <i class="fa fa-clock"></i>
                     </div>
                     <div class="col-xs-11" ng-show="!editingDueDate">
                         <span ng-show="validDueDate(card.resolved_due_date)">
diff --git a/src/app/boards/template/detail.html b/src/app/boards/template/detail.html
index 43003950..07f65593 100644
--- a/src/app/boards/template/detail.html
+++ b/src/app/boards/template/detail.html
@@ -64,7 +64,7 @@
                         <small>
                             <a ng-click="toggleEditMode()"
                                ng-show="permissions.editBoard">
-                                <i class="fa fa-pencil"></i>
+                                <i class="fa fa-pencil-alt"></i>
                             </a>
                         </small>
                     </h1>
@@ -105,7 +105,7 @@
                        <td class="col-xs-1 text-right">
                            <a href ng-click="editDueDate(dueDate)"
                                    ng-if="dueDate.editable">
-                               <i class="fa fa-pencil"></i>
+                               <i class="fa fa-pencil-alt"></i>
                            </a>
                        </td>
                        <td class="col-xs-1 text-right">
@@ -360,7 +360,7 @@
                         {{ lane.worklist.title }}
                     </a>
                     <a href ng-click="editWorklist(lane.worklist)">
-                        <i class="fa fa-pencil"></i>
+                        <i class="fa fa-pencil-alt"></i>
                     </a>
                     <button type="button" class="close" title="Remove"
                             ng-click="removeLane(lane)">
diff --git a/src/app/boards/template/list.html b/src/app/boards/template/list.html
index 46cf4f69..033e3393 100644
--- a/src/app/boards/template/list.html
+++ b/src/app/boards/template/list.html
@@ -61,7 +61,7 @@
                 <span class="form-control-feedback text-muted">
                     <i class="fa fa-search"
                        ng-hide="loadingCriteria"></i>
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-show="loadingCriteria"></i>
                 </span>
 
@@ -85,7 +85,7 @@
                 </tbody>
                 <tbody ng-show="isSearching">
                 <td colspan="3" class="text-center">
-                    <i class="fa fa-refresh fa-spin fa-lg"></i>
+                    <i class="fa fa-sync fa-spin fa-lg"></i>
                 </td>
                 </tbody>
             </table>
@@ -134,7 +134,7 @@
                 <span class="form-control-feedback text-muted">
                     <i class="fa fa-search"
                        ng-hide="loadingCriteria"></i>
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-show="loadingCriteria"></i>
                 </span>
 
@@ -158,7 +158,7 @@
                 </tbody>
                 <tbody ng-show="isSearching">
                 <td colspan="3" class="text-center">
-                    <i class="fa fa-refresh fa-spin fa-lg"></i>
+                    <i class="fa fa-sync fa-spin fa-lg"></i>
                 </td>
                 </tbody>
             </table>
diff --git a/src/app/boards/template/new.html b/src/app/boards/template/new.html
index 29255b79..e0eceaaa 100644
--- a/src/app/boards/template/new.html
+++ b/src/app/boards/template/new.html
@@ -111,7 +111,7 @@
                     &nbsp;
                     <a ng-click="toggleEdit(worklist)">
                         {{worklist.title}}
-                        <i class="fa fa-pencil"></i>
+                        <i class="fa fa-pencil-alt"></i>
                     </a>
                     <button type="button" class="close" title="Remove"
                             ng-click="removeLane(worklist)">
diff --git a/src/app/profile/template/token_new.html b/src/app/profile/template/token_new.html
index cd12ed5f..a95702b4 100644
--- a/src/app/profile/template/token_new.html
+++ b/src/app/profile/template/token_new.html
@@ -88,7 +88,7 @@
                     />
             <span class="form-control-feedback text-muted
             form-control-feedback-sm">
-                <i class="fa fa-refresh fa-spin" ng-show="loadingProjects"></i>
+                <i class="fa fa-sync fa-spin" ng-show="loadingProjects"></i>
                 <i class="fa fa-search" ng-hide="loadingProjects"></i>
             </span>
         </div>
diff --git a/src/app/project_group/template/detail.html b/src/app/project_group/template/detail.html
index cdb6fada..4f23c60e 100644
--- a/src/app/project_group/template/detail.html
+++ b/src/app/project_group/template/detail.html
@@ -7,7 +7,7 @@
                 {{projectGroup.title}}
                 <small>
                     <a href="#!/project_group/{{projectGroup.id}}/edit" permission="is_superuser">
-                        <i class="fa fa-pencil"></i>
+                        <i class="fa fa-pencil-alt"></i>
                     </a>
                     <subscribe resource="project_group"
                                resource-id="projectGroup.id"
@@ -116,7 +116,7 @@
 
                 <tbody ng-if="!stories.$resolved && (showMerged || showInvalid || showActive)">
                 <td class="text-center text-muted">
-                    <i class="fa fa-refresh fa-spin"></i>
+                    <i class="fa fa-sync fa-spin"></i>
                 </td>
                 </tbody>
 
diff --git a/src/app/project_group/template/edit.html b/src/app/project_group/template/edit.html
index 4025f094..eec425e5 100644
--- a/src/app/project_group/template/edit.html
+++ b/src/app/project_group/template/edit.html
@@ -162,7 +162,7 @@
                     />
             <span class="form-control-feedback text-muted
             form-control-feedback-sm">
-                <i class="fa fa-refresh fa-spin" ng-show="loadingProjects"></i>
+                <i class="fa fa-sync fa-spin" ng-show="loadingProjects"></i>
                 <i class="fa fa-search" ng-hide="loadingProjects"></i>
             </span>
         </div>
diff --git a/src/app/project_group/template/list.html b/src/app/project_group/template/list.html
index 5d3ff78c..9c30c8f5 100644
--- a/src/app/project_group/template/list.html
+++ b/src/app/project_group/template/list.html
@@ -51,7 +51,7 @@
                 <span class="form-control-feedback text-muted">
                     <i class="fa fa-search"
                        ng-hide="loadingCriteria"></i>
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-show="loadingCriteria"></i>
                 </span>
                 <result-set-pager
@@ -112,7 +112,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="3" class="text-center">
-                    <small class="fa fa-spin fa-lg fa-refresh text-muted">
+                    <small class="fa fa-spin fa-lg fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
diff --git a/src/app/project_group/template/new.html b/src/app/project_group/template/new.html
index 08567f8c..df2bc59b 100644
--- a/src/app/project_group/template/new.html
+++ b/src/app/project_group/template/new.html
@@ -158,7 +158,7 @@
                     />
             <span class="form-control-feedback text-muted
             form-control-feedback-sm">
-                <i class="fa fa-refresh fa-spin" ng-show="loadingProjects"></i>
+                <i class="fa fa-sync fa-spin" ng-show="loadingProjects"></i>
                 <i class="fa fa-search" ng-hide="loadingProjects"></i>
             </span>
         </div>
diff --git a/src/app/projects/template/detail.html b/src/app/projects/template/detail.html
index 48b58a83..e2ce03a7 100644
--- a/src/app/projects/template/detail.html
+++ b/src/app/projects/template/detail.html
@@ -41,7 +41,7 @@
         </em>
         <small ng-show="isLoggedIn">
             <a href="" ng-click="toggleEditMode()" permission="is_superuser">
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </a>
             <subscribe resource="project"
                        resource-id="project.id"
@@ -232,7 +232,7 @@
             <div ng-show="isSearching">
                 <hr/>
                 <p class="text-center">
-                    <i class="fa fa-refresh fa-spin fa-lg"></i>
+                    <i class="fa fa-sync fa-spin fa-lg"></i>
                 </p>
             </div>
 
diff --git a/src/app/projects/template/list.html b/src/app/projects/template/list.html
index 339fdde4..91a231c2 100644
--- a/src/app/projects/template/list.html
+++ b/src/app/projects/template/list.html
@@ -53,7 +53,7 @@
                 <span class="form-control-feedback text-muted">
                     <i class="fa fa-search"
                        ng-hide="loadingCriteria"></i>
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-show="loadingCriteria"></i>
                 </span>
                 <result-set-pager
@@ -110,7 +110,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2" class="text-center">
-                    <small class="fa fa-spin fa-lg fa-refresh text-muted">
+                    <small class="fa fa-spin fa-lg fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
diff --git a/src/app/search/template/index.html b/src/app/search/template/index.html
index fd929ab1..56a0ac81 100644
--- a/src/app/search/template/index.html
+++ b/src/app/search/template/index.html
@@ -37,7 +37,7 @@
                 <span class="form-control-feedback text-muted">
                     <i class="fa fa-search"
                        ng-hide="loadingCriteria"></i>
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-show="loadingCriteria"></i>
                 </span>
             </div>
@@ -95,7 +95,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2">
-                    <small class="fa fa-spin fa-refresh text-muted">
+                    <small class="fa fa-spin fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
@@ -140,7 +140,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2">
-                    <small class="fa fa-spin fa-refresh text-muted">
+                    <small class="fa fa-spin fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
@@ -185,7 +185,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2">
-                    <small class="fa fa-spin fa-refresh text-muted">
+                    <small class="fa fa-spin fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
@@ -230,7 +230,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2">
-                    <small class="fa fa-spin fa-refresh text-muted">
+                    <small class="fa fa-spin fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
@@ -276,7 +276,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2">
-                    <small class="fa fa-spin fa-refresh text-muted">
+                    <small class="fa fa-spin fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
@@ -321,7 +321,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2">
-                    <small class="fa fa-spin fa-refresh text-muted">
+                    <small class="fa fa-spin fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
@@ -366,7 +366,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="2">
-                    <small class="fa fa-spin fa-refresh text-muted">
+                    <small class="fa fa-spin fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
diff --git a/src/app/search/template/project_group_search_item.html b/src/app/search/template/project_group_search_item.html
index 6d7f3257..af722c53 100644
--- a/src/app/search/template/project_group_search_item.html
+++ b/src/app/search/template/project_group_search_item.html
@@ -17,7 +17,7 @@
         <tr>
             <td>
                 <span class="text-muted text-center">
-                    <i class="fa fa-spin fa-refresh"></i>
+                    <i class="fa fa-spin fa-sync"></i>
                 </span>
             </td>
         </tr>
diff --git a/src/app/services/template/result_set_pager.html b/src/app/services/template/result_set_pager.html
index a39f4a29..b9df9227 100644
--- a/src/app/services/template/result_set_pager.html
+++ b/src/app/services/template/result_set_pager.html
@@ -34,7 +34,7 @@
     <div>
         <button class="btn btn-xs btn-default"
                 dropdown-toggle>
-            <i class="fa fa-gear"></i>
+            <i class="fa fa-cog"></i>
         </button>
     </div>
     <ul class="dropdown-menu dropdown-menu-right" role="menu">
diff --git a/src/app/stories/template/add_task_to_worklist.html b/src/app/stories/template/add_task_to_worklist.html
index bfceea52..e1d400be 100644
--- a/src/app/stories/template/add_task_to_worklist.html
+++ b/src/app/stories/template/add_task_to_worklist.html
@@ -42,7 +42,7 @@
                     <span class="form-control-feedback text-muted">
                         <i class="fa fa-search"
                            ng-hide="loadingCriteria"></i>
-                        <i class="fa fa-refresh fa-spin"
+                        <i class="fa fa-sync fa-spin"
                            ng-show="loadingCriteria"></i>
                     </span>
                 </div>
diff --git a/src/app/stories/template/comments/task_priority_changed.html b/src/app/stories/template/comments/task_priority_changed.html
index 43b61619..9a2f55fa 100644
--- a/src/app/stories/template/comments/task_priority_changed.html
+++ b/src/app/stories/template/comments/task_priority_changed.html
@@ -1,6 +1,6 @@
 <div class="discussion-comment text-muted" ng-if="display_events_task_priority_changed">
     <p class="discussion-comment-icon">
-        <i class="fa fa-exchange"></i>
+        <i class="fas fa-exchange-alt"></i>
     </p>
     <p class="discussion-event">
         <span>{{event.author.full_name}} updated the priority of the task 
diff --git a/src/app/stories/template/comments/task_status_changed.html b/src/app/stories/template/comments/task_status_changed.html
index b4d5ef92..23fa76aa 100644
--- a/src/app/stories/template/comments/task_status_changed.html
+++ b/src/app/stories/template/comments/task_status_changed.html
@@ -1,6 +1,6 @@
 <div class="discussion-comment text-muted" ng-if="display_events_task_status_changed">
     <p class="discussion-comment-icon">
-        <i class="fa fa-exchange"></i>
+        <i class="fas fa-exchange-alt"></i>
     </p>
     <p class="discussion-event">
         <span>
diff --git a/src/app/stories/template/comments/user_comment.html b/src/app/stories/template/comments/user_comment.html
index 982aa05e..c3084628 100644
--- a/src/app/stories/template/comments/user_comment.html
+++ b/src/app/stories/template/comments/user_comment.html
@@ -20,7 +20,7 @@
             <button class="btn btn-default btn-xs" ng-click="edit(event)"
                     ng-show="isAuthor(event) && enableEditableComments"
                     title="Edit">
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </button>
             <span ng-show="isAuthor(event) && enableEditableComments">&nbsp;</span>
             <button class="btn btn-default btn-xs" ng-click="quote(event)" ng-show="isLoggedIn"
diff --git a/src/app/stories/template/detail.html b/src/app/stories/template/detail.html
index 0a109c4b..a7036bcf 100644
--- a/src/app/stories/template/detail.html
+++ b/src/app/stories/template/detail.html
@@ -71,7 +71,7 @@
 
         <small ng-show="isLoggedIn">
             <a href="" ng-click="toggleEditMode()" >
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </a>
             <subscribe resource="story"
                     resource-id="story.id">
@@ -88,7 +88,7 @@
             None
         </em>
         <span ng-show="story.creator_id && !creator.$resolved">
-            <i class="fa fa-refresh fa-spin"></i>
+            <i class="fa fa-sync fa-spin"></i>
         </span>
         <span ng-show="creator.full_name">
             {{creator.full_name}}
@@ -356,7 +356,7 @@
             <h4>
                 <span class="label label-warning">
                     {{tag}}
-                    <i class="fa fa-remove" ng-show="isLoggedIn"
+                    <i class="fa fa-times" ng-show="isLoggedIn"
                        ng-click="removeTag(tag)"></i>
                 </span>
             </h4>
@@ -530,7 +530,7 @@
                 <button class="btn btn-primary btn-xs pull-right"
                         ng-show="!task.editing && task.link && isLoggedIn"
                         ng-click="editNotes(task)">
-                    <i class="fa fa-pencil"></i> Edit
+                    <i class="fa fa-pencil-alt"></i> Edit
                 </button>
                 <insert-markdown content="task.link" ng-show="!task.editing"></insert-markdown>
                 <insert-markdown content="task.tempNotes" ng-show="task.editing && notesPreview"></insert-markdown>
@@ -572,7 +572,7 @@
                 <div class="padded-row pull-right" ng-show="!task.editing && !task.link">
                     <button class="btn btn-primary btn-xs"
                             ng-click="editNotes(task)">
-                        <i class="fa fa-pencil"></i> Add notes
+                        <i class="fa fa-pencil-alt"></i> Add notes
                     </button>
                 </div>
             </div>
@@ -772,7 +772,7 @@
             <h4>Events Timeline and Comments</h4>
         </div>
         <div class="discussion-overlay text-center" ng-show="isSearching">
-            <i class="fa fa-lg fa-refresh fa-spin text-muted"></i>
+            <i class="fa fa-lg fa-sync fa-spin text-muted"></i>
         </div>
         <div class="discussion" ng-class="{'discussion-faded': isSearching}">
             <div class="alert alert-warning"
diff --git a/src/app/stories/template/list.html b/src/app/stories/template/list.html
index 9b3ca82d..962449af 100644
--- a/src/app/stories/template/list.html
+++ b/src/app/stories/template/list.html
@@ -52,7 +52,7 @@
                 <span class="form-control-feedback text-muted">
                     <i class="fa fa-search"
                        ng-hide="loadingCriteria"></i>
-                    <i class="fa fa-refresh fa-spin"
+                    <i class="fa fa-sync fa-spin"
                        ng-show="loadingCriteria"></i>
                 </span>
                 <result-set-pager
@@ -148,7 +148,7 @@
 
                 <tbody ng-if="isSearching">
                 <td colspan="5" class="text-center">
-                    <small class="fa fa-spin fa-lg fa-refresh text-muted">
+                    <small class="fa fa-spin fa-lg fa-sync text-muted">
                     </small>
                 </td>
                 </tbody>
diff --git a/src/app/stories/template/new.html b/src/app/stories/template/new.html
index 52bc1b88..2f1fa926 100644
--- a/src/app/stories/template/new.html
+++ b/src/app/stories/template/new.html
@@ -217,7 +217,7 @@
                     />
             <span class="form-control-feedback text-muted
             form-control-feedback-sm">
-                <i class="fa fa-refresh fa-spin" ng-show="loadingProjects"></i>
+                <i class="fa fa-sync fa-spin" ng-show="loadingProjects"></i>
                 <i class="fa fa-search" ng-hide="loadingProjects"></i>
             </span>
         </div>
diff --git a/src/app/stories/template/new_page.html b/src/app/stories/template/new_page.html
index f5265fc4..198a76ff 100644
--- a/src/app/stories/template/new_page.html
+++ b/src/app/stories/template/new_page.html
@@ -228,7 +228,7 @@
             <h4>
                 <span class="label label-warning">
                     {{tag}}
-                    <i class="fa fa-remove" ng-show="isLoggedIn"
+                    <i class="fa fa-times" ng-show="isLoggedIn"
                        ng-click="removeTag(tag)"></i>
                 </span>
             </h4>
@@ -387,7 +387,7 @@
                 <button class="btn btn-primary btn-xs pull-right"
                         ng-show="!task.editing && task.link && isLoggedIn"
                         ng-click="editNotes(task)">
-                    <i class="fa fa-pencil"></i> Edit
+                    <i class="fa fa-pencil-alt"></i> Edit
                 </button>
                 <insert-markdown content="task.link" ng-show="!task.editing"></insert-markdown>
                 <insert-markdown content="task.tempNotes" ng-show="task.editing && notesPreview"></insert-markdown>
@@ -429,7 +429,7 @@
                 <div class="padded-row pull-right" ng-show="!task.editing && !task.link">
                     <button class="btn btn-primary btn-xs"
                             ng-click="editNotes(task)">
-                        <i class="fa fa-pencil"></i> Add notes
+                        <i class="fa fa-pencil-alt"></i> Add notes
                     </button>
                 </div>
             </div>
diff --git a/src/app/storyboard/template/header_menu.html b/src/app/storyboard/template/header_menu.html
index f3bcb184..6efc8784 100644
--- a/src/app/storyboard/template/header_menu.html
+++ b/src/app/storyboard/template/header_menu.html
@@ -89,7 +89,7 @@
         <ul class="nav navbar-nav navbar-right">
             <li ng-hide="isLoggedIn">
                 <a href="#!/auth/authorize">
-                    <i class="fa fa-sign-in"></i>
+                    <i class="fa fa-sign-in-alt"></i>
                     Login
                 </a>
             </li>
@@ -107,7 +107,7 @@
                 <ul class="dropdown-menu">
                     <li>
                         <a href="#!/auth/deauthorize">
-                            <i class="fa fa-sign-out"></i>
+                            <i class="fa fa-sign-out-alt"></i>
                             Logout
                         </a>
                     </li>
@@ -131,7 +131,7 @@
                        typeahead-template-url="app/search/template/typeahead_criteria_item.html"
                         />
             <span class="form-control-feedback text-muted">
-                <i class="fa fa-spin fa-refresh"
+                <i class="fa fa-spin fa-sync"
                    ng-show="headerCriteriaLoading"></i>
             </span>
             </div>
@@ -148,12 +148,12 @@
                     class="btn btn-sm btn-primary navbar-btn pull-right"
                     ng-click="showMobileMenu = !showMobileMenu"
                     ng-show="isLoggedIn">
-                <i class="fa fa-gear"></i>
+                <i class="fa fa-cog"></i>
             </button>
             <a href="#!/auth/authorize"
                class="btn btn-sm btn-primary navbar-btn pull-right"
                ng-hide="isLoggedIn">
-                <i class="fa fa-sign-in"></i>
+                <i class="fa fa-sign-in-alt"></i>
             </a>
             <button type="button"
                     ng-click="showMobileNewMenu = !showMobileNewMenu"
@@ -222,7 +222,7 @@
                 <li class="divider"></li>
                 <li><a href="#!/auth/deauthorize"
                        ng-click="showMobileMenu = false">
-                    <i class="fa fa-sign-out"></i>
+                    <i class="fa fa-sign-out-alt"></i>
                     Logout
                 </a></li>
             </ul>
diff --git a/src/app/storyboard/template/side_menu.html b/src/app/storyboard/template/side_menu.html
index 51d37f8e..b76d114b 100644
--- a/src/app/storyboard/template/side_menu.html
+++ b/src/app/storyboard/template/side_menu.html
@@ -30,8 +30,8 @@
             <li class="nav-divider"></li>
             <li active-path="^\/(dashboard\/.*)?$" ng-if="isLoggedIn">
                 <a href="#!/">
-                    <i class="fa fa-dashboard fa-lg visible-sm visible-xs"></i>
-                    <i class="fa fa-dashboard fa-3x visible-lg visible-md"></i>
+                    <i class="fa fa-tachometer-alt fa-lg visible-sm visible-xs"></i>
+                    <i class="fa fa-tachometer-alt fa-3x visible-lg visible-md"></i>
                     <small class="visible-lg visible-md">Dashboard</small>
                 </a>
             </li>
diff --git a/src/app/subscription/template/subscribe.html b/src/app/subscription/template/subscribe.html
index e27f04bf..ace31c8f 100644
--- a/src/app/subscription/template/subscribe.html
+++ b/src/app/subscription/template/subscribe.html
@@ -3,11 +3,11 @@
     <i ng-if="subscribed"
        class="fa fa-star"></i>
     <i ng-if="!subscribed"
-       class="fa fa-star-o"></i>
+       class="far fa-star"></i>
 </span>
 <span ng-if="resolving"
       class="text-muted">
-    <i class="fa fa-spin fa-refresh"></i>
+    <i class="fa fa-spin fa-sync"></i>
 </span>
 <a ng-if="enabled && !resolving"
    href=""
@@ -16,5 +16,5 @@
     <i ng-if="subscribed"
        class="fa fa-star"></i>
     <i ng-if="!subscribed"
-       class="fa fa-star-o"></i>
+       class="far fa-star"></i>
 </a>
diff --git a/src/app/util/template/input_inline.html b/src/app/util/template/input_inline.html
index 172d4383..7bc18cd0 100644
--- a/src/app/util/template/input_inline.html
+++ b/src/app/util/template/input_inline.html
@@ -10,11 +10,11 @@
            ng-click="toggleForm()"
            ng-if="!showForm && enabled">
             <span ng-if="inputText">
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </span>
             <em ng-if="!inputText" class="text-muted">
                 {{emptyPrompt}}
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </em>
         </a>
 
diff --git a/src/app/util/template/project_typeahead.html b/src/app/util/template/project_typeahead.html
index 98feb205..25856231 100644
--- a/src/app/util/template/project_typeahead.html
+++ b/src/app/util/template/project_typeahead.html
@@ -4,7 +4,7 @@
     <p class="form-control-static">
         <i class="fa fa-sb-project text-muted"
            ng-if="!project || project.$resolved"></i>
-        <i class="fa fa-spin fa-refresh text-muted"
+        <i class="fa fa-spin fa-sync text-muted"
            ng-if="project && !project.$resolved"></i>
         &nbsp;
 
@@ -16,11 +16,11 @@
            ng-click="toggleForm()"
            ng-if="!showForm && enabled">
             <span ng-if="project">
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </span>
             <em ng-if="!project" class="text-muted">
                 {{emptyPrompt}}
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </em>
         </a>
 
@@ -51,6 +51,6 @@
 
     <span class="form-control-feedback text-muted">
         <i class="fa fa-search" ng-if="!loadingProjects"></i>
-        <i class="fa fa-spin fa-refresh" ng-if="loadingProjects"></i>
+        <i class="fa fa-spin fa-sync" ng-if="loadingProjects"></i>
     </span>
 </div>
diff --git a/src/app/util/template/user_typeahead.html b/src/app/util/template/user_typeahead.html
index fcbb309b..28a204b1 100644
--- a/src/app/util/template/user_typeahead.html
+++ b/src/app/util/template/user_typeahead.html
@@ -4,7 +4,7 @@
     <p class="form-control-static">
         <i class="fa fa-sb-user text-muted"
            ng-if="!user || user.$resolved"></i>
-        <i class="fa fa-spin fa-refresh text-muted"
+        <i class="fa fa-spin fa-sync text-muted"
            ng-if="user && !user.$resolved"></i>
         &nbsp;
 
@@ -16,11 +16,11 @@
            ng-click="toggleForm()"
            ng-if="!showForm && enabled">
             <span ng-if="user">
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </span>
             <em ng-if="!user" class="text-muted">
                 {{emptyPrompt}}
-                <i class="fa fa-pencil"></i>
+                <i class="fa fa-pencil-alt"></i>
             </em>
         </a>
 
@@ -57,6 +57,6 @@
 
     <span class="form-control-feedback text-muted">
         <i class="fa fa-search" ng-if="!loadingUsers"></i>
-        <i class="fa fa-spin fa-refresh" ng-if="loadingUsers"></i>
+        <i class="fa fa-spin fa-sync" ng-if="loadingUsers"></i>
     </span>
 </div>
diff --git a/src/app/worklists/template/additem.html b/src/app/worklists/template/additem.html
index 51356db1..8b468b7d 100644
--- a/src/app/worklists/template/additem.html
+++ b/src/app/worklists/template/additem.html
@@ -58,7 +58,7 @@
                         </div>
                         <span class="form-control-feedback text-muted
                                      form-control-feedback-sm">
-                            <i class="fa fa-refresh fa-spin" ng-show="loadingItems"></i>
+                            <i class="fa fa-sync fa-spin" ng-show="loadingItems"></i>
                             <i class="fa fa-search" ng-hide="loadingItems"></i>
                         </span>
                     </div>
@@ -160,7 +160,7 @@
             <tbody ng-show="item.loadingTasks">
                 <tr>
                     <td class="text-center">
-                        <i class="fa fa-spin fa-refresh"></i>
+                        <i class="fa fa-spin fa-sync"></i>
                     </td>
                 </tr>
             </tbody>
diff --git a/src/app/worklists/template/detail.html b/src/app/worklists/template/detail.html
index b4369535..813d28f7 100644
--- a/src/app/worklists/template/detail.html
+++ b/src/app/worklists/template/detail.html
@@ -60,7 +60,7 @@
                 <small ng-show="isLoggedIn">
                     <a ng-click="toggleEditMode()"
                        ng-show="permissions.editWorklist">
-                        <i class="fa fa-pencil"></i>
+                        <i class="fa fa-pencil-alt"></i>
                     </a>
                     <subscribe resource="worklist"
                                resource-id="worklist.id">
@@ -391,7 +391,7 @@
                             </div>
                             <div class="row target-date" ng-show="item.resolved_due_date">
                                 <div class="col-xs-1">
-                                    <i class="fa fa-clock-o text-muted"></i>
+                                    <i class="fa fa-clock text-muted"></i>
                                 </div>
                                 <div class="col-xs-11">
                                     <span time-moment
@@ -422,7 +422,7 @@
                             </div>
                             <div class="row target-date" ng-show="item.resolved_due_date">
                                 <div class="col-xs-1">
-                                    <i class="fa fa-clock-o text-muted"></i>
+                                    <i class="fa fa-clock text-muted"></i>
                                 </div>
                                 <div class="col-xs-10">
                                     <span time-moment
@@ -476,7 +476,7 @@
                             </div>
                             <div class="row target-date" ng-show="item.resolved_due_date">
                                 <div class="col-xs-1">
-                                    <i class="fa fa-clock-o text-muted"></i>
+                                    <i class="fa fa-clock text-muted"></i>
                                 </div>
                                 <div class="col-xs-11">
                                     <span time-moment
@@ -501,7 +501,7 @@
                             </div>
                             <div class="row target-date" ng-show="item.resolved_due_date">
                                 <div class="col-xs-1">
-                                    <i class="fa fa-clock-o text-muted"></i>
+                                    <i class="fa fa-clock text-muted"></i>
                                 </div>
                                 <div class="col-xs-10">
                                     <span time-moment
diff --git a/src/index.html b/src/index.html
index 31fa443a..8350fa8e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -61,7 +61,7 @@
             <div class="col-xs-12">
                 <p class="text-center text-muted">
                     <br/>
-                    <i class="fa fa-refresh fa-lg fa-spin"></i>
+                    <i class="fa fa-sync fa-lg fa-spin"></i>
                 </p>
             </div>
         </div>
diff --git a/src/theme/base/icons.less b/src/theme/base/icons.less
index 325f1277..0aaadb3b 100644
--- a/src/theme/base/icons.less
+++ b/src/theme/base/icons.less
@@ -26,9 +26,9 @@
 .@{fa-css-prefix}-sb-project:before { content: @fa-var-cube; }
 .@{fa-css-prefix}-sb-project-group:before { content: @fa-var-cubes; }
 .@{fa-css-prefix}-sb-team:before { content: @fa-var-users; }
-.@{fa-css-prefix}-sb-admin:before { content: @fa-var-gears; }
+.@{fa-css-prefix}-sb-admin:before { content: @fa-var-cogs; }
 .@{fa-css-prefix}-sb-profile:before { content: @fa-var-user; }
-.@{fa-css-prefix}-sb-profile-preferences:before { content: @fa-var-gear; }
+.@{fa-css-prefix}-sb-profile-preferences:before { content: @fa-var-cog; }
 .@{fa-css-prefix}-sb-profile-tokens:before { content: @fa-var-key; }
 .@{fa-css-prefix}-sb-board:before { content: @fa-var-tasks; }
 .@{fa-css-prefix}-sb-worklist:before { content: @fa-var-tasks; }
diff --git a/src/theme/main.less b/src/theme/main.less
index 4ef341ef..012beb7c 100644
--- a/src/theme/main.less
+++ b/src/theme/main.less
@@ -20,10 +20,16 @@
  * Note that this is the only LESS file that is compiled - if you want a
  * a specific stylesheet to be included, it must be linked here.
  */
+
+
 // Library inclusions
 @import './bootstrap.less';
 @import './base/bootstrap/navbar.less';
-@import './font-awesome.less';
+@import './fontawesome.less';
+
+@fa-font-path: '../fonts';
+@import './fa-solid.less';
+@import './fa-regular.less';
 
 // HighlightJS theme
 @import (less) './default.css';
diff --git a/yarn.lock b/yarn.lock
index e909f0ae..493c680a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+"@fortawesome/fontawesome-free-webfonts@^1.0.3":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free-webfonts/-/fontawesome-free-webfonts-1.0.4.tgz#bac5d89755bf3bc2d2b4deee47d92febf641bb1f"
+
 "@uirouter/angularjs@^1.0.12":
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/@uirouter/angularjs/-/angularjs-1.0.12.tgz#b2275b7e33e0024a485f96568a18d350539880f3"
@@ -1906,10 +1910,6 @@ first-chunk-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"
 
-font-awesome@4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.5.0.tgz#1e9d7ccf7d63bdbe57000e18d5188cb2557e70f8"
-
 for-in@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"