From 6669beaf0ef6110d56468c06923a087210f351cd Mon Sep 17 00:00:00 2001
From: Oleksii Kriuchykhin <okriuchykhin@biosistemika.com>
Date: Mon, 9 Jul 2018 13:13:44 +0200
Subject: [PATCH] Change icons throughout the rest of application [SCI-2445]

---
 app/assets/javascripts/application.js.erb     | 12 +++++-----
 .../javascripts/my_modules/results.js.erb     | 16 +++++++-------
 app/assets/javascripts/projects/canvas.js.erb |  4 ++--
 app/assets/javascripts/protocols/steps.js.erb | 22 +++++++++----------
 .../repository_columns/index.js.erb           |  2 +-
 .../samples/sample_datatable.js.erb           | 18 +++++++--------
 app/assets/javascripts/sidebar.js.erb         |  2 +-
 .../javascripts/sitewide/atwho_res.js.erb     |  6 ++---
 .../javascripts/sitewide/drag_n_drop.js.erb   |  8 +++----
 .../javascripts/sitewide/string_utils.js      |  2 +-
 app/assets/stylesheets/constants.scss         |  5 -----
 app/assets/stylesheets/mixins.scss            |  9 --------
 .../stylesheets/partials/_tree_view.scss      |  6 ++---
 app/assets/stylesheets/projects.scss          |  4 ++--
 app/assets/stylesheets/reports_pdf.scss       |  4 ++--
 .../stylesheets/sample_types_groups.scss      |  4 ++--
 .../stylesheets/themes/main_navigation.scss   |  2 +-
 app/assets/stylesheets/themes/scinote.scss    | 10 ++++-----
 .../protocol_linked_children_datatable.rb     |  2 +-
 app/datatables/sample_datatable.rb            |  4 ++--
 app/datatables/teams_datatable.rb             |  2 +-
 app/helpers/application_helper.rb             |  2 +-
 app/helpers/bootstrap_form_helper.rb          |  6 ++---
 app/javascript/packs/fontawesome.scss         |  6 ++---
 .../AlertsContainer/components/Alert.jsx      | 20 ++++++++---------
 .../Navigation/components/InfoDropdown.jsx    |  2 +-
 .../components/NotificationImage.jsx          |  2 +-
 .../Navigation/components/SearchDropdown.jsx  |  2 +-
 .../SettingsPage/scenes/preferences/index.jsx |  2 +-
 app/views/canvas/_edit.html.erb               |  6 ++---
 app/views/canvas/edit/_my_module.html.erb     |  2 +-
 app/views/comments/_edit.html.erb             |  2 +-
 app/views/experiments/canvas.html.erb         |  8 +++----
 app/views/layouts/sign_in_halt.html.erb       |  2 +-
 app/views/my_module_tags/_index_edit.html.erb | 10 ++++-----
 app/views/my_modules/_due_date_label.html.erb |  6 ++---
 app/views/my_modules/_module_header.html.erb  | 12 +++++-----
 app/views/my_modules/_result.html.erb         |  8 +++----
 .../_state_button_complete.html.erb           |  2 +-
 .../_state_button_uncomplete.html.erb         |  2 +-
 app/views/my_modules/archive/_result.html.erb |  6 ++---
 .../protocols/_protocol_buttons.html.erb      | 18 +++++++--------
 .../_protocol_status_bar_buttons.html.erb     | 20 ++++++++---------
 app/views/my_modules/repository.html.erb      |  4 ++--
 app/views/my_modules/results.html.erb         |  8 +++----
 app/views/projects/_notifications.html.erb    |  4 ++--
 app/views/projects/archive.html.erb           |  2 +-
 .../experiment_archive/_experiment.html.erb   |  6 ++---
 app/views/projects/index.html.erb             |  6 ++---
 app/views/projects/show.html.erb              |  4 ++--
 app/views/projects/show/_experiment.html.erb  |  2 +-
 app/views/protocols/_header.html.erb          | 16 +++++++-------
 app/views/protocols/_steps.html.erb           |  6 ++---
 .../_import_json_protocol_p_desc.html.erb     |  2 +-
 .../_import_json_protocol_s_desc.html.erb     |  2 +-
 .../import_export/_import_modal.html.erb      |  8 +++----
 .../import_export/_preview_templates.html.erb |  2 +-
 app/views/protocols/index.html.erb            | 16 +++++++-------
 .../index/_import_results_modal.html.erb      |  2 +-
 .../_protocol_preview_modal_body.html.erb     | 10 ++++-----
 .../index/_results_modal_body.html.erb        |  2 +-
 .../elements/_element_controls.html.erb       | 10 ++++-----
 .../elements/_my_module_element.html.erb      |  4 ++--
 .../_my_module_result_asset_element.html.erb  |  4 ++--
 .../_my_module_result_text_element.html.erb   |  4 ++--
 .../_my_module_samples_element.html.erb       |  4 ++--
 .../elements/_my_module_step_element.html.erb |  4 ++--
 .../reports/elements/_new_element.html.erb    |  2 +-
 .../elements/_project_header_element.html.erb |  2 +-
 .../elements/_step_asset_element.html.erb     |  4 ++--
 app/views/reports/index.html.erb              |  4 ++--
 .../reports/new/_report_navigation.html.erb   |  6 ++---
 .../new/modal/_experiment_contents.html.erb   |  4 ++--
 .../new/modal/_module_contents.html.erb       |  2 +-
 .../new/modal/_project_contents.html.erb      |  4 ++--
 .../_delete_repository_modal.html.erb         |  2 +-
 .../_repository_row_info_modal.html.erb       |  2 +-
 app/views/repositories/index.html.erb         |  2 +-
 app/views/repositories/show.html.erb          | 12 +++++-----
 .../_delete_column_modal_body.html.erb        |  2 +-
 app/views/repository_columns/index.html.erb   |  4 ++--
 app/views/result_assets/_new.html.erb         |  2 +-
 .../sample_groups/_sample_group.html.erb      |  2 +-
 app/views/sample_my_modules/_index.html.erb   |  2 +-
 app/views/sample_types/_sample_type.html.erb  |  2 +-
 .../_delete_custom_field_modal_body.html.erb  |  2 +-
 app/views/samples/_info_sample_modal.html.erb |  4 ++--
 app/views/search/index.html.erb               | 10 ++++-----
 app/views/search/new.html.erb                 |  2 +-
 app/views/search/results/_assets.html.erb     |  4 ++--
 app/views/search/results/_checklists.html.erb |  2 +-
 app/views/search/results/_modules.html.erb    |  2 +-
 app/views/search/results/_results.html.erb    |  6 ++---
 app/views/search/results/_samples.html.erb    |  4 ++--
 app/views/search/results/_steps.html.erb      |  2 +-
 app/views/shared/_file_preview_modal.html.erb |  4 ++--
 app/views/shared/_flash_alerts.html.erb       |  6 ++---
 app/views/shared/_navigation.html.erb         |  4 ++--
 app/views/shared/_sample.html.erb             |  4 ++--
 app/views/shared/_samples.html.erb            | 16 +++++++-------
 .../shared/_secondary_navigation.html.erb     | 12 +++++-----
 app/views/shared/sidebar/_my_modules.html.erb |  2 +-
 app/views/steps/_empty_step.html.erb          |  8 +++----
 app/views/steps/_form_assets.html.erb         |  4 ++--
 app/views/steps/_form_checklists.html.erb     |  6 ++---
 app/views/steps/_form_tables.html.erb         |  2 +-
 app/views/steps/_step.html.erb                | 12 +++++-----
 .../user_my_modules/_index_edit.html.erb      |  4 ++--
 .../icons/_system_message.html.erb            |  2 +-
 app/views/user_projects/_index_edit.html.erb  |  4 ++--
 app/views/users/registrations/edit.html.erb   |  2 +-
 app/views/users/settings/_sidebar.html.erb    |  4 ++--
 .../account/preferences/index.html.erb        |  2 +-
 .../settings/teams/_user_dropdown.html.erb    | 12 +++++-----
 app/views/users/settings/teams/index.html.erb |  2 +-
 app/views/users/settings/teams/show.html.erb  |  8 +++----
 .../_destroy_user_team_modal_body.html.erb    |  2 +-
 .../_leave_user_team_modal_body.html.erb      |  2 +-
 package-lock.json                             |  9 ++++----
 package.json                                  |  2 +-
 120 files changed, 321 insertions(+), 334 deletions(-)

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index 1dd1c5f92..f83ff8de2 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/app/assets/javascripts/application.js.erb
@@ -209,21 +209,21 @@ var HelperModule = (function(){
   }
 
   helpers.flashAlertMsg = function(message, type) {
-    var alertType, glyphSign;
+    var alertType, fasSign;
 
     $('#notifications').html('');
     if (type === 'success') {
       alertType = ' alert-success ';
-      glyphSign = ' glyphicon-ok-sign ';
+      fasSign = ' fa-check-circle ';
     } else if (type === 'danger') {
       alertType = ' alert-danger ';
-      glyphSign = ' glyphicon-exclamation-sign ';
+      fasSign = ' fa-exclamation-circle ';
     } else if (type === 'info') {
       alertType = ' alert-info ';
-      glyphSign = ' glyphicon-exclamation-sign ';
+      fasSign = ' fa-exclamation-circle ';
     } else if (type === 'warning') {
       alertType = ' alert-warning ';
-      glyphSign = ' glyphicon-exclamation-sign ';
+      fasSign = ' fa-exclamation-circle ';
     }
     var htmlSnippet = '<div id="alert-flash" class="alert alert' + alertType +
                       'alert-dismissable alert-floating">' +
@@ -231,7 +231,7 @@ var HelperModule = (function(){
                         '<button type="button" class="close" ' +
                         'data-dismiss="alert" aria-label="Close">' +
                           '<span aria-hidden="true">×</span></button>' +
-                            '<span class="glyphicon' + glyphSign + '"></span>&nbsp;' +
+                            '<span class="fas' + fasSign + '"></span>&nbsp;' +
                             '<span>' + message + '</span>' +
                           '</div>' +
                         '</div>';
diff --git a/app/assets/javascripts/my_modules/results.js.erb b/app/assets/javascripts/my_modules/results.js.erb
index e44bab9a9..8fafa0e07 100644
--- a/app/assets/javascripts/my_modules/results.js.erb
+++ b/app/assets/javascripts/my_modules/results.js.erb
@@ -28,8 +28,8 @@
         $('#results-collapse-btn').click(function () {
           $('.result .panel-collapse').collapse('hide');
           $(document).find('span.collapse-result-icon').each(function()  {
-            $(this).addClass('glyphicon-collapse-down');
-            $(this).removeClass('glyphicon-collapse-up');
+            $(this).addClass('fa-caret-square-down');
+            $(this).removeClass('fa-caret-square-up');
           });
         });
 
@@ -80,8 +80,8 @@
           var collapseIcon = $(this).find('.collapse-result-icon');
           var collapsed = $(this).hasClass('collapsed');
           // Toggle collapse button
-          collapseIcon.toggleClass('glyphicon-collapse-up', !collapsed);
-          collapseIcon.toggleClass('glyphicon-collapse-down', collapsed);
+          collapseIcon.toggleClass('fa-caret-square-up', !collapsed);
+          collapseIcon.toggleClass('fa-caret-square-down', collapsed);
         });
     }
 
@@ -100,8 +100,8 @@
     function _expandAllResults() {
       $('.result .panel-collapse').collapse('show');
       $(document).find('span.collapse-result-icon').each(function()  {
-        $(this).addClass('glyphicon-collapse-up');
-        $(this).removeClass('glyphicon-collapse-down');
+        $(this).addClass('fa-caret-square-up');
+        $(this).removeClass('fa-caret-square-down');
       });
       $(document).find('div.step-result-hot-table').each(function()  {
         _renderTable(this);
@@ -111,8 +111,8 @@
     function expandResult(result) {
       $('.panel-collapse', result).collapse('show');
       $(result).find('span.collapse-result-icon').each(function()  {
-        $(this).addClass('glyphicon-collapse-up');
-        $(this).removeClass('glyphicon-collapse-down');
+        $(this).addClass('fa-caret-square-up');
+        $(this).removeClass('fa-caret-square-down');
       });
       _renderTable($(result).find('div.step-result-hot-table'));
       animateSpinner(null, false);
diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb
index 1ca361b59..e86ddcd25 100644
--- a/app/assets/javascripts/projects/canvas.js.erb
+++ b/app/assets/javascripts/projects/canvas.js.erb
@@ -1119,8 +1119,8 @@ function updateModuleHtml(module, id, name, gridDistX, gridDistY) {
 
   var toggleIcon = document.createElement("span");
   $(toggleIcon)
-  .addClass("glyphicon")
-  .addClass("glyphicon-triangle-bottom")
+  .addClass("fas")
+  .addClass("fa-caret-down")
   .attr("aria-hidden", "true")
   .appendTo(dropdownToggle);
 
diff --git a/app/assets/javascripts/protocols/steps.js.erb b/app/assets/javascripts/protocols/steps.js.erb
index c41de1592..edadf8b91 100644
--- a/app/assets/javascripts/protocols/steps.js.erb
+++ b/app/assets/javascripts/protocols/steps.js.erb
@@ -48,7 +48,7 @@
             $('.task-state-label').html(data.module_state_label);
             task_button
               .find('button')
-              .html('<span class="glyphicon glyphicon-remove"></span>&nbsp;' +
+              .html('<span class="fas fa-times"></span>&nbsp;' +
                     data.task_button_title);
             modal.modal('hide');
           },
@@ -81,7 +81,7 @@
             button = step.find("[data-action='complete-step']");
             button.attr("data-action", "uncomplete-step");
             button.find(".btn").removeClass("btn-toggle").addClass("btn-default");
-            button.find("button").html('<span class="glyphicon glyphicon-remove"></span>&nbsp;' + data.new_title);
+            button.find("button").html('<span class="fas fa-times"></span>&nbsp;' + data.new_title);
 
             if (data.task_ready_to_complete) {
               $('#completed-task-modal').modal('show');
@@ -94,7 +94,7 @@
             button = step.find("[data-action='uncomplete-step']");
             button.attr("data-action", "complete-step");
             button.find(".btn").removeClass("btn-default").addClass("btn-toggle");
-            button.find("button").html('<span class="glyphicon glyphicon-ok"></span>&nbsp;' + data.new_title);
+            button.find("button").html('<span class="fas fa-check"></span>&nbsp;' + data.new_title);
           }
         },
         error: function (data) {
@@ -196,8 +196,8 @@
         var collapseIcon = $(this).find(".collapse-step-icon");
         var collapsed = $(this).hasClass("collapsed");
         // Toggle collapse button
-        collapseIcon.toggleClass("glyphicon-collapse-up", !collapsed);
-        collapseIcon.toggleClass("glyphicon-collapse-down", collapsed);
+        collapseIcon.toggleClass("fa-caret-square-up", !collapsed);
+        collapseIcon.toggleClass("fa-caret-square-down", collapsed);
 
       });
   }
@@ -620,16 +620,16 @@
       renderTable($(this));
     });
     $(document).find("span.collapse-step-icon").each(function()  {
-      $(this).addClass("glyphicon-collapse-up");
-      $(this).removeClass("glyphicon-collapse-down");
+      $(this).addClass("fa-caret-square-up");
+      $(this).removeClass("fa-caret-square-down");
     });
   }
 
   function expandStep(step) {
     $('.panel-collapse', step).collapse('show');
     $(step).find("span.collapse-step-icon")
-      .addClass("glyphicon-collapse-up")
-      .removeClass("glyphicon-collapse-down");
+      .addClass("fa-caret-square-up")
+      .removeClass("fa-caret-square-down");
     $(step).find("div.step-result-hot-table").each(function()  {
       renderTable($(this));
     });
@@ -667,8 +667,8 @@
       $("[data-action='collapse-steps']").click(function () {
         $('.step .panel-collapse').collapse('hide');
         $(document).find("span.collapse-step-icon").each(function()  {
-          $(this).addClass("glyphicon-collapse-down");
-          $(this).removeClass("glyphicon-collapse-up");
+          $(this).addClass("fa-caret-square-down");
+          $(this).removeClass("fa-caret-square-up");
         });
       });
 
diff --git a/app/assets/javascripts/repository_columns/index.js.erb b/app/assets/javascripts/repository_columns/index.js.erb
index 7d1da2db7..c598e277d 100644
--- a/app/assets/javascripts/repository_columns/index.js.erb
+++ b/app/assets/javascripts/repository_columns/index.js.erb
@@ -121,7 +121,7 @@
     html += '<span class="fas fa-pencil-alt"></span>&nbsp;';
     html += '<%= I18n.t "libraries.repository_columns.index.edit_column" %></button>&nbsp;';
     html += '<button class="btn btn-default delete-column" data-action="destroy">';
-    html += '<span class="glyphicon glyphicon-trash"></span>&nbsp;';
+    html += '<span class="fas fa-trash-alt"></span>&nbsp;';
     html += '<%= I18n.t "libraries.repository_columns.index.delete_column" %>';
     html += '</button></span></div></li>';
     $(html).insertBefore('.repository-columns-body ul li:first')
diff --git a/app/assets/javascripts/samples/sample_datatable.js.erb b/app/assets/javascripts/samples/sample_datatable.js.erb
index 2bb7e9550..d633a7f9c 100644
--- a/app/assets/javascripts/samples/sample_datatable.js.erb
+++ b/app/assets/javascripts/samples/sample_datatable.js.erb
@@ -921,11 +921,11 @@ function createSampleGroupSelect(data, selected) {
 
   $option = $('<option></option>')
     .attr('value', -1).text(I18n.t('samples.table.no_group'))
-    .attr('data-icon', 'glyphicon glyphicon-asterisk');
+    .attr('data-icon', 'fas fa-asterisk');
   $selectGroup.append($option);
 
   $.each(data, function(i, val) {
-    var $span = $('<span></span>').addClass('glyphicon glyphicon-asterisk')
+    var $span = $('<span></span>').addClass('fas fa-asterisk')
       .css('color', val.color);
     var $option = $('<option></option>')
       .attr('value', val.id).text(val.name)
@@ -1077,7 +1077,7 @@ function changeToEditMode() {
         var editable = $(el).is('[data-editable]');
         var deletable = $(el).is('[data-deletable]');
 
-        var visClass = (visible) ? 'fas fa-eye' : 'glyphicon-eye-close';
+        var visClass = (visible) ? 'fa-eye' : 'fa-eye-slash';
         var visLi = (visible) ? '' : 'col-invisible';
         var editClass = (editable) ? '' : 'disabled';
         var delClass = (deletable) ? '' : 'disabled';
@@ -1102,11 +1102,11 @@ function changeToEditMode() {
           '<span class="text">' + generateColumnNameTooltip(thederName) + '</span> ' +
           '<span class="form-group"><input type="text" class="text-edit form-control" style="display: none;" />' +
           '<span class="pull-right controls">' +
-          '<span class="ok glyphicon glyphicon-ok" style="display: none;" title="<%= I18n.t("general.save") %>"></span>' +
-          '<span class="cancel glyphicon glyphicon-remove" style="display: none;" title="<%= I18n.t("general.cancel") %>"></span>' +
-          '<span class="vis glyphicon ' + visClass + '" title="<%= I18n.t("samples.columns_visibility") %>"></span> ' +
+          '<span class="ok fas fa-check" style="display: none;" title="<%= I18n.t("general.save") %>"></span>' +
+          '<span class="cancel fas fa-times" style="display: none;" title="<%= I18n.t("general.cancel") %>"></span>' +
+          '<span class="vis fas' + visClass + '" title="<%= I18n.t("samples.columns_visibility") %>"></span> ' +
           '<span class="edit fas fa-pencil-alt ' + editClass + '" title="<%= I18n.t("general.edit") %>"></span>' +
-          '<span class="del glyphicon glyphicon-trash ' + delClass + '" title="<%= I18n.t("samples.columns_delete") %>"></span>' +
+          '<span class="del fas fa-trash-alt ' + delClass + '" title="<%= I18n.t("samples.columns_delete") %>"></span>' +
           '</span><br></span></li>';
         dropdownList.append(html);
       }
@@ -1140,14 +1140,14 @@ function changeToEditMode() {
       var column = table.column(li.attr('data-position'));
 
       if (column.visible()) {
-        self.addClass('glyphicon-eye-close');
+        self.addClass('fa-eye-slash');
         self.removeClass('fas fa-eye');
         li.addClass('col-invisible');
         column.visible(false);
         table.setColumnSearchable(column.index(), false);
       } else {
         self.addClass('fas fa-eye');
-        self.removeClass('glyphicon-eye-close');
+        self.removeClass('fa-eye-slash');
         li.removeClass('col-invisible');
         column.visible(true);
         table.setColumnSearchable(column.index(), true);
diff --git a/app/assets/javascripts/sidebar.js.erb b/app/assets/javascripts/sidebar.js.erb
index 4ba1f43f3..7afcce2c6 100644
--- a/app/assets/javascripts/sidebar.js.erb
+++ b/app/assets/javascripts/sidebar.js.erb
@@ -124,7 +124,7 @@
     $(".tree li.parent_li ")
     .find("> span i")
     .removeClass("no-arrow")
-    .addClass("glyphicon glyphicon-triangle-right expanded");
+    .addClass("fas fa-caret-right expanded");
 
     // Add IDs to all parent <lis>
     var i = 0;
diff --git a/app/assets/javascripts/sitewide/atwho_res.js.erb b/app/assets/javascripts/sitewide/atwho_res.js.erb
index 78a4f207e..b2677a9ef 100644
--- a/app/assets/javascripts/sitewide/atwho_res.js.erb
+++ b/app/assets/javascripts/sitewide/atwho_res.js.erb
@@ -172,7 +172,7 @@ var SmartAnnotation = (function() {
        '">Tasks</button>' +
        rep_buttons +
        '<div class="dismiss">' +
-       '<span class="glyphicon glyphicon-remove"></span>' +
+       '<span class="fas fa-times"></span>' +
        '</div>' +
        '<div class="help">' +
        '<div>' +
@@ -458,7 +458,7 @@ var SmartAnnotation = (function() {
           '</div>' +
           '</div>' +
           '<div class="dismiss">' +
-          '<span class="glyphicon glyphicon-remove"></span>' +
+          '<span class="fas fa-times"></span>' +
           '</div>' +
           '</div>',
         limit: <%= Constants::ATWHO_SEARCH_LIMIT %>,
@@ -480,7 +480,7 @@ var SmartAnnotation = (function() {
   // Closes the atwho popup * needed in repositories to close the popup
   // if nothing is selected and the user leaves the form *
   function closePopup() {
-    $('.atwho-header-res').find('.glyphicon-remove').click();
+    $('.atwho-header-res').find('.fa-times').click();
   }
 
   function initialize(field) {
diff --git a/app/assets/javascripts/sitewide/drag_n_drop.js.erb b/app/assets/javascripts/sitewide/drag_n_drop.js.erb
index dcc56621c..f932745a8 100644
--- a/app/assets/javascripts/sitewide/drag_n_drop.js.erb
+++ b/app/assets/javascripts/sitewide/drag_n_drop.js.erb
@@ -270,11 +270,11 @@
     function _uploadedAssetPreview(asset, i) {
       var html = '<div class="panel panel-default panel-step-attachment-new">';
       html += '<div class="panel-heading">';
-      html += '<span class="glyphicon glyphicon-file"></span>';
+      html += '<span class="fas fa-file"></span>';
       html += '<%= I18n.t 'assets.drag_n_drop.file_label' %>';
       html += '<div class="pull-right">';
       html += '<a data-item-id="' + i + '" href="#">';
-      html += '<span class="glyphicon glyphicon-remove"></span></a></div></div>';
+      html += '<span class="fas fa-times"></span></a></div></div>';
       html += '<div class="panel-body">';
       html += '<label class="control-label">';
       html += '<%= I18n.t 'assets.drag_n_drop.file_label' %>:</label> ';
@@ -442,11 +442,11 @@
     function _uploadedAssetPreview(asset, i) {
       var html = '<div class="panel panel-default panel-result-attachment-new">';
       html += '<div class="panel-heading">';
-      html += '<span class="glyphicon glyphicon-file"></span>';
+      html += '<span class="fas fa-file"></span>';
       html += '<%= I18n.t 'assets.drag_n_drop.file_label' %>';
       html += '<div class="pull-right">';
       html += '<a data-item-id="' + i + '" href="#">';
-      html += '<span class="glyphicon glyphicon-remove"></span></a></div></div>';
+      html += '<span class="fas fa-times"></span></a></div></div>';
       html += '<div class="panel-body"><div class="form-group">';
       html += '<label class="control-label">Name</label>';
       html += '<input type="text" class="form-control" ';
diff --git a/app/assets/javascripts/sitewide/string_utils.js b/app/assets/javascripts/sitewide/string_utils.js
index e801152cb..2a612ea2b 100644
--- a/app/assets/javascripts/sitewide/string_utils.js
+++ b/app/assets/javascripts/sitewide/string_utils.js
@@ -10,7 +10,7 @@ function truncateLongString( el, chars ) {
 
   var html = "";
   if( $.type(el) !== 'string' &&
-      el.children().hasClass("glyphicon")) {
+      el.children().hasClass('fas')) {
     html = el.children()[0];
   }
 
diff --git a/app/assets/stylesheets/constants.scss b/app/assets/stylesheets/constants.scss
index f917a3463..02472d346 100644
--- a/app/assets/stylesheets/constants.scss
+++ b/app/assets/stylesheets/constants.scss
@@ -79,11 +79,6 @@ $headings-font-weight: 500;
 $headings-line-height: 1.1;
 $headings-color: inherit;
 
-// // Iconography
-// $icon-font-path: "../fonts/";
-// $icon-font-name: "glyphicons-halflings-regular";
-// $icon-font-svg-id: "glyphicons_halflingsregular";
-
 // Components
 $padding-base-vertical: 6px;
 $padding-base-horizontal: 12px;
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index a9de05aa9..d99aaecb1 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -5,15 +5,6 @@
   -o-box-shadow: $shadows;
 }
 
-@mixin glyphicon-flip-horizontal() {
-  -moz-transform: scaleX(-1);
-  -o-transform: scaleX(-1);
-  -webkit-transform: scaleX(-1);
-  transform: scaleX(-1);
-  filter: FlipH;
-  -ms-filter: "FlipH";
-}
-
 @mixin rotate($degrees) {
   -webkit-transform: rotate($degrees);
   -moz-transform: rotate($degrees);
diff --git a/app/assets/stylesheets/partials/_tree_view.scss b/app/assets/stylesheets/partials/_tree_view.scss
index 330d1729a..e90657f80 100644
--- a/app/assets/stylesheets/partials/_tree_view.scss
+++ b/app/assets/stylesheets/partials/_tree_view.scss
@@ -41,7 +41,7 @@
         padding: 0;
       }
 
-      &.glyphicon-map-marker {
+      &.fa-map-marker-alt {
         border: 0;
         display: inline-block;
         padding: 0;
@@ -65,7 +65,7 @@
       padding-left: 15px;
     }
 
-    i.glyphicon {
+    i.fas {
       cursor: pointer;
       font-size: 9pt;
 
@@ -90,7 +90,7 @@
   }
 
   #settings {
-    .glyphicon-triangle-right {
+    .fa-caret-right {
       margin-left: -15px;
     }
 
diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss
index 13a0cebd7..111d16585 100644
--- a/app/assets/stylesheets/projects.scss
+++ b/app/assets/stylesheets/projects.scss
@@ -299,7 +299,7 @@ path, ._jsPlumb_endpoint {
     height: 0px;
     display: inline-block;
 
-    & .glyphicon {
+    & .fas {
       position: inherit;
     }
 
@@ -423,7 +423,7 @@ li.module-hover {
       }
     }
 
-    .glyphicon, .fas {
+    .fas {
       color: $color-white;
       font-size: $font-size-h6;
     }
diff --git a/app/assets/stylesheets/reports_pdf.scss b/app/assets/stylesheets/reports_pdf.scss
index 6710e7783..c1645b527 100644
--- a/app/assets/stylesheets/reports_pdf.scss
+++ b/app/assets/stylesheets/reports_pdf.scss
@@ -2,8 +2,8 @@
  * Additional rules when generating PDF from the reports.
  */
 
-// Hide all glyphicons
-.glyphicon {
+// Hide all fas icons
+.fas {
   display: none;
 }
 
diff --git a/app/assets/stylesheets/sample_types_groups.scss b/app/assets/stylesheets/sample_types_groups.scss
index 6abf8e741..f3fde6302 100644
--- a/app/assets/stylesheets/sample_types_groups.scss
+++ b/app/assets/stylesheets/sample_types_groups.scss
@@ -44,11 +44,11 @@
     display: none;
   }
 
-  .glyphicon-ok {
+  .fa-check {
     color: $brand-default;
   }
 
-  .glyphicon {
+  .fas {
     cursor: pointer;
     font-size: 15px;
   }
diff --git a/app/assets/stylesheets/themes/main_navigation.scss b/app/assets/stylesheets/themes/main_navigation.scss
index 076637bbb..487e8a44c 100644
--- a/app/assets/stylesheets/themes/main_navigation.scss
+++ b/app/assets/stylesheets/themes/main_navigation.scss
@@ -251,7 +251,7 @@
     margin-left: 17px;
   }
 
-  .glyphicon-ok-sign {
+  .fa-check-circle {
     color: $brand-primary;
     margin-left: -2px;
     margin-right: 2px;
diff --git a/app/assets/stylesheets/themes/scinote.scss b/app/assets/stylesheets/themes/scinote.scss
index 83799eddc..1e440c934 100644
--- a/app/assets/stylesheets/themes/scinote.scss
+++ b/app/assets/stylesheets/themes/scinote.scss
@@ -406,7 +406,7 @@ a[data-toggle="tooltip"] {
 #help-link {
   padding: 13px;
 
-  .glyphicon.glyphicon-info-sign {
+  .fas.fa-info-circle {
     font-size: $font-size-large;
     margin-top: 4px;
   }
@@ -456,7 +456,7 @@ a[data-toggle="tooltip"] {
         padding-left: 10px;
       }
 
-      &:not(.disabled) span.glyphicon {
+      &:not(.disabled) span.fas {
         color: transparent !important;
       }
     }
@@ -1715,7 +1715,7 @@ th.custom-field .modal-tooltiptext {
 
 .atwho-li-res {
 
-  .glyphicon-tint {
+  .fa-tint {
     margin-left: 5px;
     margin-right: 5px;
   }
@@ -1817,7 +1817,7 @@ a.disabled-with-click-events {
     margin-right: 400px;
   }
 
-  .glyphicon {
+  .fas {
     margin-left: 100px;
   }
 
@@ -1827,7 +1827,7 @@ a.disabled-with-click-events {
       display: none;
     }
 
-    .glyphicon {
+    .fas {
       margin-left: 10px;
     }
   }
diff --git a/app/datatables/protocol_linked_children_datatable.rb b/app/datatables/protocol_linked_children_datatable.rb
index c4c2bd977..5db42dee5 100644
--- a/app/datatables/protocol_linked_children_datatable.rb
+++ b/app/datatables/protocol_linked_children_datatable.rb
@@ -67,7 +67,7 @@ class ProtocolLinkedChildrenDatatable < CustomDatatable
       locals: { experiment: record.my_module.experiment }
     )
     res += '</li>'
-    res += "<li><span class='glyphicon glyphicon-credit-card'></span>&nbsp;"
+    res += "<li><span class='fas fa-credit-card'></span>&nbsp;"
     res += @controller.render_to_string(
       partial: 'search/results/partials/my_module_text.html.erb',
       locals: { my_module: record.my_module, link_to_page: :protocols }
diff --git a/app/datatables/sample_datatable.rb b/app/datatables/sample_datatable.rb
index 727ecd910..42fadfd39 100644
--- a/app/datatables/sample_datatable.rb
+++ b/app/datatables/sample_datatable.rb
@@ -149,10 +149,10 @@ class SampleDatatable < CustomDatatable
 
   def sample_group_cell(record)
     if record.sample_group.nil?
-      "<span class='glyphicon glyphicon-asterisk'></span> " \
+      "<span class='fas fa-asterisk'></span> " \
         "#{I18n.t('samples.table.no_group')}"
     else
-      "<span class='glyphicon glyphicon-asterisk' " \
+      "<span class='fas fa-asterisk' " \
         "style='color: #{escape_input(record.sample_group.color)}'></span> " \
         "#{escape_input(record.sample_group.name)}"
     end
diff --git a/app/datatables/teams_datatable.rb b/app/datatables/teams_datatable.rb
index 76f8db8dd..6dbfac5de 100644
--- a/app/datatables/teams_datatable.rb
+++ b/app/datatables/teams_datatable.rb
@@ -71,7 +71,7 @@ class TeamsDatatable < CustomDatatable
   # If user is last admin of team, don't allow
   # him/her to leave team
   def leave_team_button(user_team)
-    button = "<span class=\"glyphicon glyphicon-log-out\"></span>
+    button = "<span class=\"fas fa-sign-out-alt\"></span>
               <span class=\"hidden-xs\">
                 #{I18n.t('users.settings.teams.index.leave')}
               </span>"
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 7af454f11..c54d255a9 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -148,7 +148,7 @@ module ApplicationHelper
        alt='thumb'></div><div class='col-xs-8'>
       <div class='row'><div class='col-xs-9 text-left'><h5>
       #{user.full_name}</h5></div><div class='col-xs-3 text-right'>
-      <span class='glyphicon glyphicon-remove' aria-hidden='true'></span>
+      <span class='fas fa-times' aria-hidden='true'></span>
       </div></div><div class='row'><div class='col-xs-12'>
       <p class='silver'>#{user.email}</p>)
     if user_still_in_team
diff --git a/app/helpers/bootstrap_form_helper.rb b/app/helpers/bootstrap_form_helper.rb
index 1db04fe84..b711edb93 100644
--- a/app/helpers/bootstrap_form_helper.rb
+++ b/app/helpers/bootstrap_form_helper.rb
@@ -48,7 +48,7 @@ module BootstrapFormHelper
       end
       res << "<input type='datetime' class='form-control' name='#{input_name}' id='#{id}' readonly data-ts='#{timestamp}' />"
       if options[:clear] then
-        res << "<span class='input-group-addon' id='#{id}_clear'><span class='glyphicon glyphicon-remove'></span></span></div>"
+        res << "<span class='input-group-addon' id='#{id}_clear'><span class='fas fa-times'></span></span></div>"
       end
       res << "</div></div></div></div><script type='text/javascript'>$(function () { var dt = $('##{id}'); dt.datetimepicker({ #{jsOpts}ignoreReadonly: true, locale: '#{js_locale}', format: '#{js_format}' }); if (dt.length > 0 && dt.data['ts'] != '') { $('##{id}').data('DateTimePicker').date(moment($('##{id}').data('ts'))); }"
       if options[:clear] then
@@ -181,8 +181,8 @@ module BootstrapFormHelper
       id = "#{@object_name}_#{name.to_s}"
       input_name = "#{@object_name}[#{name.to_s}]"
 
-      icon_str = '<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>'
-      icon_str_hidden = '<span class="glyphicon glyphicon-ok" aria-hidden="true" style="display: none;"></span>'
+      icon_str = '<span class="fas fa-check" aria-hidden="true"></span>'
+      icon_str_hidden = '<span class="fas fa-check" aria-hidden="true" style="display: none;"></span>'
 
       label = name.to_s.humanize
       if options[:label] then
diff --git a/app/javascript/packs/fontawesome.scss b/app/javascript/packs/fontawesome.scss
index bd5b619da..486bb6762 100644
--- a/app/javascript/packs/fontawesome.scss
+++ b/app/javascript/packs/fontawesome.scss
@@ -1,4 +1,4 @@
- $fa-font-path: "~@fortawesome/fontawesome-free-webfonts/webfonts/";
+ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
 
-@import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free-webfonts/scss/fa-solid";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/scss/fa-solid";
diff --git a/app/javascript/src/components/AlertsContainer/components/Alert.jsx b/app/javascript/src/components/AlertsContainer/components/Alert.jsx
index e664093a0..9cad37f59 100644
--- a/app/javascript/src/components/AlertsContainer/components/Alert.jsx
+++ b/app/javascript/src/components/AlertsContainer/components/Alert.jsx
@@ -18,12 +18,12 @@ class Alert extends Component {
     return classes[type] || classes.success;
   }
 
-  static glyphiconClass(type) {
+  static fasClass(type) {
     const classes = {
-      error: "glyphicon-exclamation-sign",
-      alert: "glyphicon-exclamation-sign",
-      notice: "glyphicon-info-sign",
-      success: "glyphicon-ok-sign"
+      error: "fa-exclamation-circle",
+      alert: "fa-exclamation-circle",
+      notice: "fa-info-circle",
+      success: "fa-check-circle"
     };
     return classes[type] || classes.success;
   }
@@ -45,9 +45,9 @@ class Alert extends Component {
        ${Alert.alertClass(this.props.type)}
        alert-dismissable
        alert-floating`;
-    const glyphiconClassName =
-      `glyphicon
-       ${Alert.glyphiconClass(this.props.type)}`;
+    const fasClassName =
+      `fas
+       ${Alert.fasClass(this.props.type)}`;
 
     return (
       <Wrapper className={alertClassName}>
@@ -61,7 +61,7 @@ class Alert extends Component {
                       onClick={this.props.onClose}>
                 <span aria-hidden="true">×</span>
               </button>
-              <span className={glyphiconClassName} />
+              <span className={fasClassName} />
               <span>&nbsp;{this.props.message}</span>
             </Col>
           </Row>
@@ -78,4 +78,4 @@ Alert.propTypes = {
   onClose: func.isRequired
 };
 
-export default Alert;
\ No newline at end of file
+export default Alert;
diff --git a/app/javascript/src/components/Navigation/components/InfoDropdown.jsx b/app/javascript/src/components/Navigation/components/InfoDropdown.jsx
index 86fbf0247..8a42d59a7 100644
--- a/app/javascript/src/components/Navigation/components/InfoDropdown.jsx
+++ b/app/javascript/src/components/Navigation/components/InfoDropdown.jsx
@@ -48,7 +48,7 @@ class InfoDropdown extends Component<*, State> {
         noCaret
         title={
           <span>
-            <span className="glyphicon glyphicon-info-sign" />&nbsp;
+            <span className="fas fa-info-circle" />&nbsp;
             <span className="visible-xs-inline visible-sm-inline">
               <FormattedMessage id="navbar.info_label" />
             </span>
diff --git a/app/javascript/src/components/Navigation/components/NotificationImage.jsx b/app/javascript/src/components/Navigation/components/NotificationImage.jsx
index 44fbfb37e..de938739c 100644
--- a/app/javascript/src/components/Navigation/components/NotificationImage.jsx
+++ b/app/javascript/src/components/Navigation/components/NotificationImage.jsx
@@ -20,7 +20,7 @@ const NotificationImage = ({className, type, avatar}: Props) => {
       ),
       system_message: (
           <span className="system-message">
-              <i className="glyphicon glyphicon-tower" />
+              <i className="fas fa-chess-rook" />
           </span>
       ),
       deliver: (
diff --git a/app/javascript/src/components/Navigation/components/SearchDropdown.jsx b/app/javascript/src/components/Navigation/components/SearchDropdown.jsx
index 675262a1b..921b7776d 100644
--- a/app/javascript/src/components/Navigation/components/SearchDropdown.jsx
+++ b/app/javascript/src/components/Navigation/components/SearchDropdown.jsx
@@ -63,7 +63,7 @@ class SearchDropdown extends Component {
         noCaret
         title={
           <span>
-            <span className="glyphicon glyphicon-search" />&nbsp;
+            <span className="fas fa-search" />&nbsp;
             <span className="visible-xs-inline visible-sm-inline">
               <FormattedMessage id="navbar.search_label" />
             </span>
diff --git a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
index ded5a7ec4..6630a9225 100644
--- a/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
+++ b/app/javascript/src/scenes/SettingsPage/scenes/preferences/index.jsx
@@ -94,7 +94,7 @@ class SettingsPreferences extends Component<Props, State> {
               title="settings_page.system_message"
               subtitle="settings_page.system_message_msg"
               emailNotification={this.state.system_message_email_notification}
-              iconClasses="glyphicon glyphicon-tower"
+              iconClasses="fas fa-chess-rook"
               iconBackground={ICON_GREEN_COLOR}
               reloadInfo={this.getPreferencesInfo}
             />
diff --git a/app/views/canvas/_edit.html.erb b/app/views/canvas/_edit.html.erb
index 1a4e58621..8060eed1d 100644
--- a/app/views/canvas/_edit.html.erb
+++ b/app/views/canvas/_edit.html.erb
@@ -12,11 +12,11 @@
     <% if can_manage_experiment?(@experiment) %>
       <%=link_to "", type: "button", class: "btn btn-primary", id: "canvas-new-module" do %>
         <span class="hbtn-default">
-          <span class="glyphicon glyphicon-credit-card"></span>
+          <span class="fas fa-credit-card"></span>
           <%= t("experiments.canvas.edit.new_module") %>
         </span>
         <span class="hbtn-hover">
-          <span class="glyphicon glyphicon-credit-card"></span>
+          <span class="fas fa-credit-card"></span>
           <em class="hidden-xs"><%= t("experiments.canvas.edit.new_module_hover") %></em>
           <span class="visible-xs-inline"><%= t("experiments.canvas.edit.new_module") %></span>
         </span>
@@ -25,7 +25,7 @@
     <div class="btn-group pull-right" role="group">
       <%= link_to canvas_experiment_path(@experiment), type: "button", class: "btn btn-default cancel-edit-canvas" do %>
         <span class="hidden-xs"><%= t("experiments.canvas.edit.cancel") %></span>
-        <span class="glyphicon glyphicon-remove visible-xs" style="height: 16px;margin-top: 4px;">&nbsp;</span>
+        <span class="fas fa-times visible-xs" style="height: 16px;margin-top: 4px;">&nbsp;</span>
       <% end %>
       <%= f.submit class: "btn btn-success", id: "canvas-save" do %>
         <span class="visibile-xs"><%= t("experiments.canvas.edit.save_short") %></span>
diff --git a/app/views/canvas/edit/_my_module.html.erb b/app/views/canvas/edit/_my_module.html.erb
index 03bb53778..c4a17c6b2 100644
--- a/app/views/canvas/edit/_my_module.html.erb
+++ b/app/views/canvas/edit/_my_module.html.erb
@@ -15,7 +15,7 @@
 
     <div class="dropdown pull-right module-options">
       <a class="dropdown-toggle" id="<%= my_module.id %>_options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
+        <span class="fas fa-caret-down" aria-hidden="true"></span>
       </a>
       <ul class="dropdown-menu custom-dropdown-menu no-scale" aria-labelledby="<%= my_module.id %>_options">
         <li class="dropdown-header"><%= t('projects.index.options_header') %></li>
diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
index cbf174bdc..3ff6603cf 100644
--- a/app/views/comments/_edit.html.erb
+++ b/app/views/comments/_edit.html.erb
@@ -9,7 +9,7 @@
                             value: @comment.message %>
       <span class="input-group-btn">
         <a class="btn btn-default" data-action="save">
-          <span class="glyphicon glyphicon-ok"></span>
+          <span class="fas fa-check"></span>
         </a>
       </span>
     </div>
diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb
index 22e2e79bd..8d2a3bdad 100644
--- a/app/views/experiments/canvas.html.erb
+++ b/app/views/experiments/canvas.html.erb
@@ -20,7 +20,7 @@
           <span class="dropdown">
             <button class="btn btn-default dropdown-toggle" type="button" id="exActionsMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
               <span class="hidden-xs"><%= t'experiments.canvas.actions' %></span>
-              <span class="visible-xs-inline"><i class="glyphicon glyphicon-sort"></i></span>
+              <span class="visible-xs-inline"><i class="fas fa-sort"></i></span>
               <span class="caret"></span>
             </button>
             <%= render partial: 'experiments/dropdown_actions.html.erb',
@@ -31,13 +31,13 @@
           <span class="hidden-xs"><%=t 'experiments.canvas.zoom' %></span>
           <div id="zoom-level-buttons" class="btn-group" data-toggle="buttons">
             <%=link_to canvas_full_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default active", "data-action" => "full_zoom", "data-toggle" => "button", "aria-pressed" => true do %>
-              <span class="glyphicon glyphicon-th-large" aria-hidden="true" ></span>
+              <span class="fas fa-th-large" aria-hidden="true" ></span>
             <% end %>
             <%=link_to canvas_medium_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default", "data-action" => "medium_zoom" do %>
-              <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
+              <span class="fas fa-th-list" aria-hidden="true"></span>
             <% end %>
             <%=link_to canvas_small_zoom_experiment_path(@experiment), remote: true, type: "button", class: "ajax btn btn-default", "data-action" => "small_zoom" do %>
-              <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
+              <span class="fas fa-th" aria-hidden="true"></span>
             <% end %>
           </div>
         </div>
diff --git a/app/views/layouts/sign_in_halt.html.erb b/app/views/layouts/sign_in_halt.html.erb
index 141958d8d..56c929c8b 100644
--- a/app/views/layouts/sign_in_halt.html.erb
+++ b/app/views/layouts/sign_in_halt.html.erb
@@ -38,7 +38,7 @@
       <div class="alert alert-danger alert-dismissable alert-floating">
         <div class="container">
           <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
-          <span class="glyphicon glyphicon-exclamation-sign"></span>
+          <span class="fas fa-exclamation-circle"></span>
           <span><%= sanitize_input(flash[:error]) %></span>
         </div>
       </div>
diff --git a/app/views/my_module_tags/_index_edit.html.erb b/app/views/my_module_tags/_index_edit.html.erb
index dd3a81983..debd8648d 100644
--- a/app/views/my_module_tags/_index_edit.html.erb
+++ b/app/views/my_module_tags/_index_edit.html.erb
@@ -15,12 +15,12 @@
                 <span class="fas fa-pencil-alt"></span>
               <% end %>
               <%= link_to my_module_my_module_tag_path(@my_module, mmt, format: :json), method: :delete, remote: true, class: 'btn btn-link remove-tag-link', title: t("experiments.canvas.modal_manage_tags.remove_tag", module: @my_module.name) do %>
-                <span class="glyphicon glyphicon-remove"></span>
+                <span class="fas fa-times"></span>
               <% end %>
               <%= bootstrap_form_for tag, remote: true, url: project_tag_path(@my_module.experiment.project, tag, format: :json), method: :delete, html: { class: "delete-tag-form"} do |f| %>
                 <%= hidden_field_tag :my_module_id, @my_module.id %>
                 <%= f.button class: 'btn btn-link delete-tag-link', title: t("experiments.canvas.modal_manage_tags.delete_tag") do %>
-                  <span class="glyphicon glyphicon-trash"></span>
+                  <span class="fas fa-trash-alt"></span>
                 <% end %>
               <% end %>
             </div>
@@ -35,10 +35,10 @@
             <div class="pull-right">
               <%= f.color_picker_select :color, Constants::TAG_COLORS, class: "edit-tag-color" %>
               <%= f.button class: "btn btn-link save-tag-link", title: t("experiments.canvas.modal_manage_tags.save_tag") do %>
-                <span class="glyphicon glyphicon-ok"></span>
+                <span class="fas fa-check"></span>
               <% end %>
               <%= link_to "", remote: true, class: 'btn btn-link cancel-tag-link', title: t("experiments.canvas.modal_manage_tags.cancel_tag") do %>
-                <span class="glyphicon glyphicon-remove"></span>
+                <span class="fas fa-times"></span>
               <% end %>
             </div>
           <% end %>
@@ -74,7 +74,7 @@
         <%= f.hidden_field :name, :value => t("tags.create.new_name") %>
         <%= f.hidden_field :color, :value => Constants::TAG_COLORS[0] %>
         <%= f.button class: "btn btn-primary" do %>
-          <span class="glyphicon glyphicon-plus"></span>
+          <span class="fas fa-plus"></span>
           <span class="hidden-xs"><%=t "experiments.canvas.modal_manage_tags.create_new" %></span>
         <% end %>
       <% end %>
diff --git a/app/views/my_modules/_due_date_label.html.erb b/app/views/my_modules/_due_date_label.html.erb
index 5d0b6310b..4e0c9d8f7 100644
--- a/app/views/my_modules/_due_date_label.html.erb
+++ b/app/views/my_modules/_due_date_label.html.erb
@@ -2,19 +2,19 @@
   <%= t("my_modules.states.completed") %>
   <span class="due-date-label">
     <%= l(my_module.completed_on, format: :full_date) %>
-    <span class="glyphicon glyphicon-ok"></span>
+    <span class="fas fa-check"></span>
   </span>
 <% elsif my_module.is_one_day_prior? %>
   <%= t("my_modules.states.due_soon") %>
   <span class="due-date-label">
     <%=l my_module.due_date, format: :full_date %>
-    <span class="glyphicon glyphicon-alert"></span>
+    <span class="fas fa-exclamation-triangle"></span>
   </span>
 <% elsif my_module.is_overdue? %>
   <%= t("my_modules.states.overdue") %>
   <span class="due-date-label">
     <%=l my_module.due_date, format: :full_date %>
-    <span class="glyphicon glyphicon-alert"></span>
+    <span class="fas fa-exclamation-triangle"></span>
   </span>
 <% elsif my_module.due_date %>
   <%= t("experiments.canvas.full_zoom.due_date") %>
diff --git a/app/views/my_modules/_module_header.html.erb b/app/views/my_modules/_module_header.html.erb
index 4d1b7d2bd..40e2e543a 100644
--- a/app/views/my_modules/_module_header.html.erb
+++ b/app/views/my_modules/_module_header.html.erb
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-xs-6 col-sm-6 col-md-4">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-calendar"></span>
+      <span class="fas fa-calendar-alt"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "my_modules.module_header.start_date" %></span>
@@ -13,10 +13,10 @@
     <div class="badge-icon">
       <% if can_manage_module?(@my_module) %>
         <%= link_to due_date_my_module_path(@my_module, format: :json), remote: true, class: "due-date-link", style: "color: inherit" do %>
-          <span class="glyphicon glyphicon-calendar"></span>
+          <span class="fas fa-calendar-alt"></span>
         <% end %>
       <% else %>
-        <span class="glyphicon glyphicon-calendar"></span>
+        <span class="fas fa-calendar-alt"></span>
       <% end %>
     </div>
     <div class="well well-sm">
@@ -39,7 +39,7 @@
 
   <div class="col-xs-6 col-sm-6 col-md-4">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-ok"></span>
+      <span class="fas fa-check"></span>
     </div>
     <div class="well well-sm">
       <span class="task-state-label">
@@ -77,10 +77,10 @@
   <div class="badge-icon">
      <% if can_manage_module?(@my_module) %>
       <%= link_to description_my_module_path(@my_module, format: :json), remote: true, class: "description-link", style: "color: inherit" do %>
-        <span class="glyphicon glyphicon-info-sign"></span>
+        <span class="fas fa-info-circle"></span>
       <% end %>
     <% else %>
-      <span class="glyphicon glyphicon-info-sign"></span>
+      <span class="fas fa-info-circle"></span>
     <% end %>
   </div>
   <div class="well well-sm">
diff --git a/app/views/my_modules/_result.html.erb b/app/views/my_modules/_result.html.erb
index 5444fc84d..e00d55490 100644
--- a/app/views/my_modules/_result.html.erb
+++ b/app/views/my_modules/_result.html.erb
@@ -2,11 +2,11 @@
   <div class="badge-num">
     <span class="badge icon">
     <% if result.is_text %>
-    <span class="glyphicon glyphicon-font"></span>
+    <span class="fas fa-font"></span>
     <% elsif result.is_table %>
     <span class="fas fa-table"></span>
     <% elsif result.is_asset %>
-    <span class="glyphicon glyphicon-picture"></span>
+    <span class="fas fa-image"></span>
     <% end %>
     </span>
   </div>
@@ -25,7 +25,7 @@
              data-confirm-text="<%= t('my_modules.results.archive_confirm') %>"
              title="<%= t'my_modules.results.options.archive_title' %>"
              onclick="Results.archive(event, this);">
-            <span class="glyphicon glyphicon-briefcase"></span>
+            <span class="fas fa-briefcase"></span>
           </a>
           <%= form_for :result, url: result_path_of_type(result), method: :patch, html: {id: 'result-archive-form-' + result.id.to_s } do |f| %>
             <%= f.hidden_field :archived, value: true %>
@@ -33,7 +33,7 @@
         <% end %>
       </div>
       <a class="result-panel-collapse-link" href="#result-panel-<%= result.id %>" data-toggle="collapse" data-remote="true">
-        <span class="glyphicon glyphicon-collapse-down collapse-result-icon"></span>
+        <span class="fas fa-caret-square-down collapse-result-icon"></span>
         <strong><%= result.name %></strong> |
         <span><%= t('my_modules.results.published_on', timestamp: l(result.created_at, format: :full), user: h(result.user.full_name)).html_safe %></span>
       </a>
diff --git a/app/views/my_modules/_state_button_complete.html.erb b/app/views/my_modules/_state_button_complete.html.erb
index ccbbdfa49..32962f638 100644
--- a/app/views/my_modules/_state_button_complete.html.erb
+++ b/app/views/my_modules/_state_button_complete.html.erb
@@ -1,4 +1,4 @@
 <button class="btn btn-toggle">
-  <span class="glyphicon glyphicon-ok"></span>
+  <span class="fas fa-check"></span>
   <%= t("my_modules.buttons.complete") %>
 </button>
diff --git a/app/views/my_modules/_state_button_uncomplete.html.erb b/app/views/my_modules/_state_button_uncomplete.html.erb
index 7c06d4f8e..7a28b4b76 100644
--- a/app/views/my_modules/_state_button_uncomplete.html.erb
+++ b/app/views/my_modules/_state_button_uncomplete.html.erb
@@ -1,4 +1,4 @@
 <button class="btn btn-default">
-  <span class="glyphicon glyphicon-remove"></span>
+  <span class="fas fa-times"></span>
   <%= t("my_modules.buttons.uncomplete") %>
 </button>
\ No newline at end of file
diff --git a/app/views/my_modules/archive/_result.html.erb b/app/views/my_modules/archive/_result.html.erb
index 0693efad5..6884be2ba 100644
--- a/app/views/my_modules/archive/_result.html.erb
+++ b/app/views/my_modules/archive/_result.html.erb
@@ -37,12 +37,12 @@
     <h3 class="panel-title">
       <% if result.is_asset %>
         <% if result.asset.is_image? %>
-          <span class="glyphicon glyphicon-picture"></span>
+          <span class="fas fa-image"></span>
         <% else %>
-          <span class="glyphicon glyphicon-file"></span>
+          <span class="fas fa-file"></span>
         <% end %>
       <% elsif result.is_text %>
-        <span class="glyphicon glyphicon-asterisk"></span>
+        <span class="fas fa-asterisk"></span>
       <% elsif result.is_table %>
         <span class="fas fa-table"></span>
       <% end %>
diff --git a/app/views/my_modules/protocols/_protocol_buttons.html.erb b/app/views/my_modules/protocols/_protocol_buttons.html.erb
index 09f128cdd..e8b783e29 100644
--- a/app/views/my_modules/protocols/_protocol_buttons.html.erb
+++ b/app/views/my_modules/protocols/_protocol_buttons.html.erb
@@ -1,43 +1,43 @@
 <div class="btn-group" role="group" aria-label="" style="margin-left: 15px;">
   <div class="btn-group">
     <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">
-      <span class="glyphicon glyphicon-import"></span>
+      <span class="fas fa-download"></span>
       <span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.load_protocol") %></span>
     </a>
     <ul class="dropdown-menu">
       <% if can_manage_protocol_in_module?(@protocol) %>
         <li>
           <%= link_to load_from_repository_modal_protocol_path(@protocol, format: :json), remote: true, data: { action: "load-from-repository" } do %>
-            <span class="glyphicon glyphicon-book"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_repository") %>
+            <span class="fas fa-book"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_repository") %>
           <% end %>
         </li>
       <% else %>
-        <li class="disabled"><a href="#"><span class="glyphicon glyphicon-book"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_repository") %></a></li>
+        <li class="disabled"><a href="#"><span class="fas fa-book"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_repository") %></a></li>
       <% end %>
       <% if can_manage_protocol_in_module?(@protocol) %>
         <li>
           <a class="btn-open-file" href="#" data-action="load-from-file" data-import-url="<%= load_from_file_protocol_path(@protocol, format: :json) %>">
-            <span class="glyphicon glyphicon-file"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_file") %>
+            <span class="fas fa-file"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_file") %>
             <input type="file" value="" accept=".eln" data-turbolinks="false">
           </a>
         </li>
       <% else %>
-        <li class="disabled"><a href="#"><span class="glyphicon glyphicon-file"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_file") %></a></li>
+        <li class="disabled"><a href="#"><span class="fas fa-file"></span>&nbsp;<%= t("my_modules.protocols.buttons.load_protocol_from_file") %></a></li>
       <% end %>
     </ul>
   </div>
   <% if can_read_experiment?(@my_module.experiment) %>
-    <%= link_to raw("<span class=\"glyphicon glyphicon-export\"></span><span class=\"hidden-xs-custom\">&nbsp;" + t('my_modules.protocols.buttons.export') + "</span>"), export_protocols_path(protocol_ids: @protocol.id), class: "btn btn-default", data: {no_turbolink: true} %>
+    <%= link_to raw("<span class=\"fas fa-upload\"></span><span class=\"hidden-xs-custom\">&nbsp;" + t('my_modules.protocols.buttons.export') + "</span>"), export_protocols_path(protocol_ids: @protocol.id), class: "btn btn-default", data: {no_turbolink: true} %>
   <% else %>
-    <a href="#" class="btn btn-default disabled"><span class="glyphicon glyphicon-export"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.export") %></span></a>
+    <a href="#" class="btn btn-default disabled"><span class="fas fa-upload"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.export") %></span></a>
   <% end %>
   <% if can_read_protocol_in_module?(@protocol) && can_create_protocols_in_repository?(@protocol.team) %>
     <span data-hook="protocol-copy-to-repository">
       <%= link_to copy_to_repository_modal_protocol_path(@protocol, format: :json), id: "protocol-copy-to-repository", class: "btn btn-default", remote: true, data: { action: "copy-to-repository" } do %>
-        <span class="glyphicon glyphicon-saved"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span>
+        <span class="fas fa-copy"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span>
       <% end %>
     </span>
   <% else %>
-    <a href="#" class="btn btn-default disabled"><span class="glyphicon glyphicon-saved"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span></a>
+    <a href="#" class="btn btn-default disabled"><span class="fas fa-copy"></span><span class="hidden-xs-custom">&nbsp;<%= t("my_modules.protocols.buttons.copy_to_repository") %></span></a>
   <% end %>
 </div>
diff --git a/app/views/my_modules/protocols/_protocol_status_bar_buttons.html.erb b/app/views/my_modules/protocols/_protocol_status_bar_buttons.html.erb
index 6adf6e836..3d9b9365c 100644
--- a/app/views/my_modules/protocols/_protocol_status_bar_buttons.html.erb
+++ b/app/views/my_modules/protocols/_protocol_status_bar_buttons.html.erb
@@ -1,9 +1,9 @@
 <div class="btn-group">
   <% if @protocol.unlinked? %>
     <a type="button" class="btn btn-info" tabindex="0" role="button" data-trigger="focus" data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" title="<%= t("my_modules.protocols.protocol_status_bar.btns_unlinked.title") %>" data-content="<%= t("my_modules.protocols.protocol_status_bar.btns_unlinked.text") %>">
-      <span class="glyphicon glyphicon-book"></span>
+      <span class="fas fa-book"></span>
       &nbsp;
-      <span class="glyphicon glyphicon-remove-sign"></span>
+      <span class="fas fa-times-sign"></span>
     </a>
     <a type="button" class="btn btn-info dropdown-toggle" disabled="disabled">
       <span class="caret"></span>
@@ -11,9 +11,9 @@
   <% else %>
     <% if @protocol.linked_no_diff? %>
       <a type="button" class="btn btn-info" tabindex="0" role="button" data-trigger="focus" data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" title="<%= t("my_modules.protocols.protocol_status_bar.btns_linked_no_diff.title") %>" data-content="<%= t("my_modules.protocols.protocol_status_bar.btns_linked_no_diff.text") %>">
-        <span class="glyphicon glyphicon-book"></span>
+        <span class="fas fa-book"></span>
         &nbsp;
-        <span class="glyphicon glyphicon-ok-sign"></span>
+        <span class="fas fa-check-circle"></span>
       </a>
       <a type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="caret"></span>
@@ -32,9 +32,9 @@
       </ul>
     <% elsif @protocol.newer_than_parent? %>
       <a type="button" class="btn btn-warning" tabindex="0" role="button" data-trigger="focus" data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" title="<%= t("my_modules.protocols.protocol_status_bar.btns_newer_than_parent.title") %>" data-content="<%= t("my_modules.protocols.protocol_status_bar.btns_newer_than_parent.text", self_ts: l(@protocol.updated_at, format: :full), parent_ts: l(@protocol.parent.updated_at, format: :full)).html_safe %>">
-        <span class="glyphicon glyphicon-book"></span>
+        <span class="fas fa-book"></span>
         &nbsp;
-        <span class="glyphicon glyphicon-circle-arrow-down"></span>
+        <span class="fas fa-arrow-circle-up"></span>
       </a>
       <a type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="caret"></span>
@@ -73,9 +73,9 @@
       </ul>
     <% elsif @protocol.parent_newer? %>
       <a type="button" class="btn btn-warning" tabindex="0" role="button" data-trigger="focus" data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" title="<%= t("my_modules.protocols.protocol_status_bar.btns_parent_newer.title") %>" data-content="<%= t("my_modules.protocols.protocol_status_bar.btns_parent_newer.text", self_ts: l(@protocol.updated_at, format: :full), parent_ts: l(@protocol.parent.updated_at, format: :full)).html_safe %>">
-        <span class="glyphicon glyphicon-book"></span>
+        <span class="fas fa-book"></span>
         &nbsp;
-        <span class="glyphicon glyphicon-circle-arrow-up"></span>
+        <span class="fas fa-arrow-circle-up"></span>
       </a>
       <a type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="caret"></span>
@@ -104,9 +104,9 @@
       </ul>
     <% elsif @protocol.parent_and_self_newer? %>
       <a type="button" class="btn btn-warning" tabindex="0" role="button" data-trigger="focus" data-container="body" data-html="true" data-toggle="popover" data-placement="bottom" title="<%= t("my_modules.protocols.protocol_status_bar.btns_parent_and_self_newer.title") %>" data-content="<%= t("my_modules.protocols.protocol_status_bar.btns_parent_and_self_newer.text", self_ts: l(@protocol.updated_at, format: :full), parent_ts: l(@protocol.parent.updated_at, format: :full)).html_safe %>">
-        <span class="glyphicon glyphicon-book"></span>
+        <span class="fas fa-book"></span>
         &nbsp;
-        <span class="glyphicon glyphicon-exclamation-sign"></span>
+        <span class="fas fa-exclamation-circle"></span>
       </a>
       <a type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="caret"></span>
diff --git a/app/views/my_modules/repository.html.erb b/app/views/my_modules/repository.html.erb
index 9aa561ed3..d6f224e95 100644
--- a/app/views/my_modules/repository.html.erb
+++ b/app/views/my_modules/repository.html.erb
@@ -22,13 +22,13 @@
       <button type="button" class="btn btn-default"
         data-assign-url-modal="<%= assign_repository_records_modal_my_module_path(@my_module, @repository) %>"
         id="assignRepositoryRecords" onclick="openAssignRecordsModal()" disabled>
-        <span class="glyphicon glyphicon-ok-circle"></span>
+        <span class="fas fa-check-circle"></span>
         <span class="hidden-xs-custom"><%= t'repositories.assign_records_to_module' %></span>
       </button>
       <button type="button" class="btn btn-default"
         data-unassign-url="<%= unassign_repository_records_modal_my_module_path(@my_module, @repository)%>"
         id="unassignRepositoryRecords" onclick="openUnassignRecordsModal()" disabled>
-        <span class="glyphicon glyphicon-ban-circle"></span>
+        <span class="fas fa-ban"></span>
         <span class="hidden-xs-custom"><%= t'repositories.unassign_records_from_module' %></span>
       </button>
     <% end %>
diff --git a/app/views/my_modules/results.html.erb b/app/views/my_modules/results.html.erb
index 4ee4f9569..b59754da2 100644
--- a/app/views/my_modules/results.html.erb
+++ b/app/views/my_modules/results.html.erb
@@ -7,10 +7,10 @@
   <div id="results-toolbar">
     <div class="pull-right">
       <button class="btn btn-default" id="results-collapse-btn">
-        <span class="glyphicon glyphicon-collapse-up"></span>
+        <span class="fas fa-caret-square-up"></span>
         <span class="hidden-xs-custom"><%= t'my_modules.results.collapse_label' %></button></span>
       <button class="btn btn-default" id="results-expand-btn">
-        <span class="glyphicon glyphicon-collapse-down"></span>
+        <span class="fas fa-caret-square-down"></span>
         <span class="hidden-xs-custom"><%= t'my_modules.results.expand_label' %></button></span>
     </div>
 
@@ -20,7 +20,7 @@
          id="new-result-text"
          data-href="<%= new_my_module_result_text_path(my_module_id: @my_module.id) %>"
          href="#">
-        <span class="glyphicon glyphicon-font"></span>
+        <span class="fas fa-font"></span>
         <span class="hidden-xs"><%= t("my_modules.results.new_text_result") %></span>
       </a>
       <a class="btn btn-primary"
@@ -34,7 +34,7 @@
          id="new-result-asset"
          data-href="<%= new_my_module_result_asset_path(my_module_id: @my_module.id) %>"
          href="#">
-        <span class="glyphicon glyphicon-picture"></span>
+        <span class="fas fa-image"></span>
         <span class="hidden-xs"><%= t("my_modules.results.new_asset_result") %></span>
       </a>
     <% end %>
diff --git a/app/views/projects/_notifications.html.erb b/app/views/projects/_notifications.html.erb
index c4610c45c..78fba5cb7 100644
--- a/app/views/projects/_notifications.html.erb
+++ b/app/views/projects/_notifications.html.erb
@@ -9,7 +9,7 @@
       <li class="notification alert-red">
         <div class="date-time">
           <span><%= l(mod.due_date, format: :full) %></span>
-          <span class="glyphicon glyphicon-alert"></span>
+          <span class="fas fa-exclamation-triangle"></span>
         </div>
         <%=t "projects.index.module_overdue_html", module: mod.name, days: days %>
       </li>
@@ -18,7 +18,7 @@
       <li class="notification alert-yellow">
         <div class="date-time">
           <span><%= l(mod.due_date, format: :full) %></span>
-          <span class="glyphicon glyphicon-alert"></span>
+          <span class="fas fa-exclamation-triangle"></span>
         </div>
         <%=t "projects.index.module_one_day_due_html", module: mod.name %>
       </li>
diff --git a/app/views/projects/archive.html.erb b/app/views/projects/archive.html.erb
index 4d9d91207..cd824937b 100644
--- a/app/views/projects/archive.html.erb
+++ b/app/views/projects/archive.html.erb
@@ -13,7 +13,7 @@
         <div class="dropdown">
           <button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
             <span class="hidden-xs"><%= t'projects.index.sort' %></span>
-            <span class="visible-xs-inline"><i class="glyphicon glyphicon-sort"></i></span>
+            <span class="visible-xs-inline"><i class="fas fa-sort"></i></span>
             <span class="caret"></span>
           </button>
           <ul class="dropdown-menu" aria-labelledby="sortMenu">
diff --git a/app/views/projects/experiment_archive/_experiment.html.erb b/app/views/projects/experiment_archive/_experiment.html.erb
index 55e8e94bb..48ad9921b 100644
--- a/app/views/projects/experiment_archive/_experiment.html.erb
+++ b/app/views/projects/experiment_archive/_experiment.html.erb
@@ -38,7 +38,7 @@
       </div>
       <div class="col-xs-8">
         <span title="<%=t "projects.experiment_archive.archived_on_title", date: l(experiment.archived_on, format: :full_date), time: l(experiment.archived_on, format: :time) %>">
-          <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
+          <span class="fas fa-calendar-alt" aria-hidden="true"></span>
           <%=l experiment.archived_on, format: :full_date %>
         </span>
       </div>
@@ -49,7 +49,7 @@
       </div>
       <div class="col-xs-8">
         <span title="<%=t "projects.experiment_archive.created_on_title", date: l(experiment.created_at, format: :full_date), time: l(experiment.created_at, format: :time) %>">
-          <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
+          <span class="fas fa-calendar-alt" aria-hidden="true"></span>
           <%=l experiment.created_at, format: :full_date %>
         </span>
       </div>
@@ -60,7 +60,7 @@
       </div>
       <div class="col-xs-8">
         <span title="<%=t "projects.experiment_archive.created_on_title", date: l(experiment.updated_at, format: :full_date), time: l(experiment.updated_at, format: :time) %>">
-          <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
+          <span class="fas fa-calendar-alt" aria-hidden="true"></span>
           <%=l experiment.updated_at, format: :full_date %>
         </span>
       </div>
diff --git a/app/views/projects/index.html.erb b/app/views/projects/index.html.erb
index 7f5d21a1a..4c14003ee 100644
--- a/app/views/projects/index.html.erb
+++ b/app/views/projects/index.html.erb
@@ -37,7 +37,7 @@
           <br />
           <a class="btn btn-primary btn-lg"
             id="new-project-btn">
-            <span class="glyphicon glyphicon-plus"></span>
+            <span class="fas fa-plus"></span>
             <span class="hidden-xs"><%= t('projects.index.no_projects.create_new_button') %></span>
           </a>
         <% else %>
@@ -86,7 +86,7 @@
             <% if @teams.exists? && can_create_projects?(current_team) %>
             <!-- new project button -->
               <a class="btn btn-primary pull-right" id="new-project-btn">
-                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                <span class="fas fa-plus" aria-hidden="true"></span>
                 <span class="hidden-xs"><%=t "projects.index.new" %></span>
               </a>
             <% end %>
@@ -95,7 +95,7 @@
             <div class="dropdown">
               <button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                 <span class="hidden-xs"><%= t'projects.index.sort' %></span>
-                <span class="visible-xs-inline"><i class="glyphicon glyphicon-sort"></i></span>
+                <span class="visible-xs-inline"><i class="fas fa-sort"></i></span>
                 <span class="caret"></span>
               </button>
               <ul class="dropdown-menu" aria-labelledby="sortMenu">
diff --git a/app/views/projects/show.html.erb b/app/views/projects/show.html.erb
index 29576bbfb..0df95b3bf 100644
--- a/app/views/projects/show.html.erb
+++ b/app/views/projects/show.html.erb
@@ -13,7 +13,7 @@
           <div class="dropdown pull-left">
             <button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
               <span class="hidden-xs"><%= t'projects.index.sort' %></span>
-              <span class="visible-xs-inline"><i class="glyphicon glyphicon-sort"></i></span>
+              <span class="visible-xs-inline"><i class="fas fa-sort"></i></span>
               <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" aria-labelledby="sortMenu">
@@ -32,7 +32,7 @@
                         type: "button",
                         id: 'new-experiment',
                         class: 'btn btn-primary pull-right' do %>
-              <span class="glyphicon glyphicon-plus"></span>
+              <span class="fas fa-plus"></span>
               <span class="hidden-xs"><%=t 'experiments.new.create' %></span>
             <% end %>
           <% end %>
diff --git a/app/views/projects/show/_experiment.html.erb b/app/views/projects/show/_experiment.html.erb
index 22ee555b0..266a949ef 100644
--- a/app/views/projects/show/_experiment.html.erb
+++ b/app/views/projects/show/_experiment.html.erb
@@ -40,7 +40,7 @@
         </div>
       <% end %>
       <span>
-        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
+        <span class="fas fa-calendar-alt" aria-hidden="true"></span>
         <%= localize(experiment.created_at, format: t('time.formats.full_date')) %> - <%= localize(experiment.updated_at, format: t('time.formats.full_date')) %>
       </span>
       <div data-hook="experiment-card-body">
diff --git a/app/views/protocols/_header.html.erb b/app/views/protocols/_header.html.erb
index 78384ec7a..a783d7030 100644
--- a/app/views/protocols/_header.html.erb
+++ b/app/views/protocols/_header.html.erb
@@ -11,7 +11,7 @@
 <div class="row">
   <div class="col-xs-6 col-sm-4 col-md-4">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-calendar"></span>
+      <span class="fas fa-calendar-alt"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.created_at" %>:</span>
@@ -21,7 +21,7 @@
 
   <div class="col-xs-6 col-sm-4 col-md-4">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-calendar"></span>
+      <span class="fas fa-calendar-alt"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.updated_at" %>:</span>
@@ -43,10 +43,10 @@
     <div class="badge-icon">
       <% if can_manage_protocol_in_repository?(@protocol) %>
         <a data-action="edit-keywords" data-remote="true" href="<%= edit_keywords_modal_protocol_path(@protocol, format: :json) %>" style="color: inherit;">
-          <span class="glyphicon glyphicon-text-color"></span>
+          <span class="fas fa-font"></span>
         </a>
       <% else %>
-        <span class="glyphicon glyphicon-text-color"></span>
+        <span class="fas fa-font"></span>
       <% end %>
     </div>
     <div class="well well-sm">
@@ -65,10 +65,10 @@
     <div class="badge-icon">
       <% if can_manage_protocol_in_repository?(@protocol) %>
         <a data-action="edit-authors" data-remote="true" href="<%= edit_authors_modal_protocol_path(@protocol, format: :json) %>" style="color: inherit;">
-          <span class="glyphicon glyphicon-education"></span>
+          <span class="fas fa-graduation-cap"></span>
         </a>
       <% else %>
-        <span class="glyphicon glyphicon-education"></span>
+        <span class="fas fa-graduation-cap"></span>
       <% end %>
     </div>
     <div class="well well-sm">
@@ -87,10 +87,10 @@
     <div class="badge-icon">
       <% if can_manage_protocol_in_repository?(@protocol) %>
         <a data-action="edit-description" data-remote="true" href="<%= edit_description_modal_protocol_path(@protocol, format: :json) %>" style="color: inherit;">
-          <span class="glyphicon glyphicon-info-sign"></span>
+          <span class="fas fa-info-circle"></span>
         </a>
       <% else %>
-        <span class="glyphicon glyphicon-info-sign"></span>
+        <span class="fas fa-info-circle"></span>
       <% end %>
     </div>
     <div class="well well-sm">
diff --git a/app/views/protocols/_steps.html.erb b/app/views/protocols/_steps.html.erb
index 8ecf43146..f9ea69a15 100644
--- a/app/views/protocols/_steps.html.erb
+++ b/app/views/protocols/_steps.html.erb
@@ -6,15 +6,15 @@
          class="btn btn-primary"
          data-action="new-step"
          data-href="<%= new_protocol_step_path(protocol_id: @protocol.id, format: :json) %>">
-        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+        <span class="fas fa-plus" aria-hidden="true"></span>
         <span class="hidden-xs"><%=t "protocols.steps.new_step" %></span>
       </a>
     <% end %>
     <a class="btn btn-default" data-action="collapse-steps">
-      <span class="glyphicon glyphicon-collapse-up"></span>
+      <span class="fas fa-caret-square-up"></span>
       <span class="hidden-xs"><%= t("protocols.steps.collapse_label") %></a></span>
     <a class="btn btn-default" data-action="expand-steps">
-      <span class="glyphicon glyphicon-collapse-down"></span>
+      <span class="fas fa-caret-square-down"></span>
       <span class="hidden-xs"><%= t("protocols.steps.expand_label") %></a></span>
   </div>
 
diff --git a/app/views/protocols/import_export/_import_json_protocol_p_desc.html.erb b/app/views/protocols/import_export/_import_json_protocol_p_desc.html.erb
index 154c14640..a8b9d10ba 100644
--- a/app/views/protocols/import_export/_import_json_protocol_p_desc.html.erb
+++ b/app/views/protocols/import_export/_import_json_protocol_p_desc.html.erb
@@ -7,7 +7,7 @@
         </span>
         &nbsp; &nbsp;
         <span class="step-panel-collapse-link" data-toggle="collapse">
-          <span class="glyphicon collapse-step-icon glyphicon-collapse-up"></span>
+          <span class="fas fa-caret-square-up collapse-step-icon "></span>
           <strong data-val="name"><%= 'Protocol info' %></strong>
         </span>
       </div>
diff --git a/app/views/protocols/import_export/_import_json_protocol_s_desc.html.erb b/app/views/protocols/import_export/_import_json_protocol_s_desc.html.erb
index 5253d2ad3..472e18759 100644
--- a/app/views/protocols/import_export/_import_json_protocol_s_desc.html.erb
+++ b/app/views/protocols/import_export/_import_json_protocol_s_desc.html.erb
@@ -13,7 +13,7 @@
       </span>
       &nbsp; &nbsp;
       <span class="step-panel-collapse-link" data-toggle="collapse">
-        <span class="glyphicon collapse-step-icon glyphicon-collapse-up"></span>
+        <span class="fas fa-caret-square-up collapse-step-icon"></span>
         <% title = nil %>
         <% step['components'].each do |key1,value1| #finding section (title of step) %>
           <% key1 = value1 if value1.class == Hash %>
diff --git a/app/views/protocols/import_export/_import_modal.html.erb b/app/views/protocols/import_export/_import_modal.html.erb
index 324220aab..7dd70c6ba 100644
--- a/app/views/protocols/import_export/_import_modal.html.erb
+++ b/app/views/protocols/import_export/_import_modal.html.erb
@@ -57,10 +57,10 @@
         <div data-role="multiple-protocols-buttons">
           <button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel") %></button>
           <div class="btn-group" role="group">
-            <a href="#" class="btn btn-default" data-action="jump-to-first-protocol"><i class="glyphicon glyphicon-fast-backward"></i></a>
-            <a href="#" class="btn btn-default" data-action="jump-to-previous-protocol"><i class="glyphicon glyphicon-backward"></i></a>
-            <a href="#" class="btn btn-default" data-action="jump-to-next-protocol"><i class="glyphicon glyphicon-forward"></i></a>
-            <a href="#" class="btn btn-default" data-action="jump-to-last-protocol"><i class="glyphicon glyphicon-fast-forward"></i></a>
+            <a href="#" class="btn btn-default" data-action="jump-to-first-protocol"><i class="fas fa-fast-backward"></i></a>
+            <a href="#" class="btn btn-default" data-action="jump-to-previous-protocol"><i class="fas fa-backward"></i></a>
+            <a href="#" class="btn btn-default" data-action="jump-to-next-protocol"><i class="fas fa-forward"></i></a>
+            <a href="#" class="btn btn-default" data-action="jump-to-last-protocol"><i class="fas fa-fast-forward"></i></a>
           </div>
           <div class="btn-group" role="group">
             <div data-role="import-all">
diff --git a/app/views/protocols/import_export/_preview_templates.html.erb b/app/views/protocols/import_export/_preview_templates.html.erb
index c5f6f67df..d0351ebc9 100644
--- a/app/views/protocols/import_export/_preview_templates.html.erb
+++ b/app/views/protocols/import_export/_preview_templates.html.erb
@@ -7,7 +7,7 @@
     &nbsp;
     &nbsp;
     <span class="step-panel-collapse-link" data-toggle="collapse">
-      <span class="glyphicon glyphicon-collapse-down collapse-step-icon"></span>
+      <span class="fas fa-caret-square-down collapse-step-icon"></span>
       <strong data-val="name"></strong>
     </span>
   </div>
diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb
index 006ae081d..c8e1b2fd5 100644
--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@@ -22,7 +22,7 @@
           </div>
           <div class="btn-group" role="group">
             <a class="btn btn-primary" <%= can_create_protocols_in_repository?(@current_team) ? "data-action=create-new" : "disabled=disabled" %> data-url="<%= create_new_modal_protocols_path(team: @current_team, type: @type) %>">
-              <span class="glyphicon glyphicon-plus"></span>
+              <span class="fas fa-plus"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.create_new") %></span>
             </a>
             <a class="btn btn-default" data-action="edit">
@@ -30,7 +30,7 @@
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.edit") %></span>
             </a>
             <a class="btn btn-default" data-action="clone">
-              <span class="glyphicon glyphicon-duplicate"></span>
+              <span class="fas fa-copy"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.clone_btn") %></span>
             </a>
             <% if @type == :public %>
@@ -52,12 +52,12 @@
              aria-expanded="false"
              href="#"
              <%= 'disabled' unless can_create_protocols_in_repository?(@current_team) %>>
-            <span class="glyphicon glyphicon-import"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span></a>
+            <span class="fas fa-download"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span></a>
             <% if can_create_protocols_in_repository?(@current_team) %>
               <ul class="dropdown-menu">
                 <li>
                   <a class="btn-link-alt btn-default-link btn-open-file" <%= can_create_protocols_in_repository?(@current_team) ? 'data-action="import"' : 'disabled="disabled"' %>>
-                    <span class="glyphicon glyphicon-file"></span>
+                    <span class="fas fa-file"></span>
                     <span class="hidden-xs"><%= t("protocols.index.import_alt") %></span>
                     <input type="file" value="" accept=".eln" data-role="import-file-input"
                     data-team-id="<%= @current_team.id %>"
@@ -67,21 +67,21 @@
                 </li>
                 <li>
                 <%= link_to "#modal-import-json-protocol", "data-toggle" => "modal" do %>
-                <span class="glyphicon glyphicon-file"></span>
+                <span class="fas fa-file"></span>
                 <span class="hidden-xs"><%= t("protocols.index.import_json") %></span>
                 <% end %>
                 </li>
               </ul>
             <% end %>
             <a class="btn btn-default" data-action="export" data-export-url="<%= export_protocols_path() %>">
-              <span class="glyphicon glyphicon-export"></span>
+              <span class="fas fa-upload"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.export") %></span>
             </a>
           </div>
 
           <div class="btn-group" role="group">
             <a class="btn btn-default" data-action="archive" data-url="<%= archive_protocols_path %>">
-              <span class="glyphicon glyphicon-briefcase"></span>
+              <span class="fas fa-briefcase"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.archive_action") %></span>
             </a>
           </div>
@@ -91,7 +91,7 @@
           </div>
           <div class="btn-group" role="group">
             <a class="btn btn-default" data-action="restore" data-url="<%= restore_protocols_path %>">
-              <span class="glyphicon glyphicon-refresh"></span>
+              <span class="fas fa-sync-alt"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.restore") %></span>
             </a>
           </div>
diff --git a/app/views/protocols/index/_import_results_modal.html.erb b/app/views/protocols/index/_import_results_modal.html.erb
index 7ce432089..4df31cbb4 100644
--- a/app/views/protocols/index/_import_results_modal.html.erb
+++ b/app/views/protocols/index/_import_results_modal.html.erb
@@ -19,7 +19,7 @@
 <!-- (THIS IS UGLY) -->
 <div data-template="import-result-message-error" style="display: none;">
   <div class="alert alert-danger" style="margin-bottom: 15px;" role="alert">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
+    <span class="fas fa-exclamation-circle"></span>
     <span data-val="message"></span>
   </div>
 </div>
diff --git a/app/views/protocols/index/_protocol_preview_modal_body.html.erb b/app/views/protocols/index/_protocol_preview_modal_body.html.erb
index ffba35ecb..fa832112c 100644
--- a/app/views/protocols/index/_protocol_preview_modal_body.html.erb
+++ b/app/views/protocols/index/_protocol_preview_modal_body.html.erb
@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-xs-6 col-sm-4 col-md-4">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-calendar"></span>
+      <span class="fas fa-calendar-alt"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.created_at" %>:</span>
@@ -11,7 +11,7 @@
 
   <div class="col-xs-6 col-sm-4 col-md-4">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-calendar"></span>
+      <span class="fas fa-calendar-alt"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.updated_at" %>:</span>
@@ -31,7 +31,7 @@
 
   <div class="col-xs-12 col-sm-6 col-md-6">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-text-color"></span>
+      <span class="fas fa-font"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.keywords" %>:</span>
@@ -41,7 +41,7 @@
 
   <div class="col-xs-12 col-sm-6 col-md-6">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-education"></span>
+      <span class="fas fa-graduation-cap"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.authors" %>:</span>
@@ -51,7 +51,7 @@
 
   <div class="col-xs-12 col-sm-12 col-md-12">
     <div class="badge-icon">
-      <span class="glyphicon glyphicon-info-sign"></span>
+      <span class="fas fa-info-circle"></span>
     </div>
     <div class="well well-sm">
       <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.description" %>:</span>
diff --git a/app/views/protocols/index/_results_modal_body.html.erb b/app/views/protocols/index/_results_modal_body.html.erb
index 10a2cf388..a97ab534d 100644
--- a/app/views/protocols/index/_results_modal_body.html.erb
+++ b/app/views/protocols/index/_results_modal_body.html.erb
@@ -5,7 +5,7 @@
 
 <% if failed.count > 0 %>
   <div class="alert alert-danger" style="margin-bottom: 15px;" role="alert">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
+    <span class="fas fa-exclamation-circle"></span>
     <%= t("protocols.index.#{en_action}.message_failed", nr: failed.count) %>
   </div>
 <% end %>
diff --git a/app/views/reports/elements/_element_controls.html.erb b/app/views/reports/elements/_element_controls.html.erb
index 251d712db..39455251a 100644
--- a/app/views/reports/elements/_element_controls.html.erb
+++ b/app/views/reports/elements/_element_controls.html.erb
@@ -4,15 +4,15 @@
 <% if !defined? show_remove then show_remove = true end %>
 
 <%if show_sort %>
-  <a href="" data-action="sort-asc" title="<%=t "projects.reports.elements.all.sort_asc" %>"><span class="glyphicon glyphicon-sort-by-attributes"></span></a>
-  <a href="" data-action="sort-desc" title="<%=t "projects.reports.elements.all.sort_desc" %>"><span class="glyphicon glyphicon-sort-by-attributes-alt"></span></a>
+  <a href="" data-action="sort-asc" title="<%=t "projects.reports.elements.all.sort_asc" %>"><span class="fas fa-sort-by-attributes"></span></a>
+  <a href="" data-action="sort-desc" title="<%=t "projects.reports.elements.all.sort_desc" %>"><span class="fas fa-sort-by-attributes-alt"></span></a>
 <% end %>
 <% if show_move_up %>
-  <a href="" data-action="move-up" title="<%=t "projects.reports.elements.all.move_up" %>"><span class="glyphicon glyphicon-chevron-up"></span></a>
+  <a href="" data-action="move-up" title="<%=t "projects.reports.elements.all.move_up" %>"><span class="fas fa-chevron-up"></span></a>
 <% end %>
 <% if show_move_down %>
-  <a href="" data-action="move-down" title="<%=t "projects.reports.elements.all.move_down" %>"><span class="glyphicon glyphicon-chevron-down"></span></a>
+  <a href="" data-action="move-down" title="<%=t "projects.reports.elements.all.move_down" %>"><span class="fas fa-chevron-down"></span></a>
 <% end %>
 <% if show_remove %>
-  <a href="" data-action="remove" title="<%=t "projects.reports.elements.all.remove" %>"><span class="glyphicon glyphicon-remove"></span></a>
+  <a href="" data-action="remove" title="<%=t "projects.reports.elements.all.remove" %>"><span class="fas fa-times"></span></a>
 <% end %>
\ No newline at end of file
diff --git a/app/views/reports/elements/_my_module_element.html.erb b/app/views/reports/elements/_my_module_element.html.erb
index 32727b14a..94b9aa9ff 100644
--- a/app/views/reports/elements/_my_module_element.html.erb
+++ b/app/views/reports/elements/_my_module_element.html.erb
@@ -1,7 +1,7 @@
 <% if my_module.blank? and @my_module.present? then my_module = @my_module end %>
 <% timestamp = my_module.created_at %>
 <% name = my_module.name %>
-<div class="report-element report-module-element" data-ts="<%= timestamp.to_i %>" data-type="my_module" data-id='{ "my_module_id": <%= my_module.id %> }' data-scroll-id="<%= my_module.id %>" data-modal-title="<%=t "projects.reports.elements.modals.module_contents.head_title", module: my_module.name %>" data-name="<%= name %>" data-icon-class="glyphicon glyphicon-credit-card">
+<div class="report-element report-module-element" data-ts="<%= timestamp.to_i %>" data-type="my_module" data-id='{ "my_module_id": <%= my_module.id %> }' data-scroll-id="<%= my_module.id %>" data-modal-title="<%=t "projects.reports.elements.modals.module_contents.head_title", module: my_module.name %>" data-name="<%= name %>" data-icon-class="fas fa-credit-card">
   <div class="report-element-header">
     <div class="row">
       <div class="pull-left user-time">
@@ -16,7 +16,7 @@
     <div class="row">
       <div class="pull-left module-name">
         <h4>
-          <span class="glyphicon glyphicon-credit-card"></span>
+          <span class="fas fa-credit-card"></span>
           <%= name %></h4>
       </div>
       <div class="pull-right module-due-date">
diff --git a/app/views/reports/elements/_my_module_result_asset_element.html.erb b/app/views/reports/elements/_my_module_result_asset_element.html.erb
index 3aa56eda5..1feb9bece 100644
--- a/app/views/reports/elements/_my_module_result_asset_element.html.erb
+++ b/app/views/reports/elements/_my_module_result_asset_element.html.erb
@@ -4,12 +4,12 @@
 <% comments = result.result_comments %>
 <% timestamp = asset.created_at %>
 <% name = result.name %>
-<% icon_class = 'glyphicon ' + (is_image ? 'glyphicon-picture' : 'glyphicon-file') %>
+<% icon_class = 'fas ' + (is_image ? 'fa-image' : 'fa-file') %>
 <div class="report-element report-result-element report-result-asset-element" data-ts="<%= timestamp.to_i %>" data-type="result_asset" data-id='{ "result_id": <%= result.id %> }' data-scroll-id="<%= result.id %>" data-modal-title="<%=t "projects.reports.elements.modals.result_contents.head_title", result: result.name %>" data-name="<%= name %>" data-icon-class="<%= icon_class %>">
   <div class="report-element-header">
     <div class="row">
       <div class="pull-left result-icon">
-        <span class="glyphicon <%= icon_class %>"></span>
+        <span class="<%= icon_class %>"></span>
       </div>
       <div class="pull-left result-name">
         <%= name %>
diff --git a/app/views/reports/elements/_my_module_result_text_element.html.erb b/app/views/reports/elements/_my_module_result_text_element.html.erb
index 63b2d27ff..51e4a669e 100644
--- a/app/views/reports/elements/_my_module_result_text_element.html.erb
+++ b/app/views/reports/elements/_my_module_result_text_element.html.erb
@@ -3,11 +3,11 @@
 <% comments = result.result_comments %>
 <% timestamp = result.created_at %>
 <% name = result.name %>
-<div class="report-element report-result-element report-result-text-element" data-ts="<%= timestamp.to_i %>" data-type="result_text" data-id='{ "result_id": <%= result.id %> }' data-scroll-id="<%= result.id %>" data-modal-title="<%=t "projects.reports.elements.modals.result_contents.head_title", result: result.name %>" data-name="<%= name %>" data-icon-class="glyphicon glyphicon-asterisk">
+<div class="report-element report-result-element report-result-text-element" data-ts="<%= timestamp.to_i %>" data-type="result_text" data-id='{ "result_id": <%= result.id %> }' data-scroll-id="<%= result.id %>" data-modal-title="<%=t "projects.reports.elements.modals.result_contents.head_title", result: result.name %>" data-name="<%= name %>" data-icon-class="fas fa-asterisk">
   <div class="report-element-header">
     <div class="row">
       <div class="pull-left result-icon">
-          <span class="glyphicon glyphicon-asterisk"></span>
+          <span class="fas fa-asterisk"></span>
       </div>
       <div class="pull-left result-name">
         <%= name %>
diff --git a/app/views/reports/elements/_my_module_samples_element.html.erb b/app/views/reports/elements/_my_module_samples_element.html.erb
index 97468dd00..1fc6cb3cd 100644
--- a/app/views/reports/elements/_my_module_samples_element.html.erb
+++ b/app/views/reports/elements/_my_module_samples_element.html.erb
@@ -2,11 +2,11 @@
 <% if order.blank? and @order.present? then order = @order end %>
 <% timestamp = Time.current + 1.year - 1.days %>
 <% samples_json = my_module.samples_json_hot(order) %>
-<div class="report-element report-module-samples-element" data-sort-hot="3" data-ts="<%= timestamp.to_i %>" data-type="my_module_samples" data-id='{ "my_module_id": <%= my_module.id %> }' data-scroll-id="<%= my_module.id %>" data-order="<%= order == :asc ? "asc" : "desc" %>" data-name="<%=t "projects.reports.elements.module_samples.sidebar_name" %>" data-icon-class="glyphicon glyphicon-tint">
+<div class="report-element report-module-samples-element" data-sort-hot="3" data-ts="<%= timestamp.to_i %>" data-type="my_module_samples" data-id='{ "my_module_id": <%= my_module.id %> }' data-scroll-id="<%= my_module.id %>" data-order="<%= order == :asc ? "asc" : "desc" %>" data-name="<%=t "projects.reports.elements.module_samples.sidebar_name" %>" data-icon-class="fas fa-tint">
   <div class="report-element-header">
     <div class="row">
       <div class="pull-left samples-icon">
-        <span class="glyphicon glyphicon-tint"></span>
+        <span class="fas fa-tint"></span>
       </div>
       <div class="pull-left samples-name">
         <%=t "projects.reports.elements.module_samples.name", my_module: my_module.name %>
diff --git a/app/views/reports/elements/_my_module_step_element.html.erb b/app/views/reports/elements/_my_module_step_element.html.erb
index 08ba016ed..897827e3d 100644
--- a/app/views/reports/elements/_my_module_step_element.html.erb
+++ b/app/views/reports/elements/_my_module_step_element.html.erb
@@ -6,7 +6,7 @@
 <% assets = step.assets %>
 <% checklists = step.checklists %>
 <% comments = step.step_comments %>
-<div class="report-element report-step-element" data-ts="<%= timestamp.to_i %>" data-type="step" data-id='{ "step_id": <%= step.id %> }' data-scroll-id="<%= step.id %>" data-modal-title="<%=t "projects.reports.elements.modals.step_contents.head_title", step: step.name %>" data-name="<%=t "projects.reports.elements.step.sidebar_name", pos: (step.position + 1), name: step.name %>" data-icon-class="glyphicon glyphicon-circle-arrow-right">
+<div class="report-element report-step-element" data-ts="<%= timestamp.to_i %>" data-type="step" data-id='{ "step_id": <%= step.id %> }' data-scroll-id="<%= step.id %>" data-modal-title="<%=t "projects.reports.elements.modals.step_contents.head_title", step: step.name %>" data-name="<%=t "projects.reports.elements.step.sidebar_name", pos: (step.position + 1), name: step.name %>" data-icon-class="fas fa-arrow-circle-right">
   <div class="report-element-header">
     <div class="row">
       <div class="pull-left user-time">
@@ -21,7 +21,7 @@
     <div class="row">
       <div class="pull-left step-name">
         <h5>
-          <span class="glyphicon glyphicon-circle-arrow-right"></span>
+          <span class="fas fa-arrow-circle-right"></span>
           <b><%=t "projects.reports.elements.step.step_pos", pos: (step.position + 1) %></b>&nbsp;<%= step.name %>
           <%= step_status_label(step) %>
         </h5>
diff --git a/app/views/reports/elements/_new_element.html.erb b/app/views/reports/elements/_new_element.html.erb
index de014a256..71ecde11c 100644
--- a/app/views/reports/elements/_new_element.html.erb
+++ b/app/views/reports/elements/_new_element.html.erb
@@ -8,7 +8,7 @@
       </div>
     </div>
     <div class="plus-icon">
-      <span class="glyphicon glyphicon-plus"></span>
+      <span class="fas fa-plus"></span>
     </div>
     <div class="line right-line">
       <div class="filler-wrapper">
diff --git a/app/views/reports/elements/_project_header_element.html.erb b/app/views/reports/elements/_project_header_element.html.erb
index 0489bb4a0..da8d20f3e 100644
--- a/app/views/reports/elements/_project_header_element.html.erb
+++ b/app/views/reports/elements/_project_header_element.html.erb
@@ -1,6 +1,6 @@
 <% if project.blank? and @project.present? then project = @project end %>
 <% name = t("projects.reports.elements.project_header.title", project: project.name) %>
-<div class="report-element report-project-header-element" data-ts="ignore" data-type="project_header" data-id='{ "project_id": <%= project.id %> }' data-scroll-id="<%= project.id %>" data-name="<%= name %>" data-icon-class="glyphicon glyphicon-header">
+<div class="report-element report-project-header-element" data-ts="ignore" data-type="project_header" data-id='{ "project_id": <%= project.id %> }' data-scroll-id="<%= project.id %>" data-name="<%= name %>" data-icon-class="fas fa-heading">
   <div class="report-element-header">
     <div class="row">
       <div class="pull-left user-time">
diff --git a/app/views/reports/elements/_step_asset_element.html.erb b/app/views/reports/elements/_step_asset_element.html.erb
index d794fd89e..bb93a9ed4 100644
--- a/app/views/reports/elements/_step_asset_element.html.erb
+++ b/app/views/reports/elements/_step_asset_element.html.erb
@@ -1,12 +1,12 @@
 <% if asset.blank? and @asset.present? then asset = @asset end %>
 <% is_image = asset.is_image? %>
 <% timestamp = asset.created_at %>
-<% icon_class = 'glyphicon ' + (is_image ? 'glyphicon-picture' : 'glyphicon-file') %>
+<% icon_class = 'fas ' + (is_image ? 'fa-image' : 'fa-file') %>
 <div class="report-element report-step-attachment-element report-step-asset-element" data-ts="<%= timestamp.to_i %>" data-type="step_asset" data-id='{ "asset_id": <%= asset.id %> }' data-scroll-id="<%= asset.id %>" data-name="<%=t "projects.reports.elements.step_asset.sidebar_name", file: asset.file_file_name %>" data-icon-class="<%= icon_class %>">
   <div class="report-element-header">
     <div class="row">
       <div class="pull-left attachment-icon">
-        <span class="glyphicon <%= icon_class %>"></span>
+        <span class="<%= icon_class %>"></span>
       </div>
       <div class="pull-left file-name">
         <em><%=t 'projects.reports.elements.step_asset.file_name', file: truncate( asset.file_file_name, length: Constants::FILENAME_TRUNCATION_LENGTH) %></em>
diff --git a/app/views/reports/index.html.erb b/app/views/reports/index.html.erb
index 500094a04..734f879b7 100644
--- a/app/views/reports/index.html.erb
+++ b/app/views/reports/index.html.erb
@@ -7,7 +7,7 @@
       <div class="col-md-12">
         <% if can_manage_reports?(current_team) %>
           <%= link_to '#', class: 'btn btn-primary', id: 'new-report-btn', 'data-no-turbolink' => true do %>
-            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+            <span class="fas fa-plus" aria-hidden="true"></span>
             <span class="hidden-xs"><%=t "projects.reports.index.new" %></span>
           <% end %>
           <%= link_to "", remote: true, class: "btn btn-default", id: "edit-report-btn" do %>
@@ -15,7 +15,7 @@
             <span class="hidden-xs"><%=t "projects.reports.index.edit" %></span>
           <% end %>
           <%= link_to "", remote: true, class: "btn btn-default", id: "delete-reports-btn" do %>
-            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+            <span class="fas fa-times" aria-hidden="true"></span>
             <span class="hidden-xs"><%=t "projects.reports.index.delete" %></span>
           <% end %>
         <% end %>
diff --git a/app/views/reports/new/_report_navigation.html.erb b/app/views/reports/new/_report_navigation.html.erb
index 220b1c39b..4d568b8bb 100644
--- a/app/views/reports/new/_report_navigation.html.erb
+++ b/app/views/reports/new/_report_navigation.html.erb
@@ -3,7 +3,7 @@
 
     <div class="dropdown" id="sort-report">
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        <span class="glyphicon glyphicon-sort visible-xs-inline"></span>
+        <span class="fas fa-sort visible-xs-inline"></span>
         <span class="hidden-xs"><%= t'projects.reports.new.nav_sort_by' %></span>
         <span class="caret"></span>
       </button>
@@ -14,14 +14,14 @@
     </div>
 
     <%= link_to "", class: "btn btn-default", remote: true, id: "print-report" do %>
-      <span class="glyphicon glyphicon-print"></span>
+      <span class="fas fa-print"></span>
       <span class="hidden-xs"><%=t "projects.reports.new.nav_print" %></span>
     <% end %>
     <%= form_tag generate_project_reports_path(@project, format: :pdf), method: :post, target: "_blank", class: "get-report-pdf-form" do %>
       <div class="form-group">
       <%= hidden_field_tag "html", "" %>
       <%= link_to "", class: "btn btn-default", remote: true, id: "get-report-pdf" do %>
-        <span class="glyphicon glyphicon-save-file"></span>
+        <span class="fas fa-file-download"></span>
         <span class="hidden-xs"><%=t "projects.reports.new.nav_pdf" %></span>
       <% end %>
       </div>
diff --git a/app/views/reports/new/modal/_experiment_contents.html.erb b/app/views/reports/new/modal/_experiment_contents.html.erb
index 8ff3453be..6e28c0333 100644
--- a/app/views/reports/new/modal/_experiment_contents.html.erb
+++ b/app/views/reports/new/modal/_experiment_contents.html.erb
@@ -5,13 +5,13 @@
     <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="active">
         <a href="#tasks-tab" aria-controls="tasks-tab" role="tab" data-toggle="tab">
-          <span class="glyphicon glyphicon-credit-card visible-xs"></span>
+          <span class="fas fa-credit-card visible-xs"></span>
           <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></span>
         </a>
       </li>
       <li role="presentation">
         <a href="#content-tab" aria-controls="content-tab" role="tab" data-toggle="tab">
-          <span class="glyphicon glyphicon-link visible-xs"></span>
+          <span class="fas fa-link visible-xs"></span>
           <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></span>
         </a>
       </li>
diff --git a/app/views/reports/new/modal/_module_contents.html.erb b/app/views/reports/new/modal/_module_contents.html.erb
index 72ff1f96e..512f86d30 100644
--- a/app/views/reports/new/modal/_module_contents.html.erb
+++ b/app/views/reports/new/modal/_module_contents.html.erb
@@ -5,7 +5,7 @@
     <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="active">
         <a href="#content-tab" aria-controls="content-tab" role="tab" data-toggle="tab">
-          <span class="glyphicon glyphicon-link visible-xs"></span>
+          <span class="fas fa-link visible-xs"></span>
           <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></span>
         </a>
       </li>
diff --git a/app/views/reports/new/modal/_project_contents.html.erb b/app/views/reports/new/modal/_project_contents.html.erb
index a7c003623..40c7ffac5 100644
--- a/app/views/reports/new/modal/_project_contents.html.erb
+++ b/app/views/reports/new/modal/_project_contents.html.erb
@@ -5,14 +5,14 @@
     <ul class="nav nav-tabs" role="tablist">
       <li role="presentation" class="active">
         <a href="#tasks-tab" aria-controls="tasks-tab" role="tab" data-toggle="tab">
-          <span class="glyphicon glyphicon-credit-card visible-xs"></span>
+          <span class="fas fa-credit-card visible-xs"></span>
           <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></span>
         </a>
       </li>
       <% if project.project_my_modules.is_archived(false).exists? %>
       <li role="presentation">
         <a href="#content-tab" aria-controls="content-tab" role="tab" data-toggle="tab">
-          <span class="glyphicon glyphicon-link visible-xs"></span>
+          <span class="fas fa-link visible-xs"></span>
           <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></span>
         </a>
       </li>
diff --git a/app/views/repositories/_delete_repository_modal.html.erb b/app/views/repositories/_delete_repository_modal.html.erb
index 744f2d243..4a2a4c762 100644
--- a/app/views/repositories/_delete_repository_modal.html.erb
+++ b/app/views/repositories/_delete_repository_modal.html.erb
@@ -10,7 +10,7 @@
       <div class="modal-body">
         <p><%= t("repositories.index.modal_delete.message_html", name: @repository.name) %></p>
         <div class="alert alert-danger" role="alert">
-          <span class="glyphicon glyphicon-exclamation-sign"></span>
+          <span class="fas fa-exclamation-circle"></span>
           &nbsp;
           <%= t("repositories.index.modal_delete.alert_heading") %>
           <ul>
diff --git a/app/views/repositories/_repository_row_info_modal.html.erb b/app/views/repositories/_repository_row_info_modal.html.erb
index 515347427..490fdeacc 100644
--- a/app/views/repositories/_repository_row_info_modal.html.erb
+++ b/app/views/repositories/_repository_row_info_modal.html.erb
@@ -58,7 +58,7 @@
                         <%= render partial: 'search/results/partials/experiment_text.html.erb',
                                   locals: { experiment: element.my_module.experiment } %>
                       </li>
-                      <li><span class='glyphicon glyphicon-credit-card'></span>&nbsp;
+                      <li><span class='fas fa-credit-card'></span>&nbsp;
                         <%= render partial: 'search/results/partials/my_module_text.html.erb',
                                   locals: { my_module: element.my_module,
                                             link_to_page: :repositories,
diff --git a/app/views/repositories/index.html.erb b/app/views/repositories/index.html.erb
index a68cccb62..2337a8bb4 100644
--- a/app/views/repositories/index.html.erb
+++ b/app/views/repositories/index.html.erb
@@ -17,7 +17,7 @@
            id="create-new-repository"
            data-remote="true"
            href="<%= create_modal_team_repositories_path(current_team) %>">
-          <span class="glyphicon glyphicon-plus"></span>
+          <span class="fas fa-plus"></span>
           <span class="hidden-xs"><%= t('libraries.index.no_libraries.create_new_button') %></span>
         </a>
       <% else %>
diff --git a/app/views/repositories/show.html.erb b/app/views/repositories/show.html.erb
index b1dbd9f19..dd0be8d56 100644
--- a/app/views/repositories/show.html.erb
+++ b/app/views/repositories/show.html.erb
@@ -10,7 +10,7 @@
 
     <% if can_create_repository_rows?(@repository.team) %>
       <button type="button" class="btn btn-primary editAdd" id="addRepositoryRecord" onclick="onClickAddRecord()">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="fas fa-plus"></span>
         <span class="hidden-xs"><%= t("repositories.add_new_record") %></span>
       </button>
     <% end %>
@@ -90,7 +90,7 @@
              id="create-new-repository"
              data-remote="true"
              href="<%= create_modal_team_repositories_path(@repository.team) %>">
-            <span class="glyphicon glyphicon-plus"></span>
+            <span class="fas fa-plus"></span>
             <span class="hidden-xs"><%= t('libraries.index.no_libraries.create_new_button') %></span>
           </a>
         <% end %>
@@ -101,11 +101,11 @@
 
   <div class="btn-group inline" id="saveCancel" data-toggle="buttons" style="display:none">
     <button type="button" class="btn btn-success" id="saveRecord" onclick="onClickSave()">
-      <span class="glyphicon glyphicon-save"></span>
+      <span class="fas fa-save"></span>
       <%= t("repositories.save_record") %>
     </button>
     <button type="button" class="btn btn-default" id="cancelSave" onclick="onClickCancel()">
-      <span class="glyphicon glyphicon-remove visible-xs-inline"></span>
+      <span class="fas fa-times visible-xs-inline"></span>
       <span class="hidden-xs"><%= t("repositories.cancel_save") %></span>
     </button>
   </div>
@@ -119,13 +119,13 @@
       </button>
       <button type="button" class="btn btn-default"
         id="deleteRepositoryRecordsButton" onclick="onClickDelete()" disabled>
-        <span class="glyphicon glyphicon-trash"></span>
+        <span class="fas fa-trash-alt"></span>
         <span class="hidden-xs-custom"><%= t'repositories.delete_record' %></span>
           <%= submit_tag I18n.t('repositories.delete_record'), :class => "hidden
           delete_repository_records_submit" %>
       </button>
       <button type="button" class="btn btn-default copyRow" id="copyRepositoryRecords" onclick="onClickCopyRepositoryRecords()" disabled>
-        <span class="glyphicon glyphicon-duplicate"></span>
+        <span class="fas fa-copy"></span>
         <span class="hidden-xs-custom"><%= t("repositories.copy_record") %></span>
       </button>
     <% end %>
diff --git a/app/views/repository_columns/_delete_column_modal_body.html.erb b/app/views/repository_columns/_delete_column_modal_body.html.erb
index 9e12b4c01..98cb6072f 100644
--- a/app/views/repository_columns/_delete_column_modal_body.html.erb
+++ b/app/views/repository_columns/_delete_column_modal_body.html.erb
@@ -7,7 +7,7 @@
                                id: @repository_column.id} do |f| %>
   <p><%= t("repositories.modal_delete_column.message", column: @repository_column.name) %></p>
   <div class="alert alert-danger" role="alert">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
+    <span class="fas fa-exclamation-circle"></span>
     &nbsp;
     <%= t("repositories.modal_delete_column.alert_heading") %>
     <ul>
diff --git a/app/views/repository_columns/index.html.erb b/app/views/repository_columns/index.html.erb
index e8943b850..1ec12980f 100644
--- a/app/views/repository_columns/index.html.erb
+++ b/app/views/repository_columns/index.html.erb
@@ -17,7 +17,7 @@
         <button class="btn btn-primary"
                 data-modal-url="<%= repository_columns_create_html_path(@repository) %>"
                 data-action="new-column-modal">
-          <span class="glyphicon glyphicon-plus"></span>&nbsp;<%=t 'libraries.repository_columns.index.new_column' %>
+          <span class="fas fa-plus"></span>&nbsp;<%=t 'libraries.repository_columns.index.new_column' %>
         </button>
       </div>
     </div>
@@ -46,7 +46,7 @@
                     <%=t 'libraries.repository_columns.index.edit_column'%>
                   </button>&nbsp;
                   <button class="btn btn-default delete-column" data-action="destroy">
-                    <span class="glyphicon glyphicon-trash"></span>
+                    <span class="fas fa-trash-alt"></span>
                     <%=t 'libraries.repository_columns.index.delete_column'%>
                   </button>
                 </span>
diff --git a/app/views/result_assets/_new.html.erb b/app/views/result_assets/_new.html.erb
index 97421de46..b94976748 100644
--- a/app/views/result_assets/_new.html.erb
+++ b/app/views/result_assets/_new.html.erb
@@ -3,7 +3,7 @@
     <%=t 'assets.drag_n_drop.label_html' %>
     <label>
       <span class="btn btn-primary">
-        <span class="glyphicon glyphicon-plus"></span>
+        <span class="fas fa-plus"></span>
         <%=t 'assets.drag_n_drop.browse_label' %>
       </span>
       <input type="file"
diff --git a/app/views/sample_groups/_sample_group.html.erb b/app/views/sample_groups/_sample_group.html.erb
index 623a8eca5..ac69e6f15 100644
--- a/app/views/sample_groups/_sample_group.html.erb
+++ b/app/views/sample_groups/_sample_group.html.erb
@@ -16,7 +16,7 @@
         <% end %>
       </span>
       <span class="edit-sample-group fas fa-pencil-alt"></span>
-      <span class="delete glyphicon glyphicon-trash"></span>
+      <span class="delete fas fa-trash-alt"></span>
     </span>
   </span>
 </li>
diff --git a/app/views/sample_my_modules/_index.html.erb b/app/views/sample_my_modules/_index.html.erb
index c4d03088d..cd06f8243 100644
--- a/app/views/sample_my_modules/_index.html.erb
+++ b/app/views/sample_my_modules/_index.html.erb
@@ -5,7 +5,7 @@
     <li><em><%= t 'experiments.canvas.popups.no_samples' %></em></li>
   <% else %>
     <% @samples.each do |sample| %>
-      <li><span class="text-muted glyphicon glyphicon-triangle-right"></span><span><%= sample.name %></span></li>
+      <li><span class="text-muted fas fa-caret-right"></span><span><%= sample.name %></span></li>
     <% end %>
   <% end %>
   <hr>
diff --git a/app/views/sample_types/_sample_type.html.erb b/app/views/sample_types/_sample_type.html.erb
index 0313b7631..0ec289654 100644
--- a/app/views/sample_types/_sample_type.html.erb
+++ b/app/views/sample_types/_sample_type.html.erb
@@ -8,7 +8,7 @@
     <input class="text-edit" style="display: none;" />
     <span class="pull-right">
       <span class="edit-sample-type fas fa-pencil-alt"></span>
-      <span class="delete glyphicon glyphicon-trash"></span>
+      <span class="delete fas fa-trash-alt"></span>
     </span>
   </span>
 </li>
diff --git a/app/views/samples/_delete_custom_field_modal_body.html.erb b/app/views/samples/_delete_custom_field_modal_body.html.erb
index 5c1af6869..d47e11c6f 100644
--- a/app/views/samples/_delete_custom_field_modal_body.html.erb
+++ b/app/views/samples/_delete_custom_field_modal_body.html.erb
@@ -9,7 +9,7 @@
   <%= f.hidden_field :column_index, value: column_index %>
   <p><%= t("samples.modal_delete_custom_field.message", cf: @custom_field.name) %></p>
   <div class="alert alert-danger" role="alert">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
+    <span class="fas fa-exclamation-circle"></span>
     &nbsp;
     <%= t("samples.modal_delete_custom_field.alert_heading") %>
     <ul>
diff --git a/app/views/samples/_info_sample_modal.html.erb b/app/views/samples/_info_sample_modal.html.erb
index 2eccb33b1..d1067dc1e 100644
--- a/app/views/samples/_info_sample_modal.html.erb
+++ b/app/views/samples/_info_sample_modal.html.erb
@@ -19,7 +19,7 @@
           <br>
           <span>
             <%= t "samples.modal_info.sample_group" %>
-            <span class="glyphicon glyphicon-asterisk" style="<%= "color: #{@sample.sample_group.color}" if @sample.sample_group.present? %>"></span>
+            <span class="fas fa-asterisk" style="<%= "color: #{@sample.sample_group.color}" if @sample.sample_group.present? %>"></span>
             <% if @sample.sample_group.present? %>
               <%= @sample.sample_group.name %>
             <% else %>
@@ -64,7 +64,7 @@
                         <%= render partial: 'search/results/partials/experiment_text.html.erb',
                                   locals: { experiment: mod.experiment } %>
                       </li>
-                      <li><span class='glyphicon glyphicon-credit-card'></span>&nbsp;
+                      <li><span class='fas fa-credit-card'></span>&nbsp;
                         <%= render partial: 'search/results/partials/my_module_text.html.erb',
                                   locals: { my_module: mod, link_to_page: :samples } %>
                       </li>
diff --git a/app/views/search/index.html.erb b/app/views/search/index.html.erb
index e5f8b746a..7ce119226 100644
--- a/app/views/search/index.html.erb
+++ b/app/views/search/index.html.erb
@@ -19,7 +19,7 @@
                      value="<%= @display_query %>">
                <span class="input-group-btn">
                 <button class="btn btn-default" type="submit">
-                  <span class="glyphicon glyphicon-search"></span>
+                  <span class="fas fa-search"></span>
                 </button>
               </span>
             </div>
@@ -83,7 +83,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @module_search_count %></span>
-              <span class="glyphicon glyphicon-credit-card"></span>
+              <span class="fas fa-credit-card"></span>
               <%= t'Modules' %>
             </a>
           </li>
@@ -97,7 +97,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @result_search_count %></span>
-              <span class="glyphicon glyphicon-modal-window"></span>
+              <span class="fas fa-columns"></span>
               <%= t'Results' %>
             </a>
           </li>
@@ -153,7 +153,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @step_search_count %></span>
-              <span class="glyphicon glyphicon-circle-arrow-right"></span>
+              <span class="fas fa-arrow-circle-right"></span>
               <%= t'Steps' %>
             </a>
           </li>
@@ -182,7 +182,7 @@
                            match_case: @search_case, utf8: '✓',
                            search_id: @search_id}.to_query %>">
               <span class="badge pull-right"><%= @asset_search_count %></span>
-              <span class="glyphicon glyphicon-file"></span>
+              <span class="fas fa-file"></span>
               <%= t'Assets' %>
             </a>
           </li>
diff --git a/app/views/search/new.html.erb b/app/views/search/new.html.erb
index 65ee6e162..0e539412e 100644
--- a/app/views/search/new.html.erb
+++ b/app/views/search/new.html.erb
@@ -9,7 +9,7 @@
       <input class="form-control" type="text" name="q" placeholder="<%= t('nav.search') %>">
       <span class="input-group-btn">
         <button id="search-button" class="btn btn-default" type="submit">
-          <span class="glyphicon glyphicon-search"></span>
+          <span class="fas fa-search"></span>
         </button>
       </span>
     </div>
diff --git a/app/views/search/results/_assets.html.erb b/app/views/search/results/_assets.html.erb
index 255a8b769..1b598e779 100644
--- a/app/views/search/results/_assets.html.erb
+++ b/app/views/search/results/_assets.html.erb
@@ -1,12 +1,12 @@
 <% @asset_results.each do |asset| %>
   <h5>
     <% if asset.is_image? %>
-      <span class="glyphicon glyphicon-picture"></span>
+      <span class="fas fa-image"></span>
     <% else %>
       <% if wopi_file?(asset) %>
         <%= file_extension_icon(asset) %>
       <% else %>
-        <span class="glyphicon glyphicon-file"></span>
+        <span class="fas fa-file"></span>
       <% end %>
     <% end %>
     <%= render partial: "search/results/partials/asset_text.html.erb", locals: { asset: asset, query: search_query } %>
diff --git a/app/views/search/results/_checklists.html.erb b/app/views/search/results/_checklists.html.erb
index bf448df11..aed397b8a 100644
--- a/app/views/search/results/_checklists.html.erb
+++ b/app/views/search/results/_checklists.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |checklist| %>
   <h5>
-    <span class="glyphicon glyphicon-check"></span>
+    <span class="fas fa-check-square"></span>
     <%= highlight checklist.name, search_query.strip.split(/\s+/) %>
   </h5>
 
diff --git a/app/views/search/results/_modules.html.erb b/app/views/search/results/_modules.html.erb
index bd61f8e74..e40652077 100644
--- a/app/views/search/results/_modules.html.erb
+++ b/app/views/search/results/_modules.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |mod| %>
   <h5>
-    <span class="glyphicon glyphicon-credit-card"></span>
+    <span class="fas fa-credit-card"></span>
     <%= render partial: "search/results/partials/my_module_text.html.erb", locals: { my_module: mod, query: search_query } %>
   </h5>
 
diff --git a/app/views/search/results/_results.html.erb b/app/views/search/results/_results.html.erb
index a9dfaef71..e5c9f9cad 100644
--- a/app/views/search/results/_results.html.erb
+++ b/app/views/search/results/_results.html.erb
@@ -1,14 +1,14 @@
 <% results.each do |result| %>
   <h5>
     <% if result.is_text %>
-      <span class="glyphicon glyphicon-asterisk"></span>
+      <span class="fas fa-asterisk"></span>
     <% elsif result.is_table %>
       <span class="fas fa-table"></span>
     <% else %>
       <% if result.asset.is_image? %>
-        <span class="glyphicon glyphicon-picture"></span>
+        <span class="fas fa-image"></span>
       <% else %>
-        <span class="glyphicon glyphicon-file"></span>
+        <span class="fas fa-file"></span>
       <% end %>
     <% end %>
     <%= render partial: "search/results/partials/result_text.html.erb", locals: { result: result, query: search_query, target: nil } %>
diff --git a/app/views/search/results/_samples.html.erb b/app/views/search/results/_samples.html.erb
index 85da26a1b..5728cfe32 100644
--- a/app/views/search/results/_samples.html.erb
+++ b/app/views/search/results/_samples.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |sample| %>
   <h5>
-    <span class="glyphicon glyphicon-tint"></span>
+    <span class="fas fa-tint"></span>
     <%=t "search.index.samples.sample" %>
     <%= highlight sample.name, search_query.strip.split(/\s+/) %>
   </h5>
@@ -17,7 +17,7 @@
     <br>
     <span>
       <%=t "search.index.samples.sample_group" %>
-      <span class="glyphicon glyphicon-asterisk" style="<%= "color: #{sample.sample_group.color}" if sample.sample_group.present? %>"></span>
+      <span class="fas fa-asterisk" style="<%= "color: #{sample.sample_group.color}" if sample.sample_group.present? %>"></span>
       <% if sample.sample_group.present? %>
         <%= highlight sample.sample_group.name, search_query.strip.split(/\s+/) %>
       <% else %>
diff --git a/app/views/search/results/_steps.html.erb b/app/views/search/results/_steps.html.erb
index b7304c69b..4df905337 100644
--- a/app/views/search/results/_steps.html.erb
+++ b/app/views/search/results/_steps.html.erb
@@ -1,6 +1,6 @@
 <% results.each do |step| %>
   <h5>
-    <span class="glyphicon glyphicon-circle-arrow-right"></span>
+    <span class="fas fa-arrow-circle-right"></span>
     <%= render partial: "search/results/partials/step_text.html.erb", locals: { step: step, query: search_query, target: nil } %>
   </h5>
 
diff --git a/app/views/shared/_file_preview_modal.html.erb b/app/views/shared/_file_preview_modal.html.erb
index 85da2921c..b246b67c2 100644
--- a/app/views/shared/_file_preview_modal.html.erb
+++ b/app/views/shared/_file_preview_modal.html.erb
@@ -9,11 +9,11 @@
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
-        <button type="button" class="preview-close" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></button>
+        <button type="button" class="preview-close" data-dismiss="modal"><span class="fas fa-times"></span></button>
         <span class="file-name"></span>
         <span class="file-wopi-controls"></span>
         <a class="file-download-link" href='#'>
-          <p><span class="glyphicon glyphicon-download-alt"></span> <%= t('Download')%></p>
+          <p><span class="fas fa-download"></span> <%= t('Download')%></p>
         </a>
       </div>
       <div class="modal-body">
diff --git a/app/views/shared/_flash_alerts.html.erb b/app/views/shared/_flash_alerts.html.erb
index ec84827e6..d9a822426 100644
--- a/app/views/shared/_flash_alerts.html.erb
+++ b/app/views/shared/_flash_alerts.html.erb
@@ -3,7 +3,7 @@
   <div id="alert-flash" class="alert alert-success alert-dismissable alert-floating">
     <div>
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
-      <span class="glyphicon glyphicon-ok-sign"></span>
+      <span class="fas fa-check-circle"></span>
       <span><%= sanitize_input(flash[:success]) %></span>
     </div>
   </div>
@@ -12,7 +12,7 @@
   <div id="alert-flash" class="alert alert-info alert-dismissable alert-floating">
     <div>
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
-      <span class="glyphicon glyphicon-info-sign"></span>
+      <span class="fas fa-info-circle"></span>
       <span><%= notice %></span>
     </div>
   </div>
@@ -21,7 +21,7 @@
   <div id="alert-flash" class="alert alert-danger alert-dismissable alert-floating">
     <div>
       <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
-      <span class="glyphicon glyphicon-exclamation-sign"></span>
+      <span class="fas fa-exclamation-circle"></span>
       <span><%= alert || sanitize_input(flash[:error]) %></span>
     </div>
   </div>
diff --git a/app/views/shared/_navigation.html.erb b/app/views/shared/_navigation.html.erb
index d0206cd5a..fa8a0a995 100644
--- a/app/views/shared/_navigation.html.erb
+++ b/app/views/shared/_navigation.html.erb
@@ -44,7 +44,7 @@
                         data-id="<%= team.id %>"
                         class="text-center change-team">
                         <% if current_team == team %>
-                          <span class="glyphicon glyphicon-ok-sign"></span> <strong><%= team.name %></strong>
+                          <span class="fas fa-check-circle"></span> <strong><%= team.name %></strong>
                         <% else %>
                           <span class="team-name"><%= team.name %></span>
                         <% end %>
@@ -55,7 +55,7 @@
                 <% if current_user.teams.length > 1 && can_create_teams? %>
                   <li>
                     <%= link_to new_team_path do %>
-                      <span class="glyphicon glyphicon-plus"></span>
+                      <span class="fas fa-plus"></span>
                       <%= t('users.settings.teams.index.new_team') %>
                     <% end %>
                   </li>
diff --git a/app/views/shared/_sample.html.erb b/app/views/shared/_sample.html.erb
index d7c68e359..79e7af01c 100644
--- a/app/views/shared/_sample.html.erb
+++ b/app/views/shared/_sample.html.erb
@@ -2,10 +2,10 @@
 </td>
 <% if assigned %>
   <td data-sort="1">
-    <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+    <span class="fas fa-check" aria-hidden="true"></span>
   <% else %>
     <td data-sort="0">
-      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+      <span class="fas fa-times" aria-hidden="true"></span>
     <% end %>
   </td>
   <td><%= sample.name %></td>
diff --git a/app/views/shared/_samples.html.erb b/app/views/shared/_samples.html.erb
index 7a487509e..b61ea1ff7 100644
--- a/app/views/shared/_samples.html.erb
+++ b/app/views/shared/_samples.html.erb
@@ -23,18 +23,18 @@
 
   <% if can_create_samples?(@team) %>
     <button type="button" class="btn btn-default editAdd" id="addSample" onclick="onClickAddSample()">
-      <span class="glyphicon glyphicon-plus"></span>
+      <span class="fas fa-plus"></span>
       <span class="hidden-xs"><%= t("samples.add_new_sample") %></span>
     </button>
     <button type="button" class="btn btn-default" id="importSamplesButton" data-toggle="modal" data-target="#modal-import-samples">
-      <span class="glyphicon glyphicon-cloud-upload"></span>
+      <span class="fas fa-cloud-upload-alt"></span>
       <span class="hidden-xs"><%= t("samples.import") %></span>
       </button>
   <% end %>
 
   <% if can_read_team?(@team) %>
     <a href="#" class="btn btn-default" id="exportSamplesButton" data-turbolinks="false">
-      <span class="glyphicon glyphicon-cloud-download"></span>
+      <span class="fas fa-cloud-download-alt"></span>
       <span class="hidden-xs"><%= t("samples.export") %></span>
     </a>
 
@@ -83,11 +83,11 @@
 
 <div class="btn-group" id="saveCancel" data-toggle="buttons" style="display:none">
   <button type="button" class="btn btn-primary" id="saveSample" onclick="onClickSave()">
-    <span class="glyphicon glyphicon-save"></span>
+    <span class="fas fa-save"></span>
     <%= t("samples.save_sample") %>
   </button>
   <button type="button" class="btn btn-default" id="cancelSave" onclick="onClickCancel()">
-    <span class="glyphicon glyphicon-remove visible-xs-inline"></span>
+    <span class="fas fa-times visible-xs-inline"></span>
     <span class="hidden-xs"><%= t("samples.cancel_save") %></span>
   </button>
 </div>
@@ -102,7 +102,7 @@
   <!-- Don't check if user can manage the selected samples, because the ones that he can't, will be left untouched -->
   <button type="button" class="btn btn-default"
     id="deleteSamplesButton" data-target="#deleteSamples" data-toggle="modal" disabled>
-    <span class="glyphicon glyphicon-trash"></span>
+    <span class="fas fa-trash-alt"></span>
     <span class="hidden-xs-custom"><%= t'samples.delete_samples' %></span>
       <%= submit_tag I18n.t('samples.delete_samples'), :class => "hidden
       delete_samples_submit" %>
@@ -111,13 +111,13 @@
   <% if module_page? && can_assign_sample_to_module?(@my_module) %>
     <button type="button" class="btn btn-default"
       id="assignSamples" onclick="$(this).next().click();" disabled>
-      <span class="glyphicon glyphicon-ok-circle"></span>
+      <span class="fas fa-check-circle"></span>
       <span class="hidden-xs-custom"><%= t'samples.assign_samples_to_module' %></span>
     </button>
     <%= submit_tag MyModulesController::ASSIGN_SAMPLES, :class => "hidden" %>
     <button type="button" class="btn btn-default"
       id="unassignSamples" onclick="$(this).next().click();" disabled>
-      <span class="glyphicon glyphicon-ban-circle"></span>
+      <span class="fas fa-ban"></span>
       <span class="hidden-xs-custom"><%= t'samples.unassign_samples_to_module' %></span>
     </button>
     <%= submit_tag MyModulesController::UNASSIGN_SAMPLES, :class => "hidden" %>
diff --git a/app/views/shared/_secondary_navigation.html.erb b/app/views/shared/_secondary_navigation.html.erb
index ad25a8fa4..84218717b 100644
--- a/app/views/shared/_secondary_navigation.html.erb
+++ b/app/views/shared/_secondary_navigation.html.erb
@@ -28,7 +28,7 @@
             <li id="project-archive-nav-tab" data-turbolinks="false" class="<%= "active" if is_all_projects_archive? %>">
               <a href="<%= projects_archive_path %>" title="<%=t "nav2.all_projects.archive" %>">
                 <span class="hidden-sm hidden-md"><%=t "nav2.all_projects.archive" %></span>
-                <span class="hidden-xs hidden-lg glyphicon glyphicon-briefcase"></span>
+                <span class="hidden-xs hidden-lg fas fa-briefcase"></span>
               </a>
             </li>
           <% end %>
@@ -46,7 +46,7 @@
             <li id="project-archive-nav-tab" data-turbolinks="false" class="<%= "active" if is_project_archive? %>">
               <a href="<%= experiment_archive_project_url(@project) %>" title="<%=t "nav2.projects.archive" %>">
                 <span class="hidden-sm hidden-md"><%=t "nav2.projects.archive" %></span>
-                <span class="hidden-xs hidden-lg glyphicon glyphicon-briefcase"></span>
+                <span class="hidden-xs hidden-lg fas fa-briefcase"></span>
               </a>
             </li>
           <% end %>
@@ -66,7 +66,7 @@
               <li id="project-archive-nav-tab" data-turbolinks="false" class="<%= "active" if is_experiment_archive? %>">
                 <a href="<%= module_archive_experiment_url(@experiment) %>" title="<%=t "nav2.experiments.archive" %>">
                   <span class="hidden-sm hidden-md"><%=t "nav2.experiments.archive" %></span>
-                  <span class="hidden-xs hidden-lg glyphicon glyphicon-briefcase"></span>
+                  <span class="hidden-xs hidden-lg fas fa-briefcase"></span>
                 </a>
               </li>
           <% end %>
@@ -78,13 +78,13 @@
             <li id="steps-nav-tab" class="<%= "active" if is_module_protocols? %>">
               <a href="<%= protocols_my_module_url(@my_module) %>" title="<%=t "nav2.modules.steps" %>">
                 <span class="hidden-sm hidden-md"><%=t "nav2.modules.steps" %></span>
-                <span class="hidden-xs hidden-lg glyphicon glyphicon-circle-arrow-right"></span>
+                <span class="hidden-xs hidden-lg fas fa-arrow-circle-right"></span>
               </a>
             </li>
             <li id="results-nav-tab" class="<%= "active" if is_module_results? %>">
               <a href="<%= results_my_module_url(@my_module) %>" title="<%=t "nav2.modules.results" %>">
                 <span class="hidden-sm hidden-md"><%=t "nav2.modules.results" %></span>
-                <span class="hidden-xs hidden-lg glyphicon glyphicon-modal-window"></span>
+                <span class="hidden-xs hidden-lg fas fa-columns"></span>
               </a>
             </li>
             <li id="activities-nav-tab" class="<%= "active" if is_module_activities? %>">
@@ -125,7 +125,7 @@
             <li id="archive-nav-tab" data-turbolinks="false" class="<%= "active" if is_module_archive? %>">
               <a href="<%= archive_my_module_url(@my_module) %>" title="<%= t'nav2.modules.archive' %>">
                 <span class="hidden-sm hidden-md"><%=t "nav2.modules.archive" %></span>
-                <span class="hidden-xs hidden-lg glyphicon glyphicon-briefcase"></span>
+                <span class="hidden-xs hidden-lg fas fa-briefcase"></span>
               </a>
             </li>
           <% end %>
diff --git a/app/views/shared/sidebar/_my_modules.html.erb b/app/views/shared/sidebar/_my_modules.html.erb
index b286ad020..157f7e718 100644
--- a/app/views/shared/sidebar/_my_modules.html.erb
+++ b/app/views/shared/sidebar/_my_modules.html.erb
@@ -11,7 +11,7 @@
             <%= link_to my_module.name, module_action_to_link_to(my_module), data: { no_turbolink: true } %>
           <% end %>
           <% if is_canvas? %>
-            <a href="" class="canvas-center-on"><span class="glyphicon glyphicon-map-marker"></span></a>
+            <a href="" class="canvas-center-on"><span class="fas fa-map-marker-alt"></span></a>
           <% end %>
         </span>
       </li>
diff --git a/app/views/steps/_empty_step.html.erb b/app/views/steps/_empty_step.html.erb
index 370666a4f..aaadc8da5 100644
--- a/app/views/steps/_empty_step.html.erb
+++ b/app/views/steps/_empty_step.html.erb
@@ -14,7 +14,7 @@
       id="new-step-assets-tab"
       onClick="dragNdropAssetsInit('steps')">
     <a href="#new-step-assets" data-toggle="tab" data-no-turbolink="true">
-      <span class="glyphicon glyphicon-file"></span>
+      <span class="fas fa-file"></span>
       <%= t("protocols.steps.new.tab_assets") %>
     </a>
   </li>
@@ -37,7 +37,7 @@
       <%= render "form_checklists.html.erb", ff: ff %>
     <% end %>
     <%= f.add_nested_fields_link :checklists do %>
-      <span class="glyphicon glyphicon-plus"></span>
+      <span class="fas fa-plus"></span>
       <%= t("protocols.steps.new.add_checklist") %>
     <% end %>
   </div>
@@ -46,7 +46,7 @@
       <%=t 'assets.drag_n_drop.label_html' %>
       <label>
         <span class="btn btn-primary">
-          <span class="glyphicon glyphicon-plus"></span>
+          <span class="fas fa-plus"></span>
           <%=t 'assets.drag_n_drop.browse_label' %>
         </span>
         <input type="file"
@@ -66,7 +66,7 @@
       <%= render "form_tables.html.erb", ff: ff %>
     <% end %>
     <%= f.add_nested_fields_link :tables, id: "add-table" do %>
-      <span class="glyphicon glyphicon-plus"></span>
+      <span class="fas fa-plus"></span>
       <%= t("protocols.steps.new.add_table") %>
     <% end %>
   </div>
diff --git a/app/views/steps/_form_assets.html.erb b/app/views/steps/_form_assets.html.erb
index 938e04732..66afd7406 100644
--- a/app/views/steps/_form_assets.html.erb
+++ b/app/views/steps/_form_assets.html.erb
@@ -1,11 +1,11 @@
 <div class="panel panel-default panel-step-attachment">
   <div class="panel-heading">
-    <span class="glyphicon glyphicon-file"></span>
+    <span class="fas fa-file"></span>
     <%= t("protocols.steps.new.asset_panel_title") %>
     <div class="pull-right">
       <% unless ff.object.file.exists? && ff.object.locked? %>
         <%= ff.remove_nested_fields_link do %>
-          <span class="glyphicon glyphicon-remove"></span>
+          <span class="fas fa-times"></span>
         <% end %>
       <% end %>
     </div>
diff --git a/app/views/steps/_form_checklists.html.erb b/app/views/steps/_form_checklists.html.erb
index c895cc81d..e30b1324b 100644
--- a/app/views/steps/_form_checklists.html.erb
+++ b/app/views/steps/_form_checklists.html.erb
@@ -4,7 +4,7 @@
     <%= t("protocols.steps.new.checklist_panel_title") %>
     <div class="pull-right">
       <%= ff.remove_nested_fields_link do %>
-        <span class="glyphicon glyphicon-remove"></span>
+        <span class="fas fa-times"></span>
       <% end %>
     </div>
   </div>
@@ -35,7 +35,7 @@
               <div class="col-xs-1">
                 <div class="btn btn-link">
                   <%= chkItems.remove_nested_fields_link do %>
-                    <span class="glyphicon glyphicon-remove"></span>
+                    <span class="fas fa-times"></span>
                   <% end %>
                 </div>
               </div>
@@ -45,7 +45,7 @@
       <% end %>
     </ul>
     <%= ff.add_nested_fields_link :checklist_items do %>
-      <span class="glyphicon glyphicon-plus"></span>
+      <span class="fas fa-plus"></span>
       <%= t("protocols.steps.new.checklist_add_item") %>
     <% end %>
   </div>
diff --git a/app/views/steps/_form_tables.html.erb b/app/views/steps/_form_tables.html.erb
index ddcc806de..57ad56ddb 100644
--- a/app/views/steps/_form_tables.html.erb
+++ b/app/views/steps/_form_tables.html.erb
@@ -4,7 +4,7 @@
     <%= t("protocols.steps.new.table_panel_title") %>
     <div class="pull-right">
       <%= ff.remove_nested_fields_link do %>
-        <span class="glyphicon glyphicon-remove"></span>
+        <span class="fas fa-times"></span>
       <% end %>
     </div>
   </div>
diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb
index 262657baa..58d52c0bd 100644
--- a/app/views/steps/_step.html.erb
+++ b/app/views/steps/_step.html.erb
@@ -12,13 +12,13 @@
              href="<%= move_up_step_path(step, format: :json) %>"
              title="<%= t("protocols.steps.options.up_arrow_title") %>"
              data-remote="true">
-              <span class="glyphicon glyphicon-arrow-up"></span></a>
+              <span class="fas fa-arrow-up"></span></a>
           <a data-action="move-step"
              class="btn btn-link"
              href="<%= move_down_step_path(step, format: :json) %>"
              title="<%= t("protocols.steps.options.down_arrow_title") %>"
              data-remote="true">
-            <span class="glyphicon glyphicon-arrow-down"></a>
+            <span class="fas fa-arrow-down"></a>
           <a data-action="edit-step"
              class="btn btn-link"
              title="<%= t("protocols.steps.options.edit_title") %>"
@@ -28,7 +28,7 @@
           </a>
           <%= link_to(step_path(step), title: t("protocols.steps.options.delete_title"), method: "delete", class: "btn btn-link",
             data: {action: "delete-step", confirm: t("protocols.steps.destroy.confirm", step: step.name)}) do %>
-            <span class="glyphicon glyphicon-trash">
+            <span class="fas fa-trash-alt">
           <% end %>
         <% end %>
       </div>
@@ -36,7 +36,7 @@
          href="#step-panel-<%= step.id %>"
          data-toggle="collapse"
          data-remote="true">
-        <span class="glyphicon glyphicon-collapse-down collapse-step-icon"></span>
+        <span class="fas fa-caret-square-down collapse-step-icon"></span>
         <strong><%= step.name %></strong> |
         <span><%= sanitize_input t('protocols.steps.published_on',
                                    timestamp: l(step.created_at, format: :full),
@@ -127,7 +127,7 @@
                    class="pull-right"
                    data-link-url="<%= toggle_step_state_step_path(step)%>">
                 <button class="btn btn-default">
-                  <span class="glyphicon glyphicon-remove"></span>
+                  <span class="fas fa-times"></span>
                   <%= t("protocols.steps.options.uncomplete_title") %>
                 </button>
               </div>
@@ -136,7 +136,7 @@
                    class="pull-right"
                    data-link-url="<%= toggle_step_state_step_path(step)%>">
                 <button class="btn btn-toggle">
-                  <span class="glyphicon glyphicon-ok"></span>
+                  <span class="fas fa-check"></span>
                   <%= t("protocols.steps.options.complete_title") %>
                 </button>
               </div>
diff --git a/app/views/user_my_modules/_index_edit.html.erb b/app/views/user_my_modules/_index_edit.html.erb
index 013cf51b6..18bfe45e6 100644
--- a/app/views/user_my_modules/_index_edit.html.erb
+++ b/app/views/user_my_modules/_index_edit.html.erb
@@ -22,7 +22,7 @@
       <% if can_manage_users_in_module?(@my_module) %>
         <div class="col-xs-2">
           <%= link_to my_module_user_my_module_path(@my_module, umm, format: :json), method: :delete, remote: true, class: 'btn btn-link remove-user-link' do %>
-          <span class="glyphicon glyphicon-remove"></span>
+          <span class="fas fa-times"></span>
           <% end %>
         </div>
       <% end %>
@@ -42,7 +42,7 @@
       </div>
       <div class="col-xs-2">
         <%= f.button class: 'btn btn-primary' do %>
-          <span class="glyphicon glyphicon-plus"></span>
+          <span class="fas fa-plus"></span>
           <span class="hidden-xs"><%= t("experiments.canvas.full_zoom.modal_manage_users.create") %></span>
         <% end %>
       </div>
diff --git a/app/views/user_notifications/icons/_system_message.html.erb b/app/views/user_notifications/icons/_system_message.html.erb
index 2b8a769f9..80bd3a1e3 100644
--- a/app/views/user_notifications/icons/_system_message.html.erb
+++ b/app/views/user_notifications/icons/_system_message.html.erb
@@ -1,5 +1,5 @@
 <div class="text-center">
   <span class="system-message">
-    <i class="glyphicon glyphicon-tower" aria-hidden="true"></i>
+    <i class="fas fa-chess-rook" aria-hidden="true"></i>
   </span>
 </div>
diff --git a/app/views/user_projects/_index_edit.html.erb b/app/views/user_projects/_index_edit.html.erb
index 0794c0545..ace2a6f41 100644
--- a/app/views/user_projects/_index_edit.html.erb
+++ b/app/views/user_projects/_index_edit.html.erb
@@ -35,7 +35,7 @@
       </div>
       <div class="col-xs-3 col-sm-2">
         <%= link_to project_user_project_path(@project, user_proj, format: :json), method: :delete, remote: true, class: 'btn btn-link remove-user-link' do %>
-        <span class="glyphicon glyphicon-remove"></span>
+        <span class="fas fa-times"></span>
         <% end %>
       </div>
 
@@ -67,7 +67,7 @@
     </div>
     <div class="col-xs-4 col-sm-2">
     <%= f.button class: 'btn btn-primary' do %>
-      <span class="glyphicon glyphicon-plus"></span>
+      <span class="fas fa-plus"></span>
       <span class="hidden-xs"><%= t("projects.index.modal_manage_users.create") %></span>
     <% end %>
     </div>
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb
index 27746a5c9..c9014afd1 100644
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@@ -132,7 +132,7 @@
                   </div>
                   <% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
                     <div class="alert alert-info" style="margin-top: 15px;" role="alert">
-                      <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
+                      <span class="fas fa-info-circle" aria-hidden="true"></span>
                       <%=t "users.registrations.edit.waiting_for_confirm", email: resource.unconfirmed_email %>
                     </div>
                   <% end %>
diff --git a/app/views/users/settings/_sidebar.html.erb b/app/views/users/settings/_sidebar.html.erb
index c62d64253..528f85e40 100644
--- a/app/views/users/settings/_sidebar.html.erb
+++ b/app/views/users/settings/_sidebar.html.erb
@@ -6,12 +6,12 @@
        <li class="parent_li" >
          <span class="tree-link line-wrap no-indent">
            <i title="<%= t('sidebar.branch_expand') %>"
-              class="glyphicon glyphicon-triangle-right triangleRight"
+              class="fas fa-caret-right triangleRight"
               aria-hidden="true"
               style="<%= 'display: none;' if on_settings_account_page? %>"
               ></i>
            <i title="<%= t('sidebar.branch_collapse') %>"
-              class="glyphicon glyphicon-triangle-right expanded triangleDown"
+              class="fas fa-caret-right expanded triangleDown"
               aria-hidden="true"
               style="<%= 'display: none;' unless on_settings_account_page? %>"
               ></i>
diff --git a/app/views/users/settings/account/preferences/index.html.erb b/app/views/users/settings/account/preferences/index.html.erb
index 5585feb34..6b7942041 100644
--- a/app/views/users/settings/account/preferences/index.html.erb
+++ b/app/views/users/settings/account/preferences/index.html.erb
@@ -110,7 +110,7 @@
           </div>
           <div class="row">
             <div class="col-sm-2">
-              <span class="system-message hidden-sm"><i class="glyphicon glyphicon-tower" aria-hidden="true"></i></span>
+              <span class="system-message hidden-sm"><i class="fas fa-chess-rook" aria-hidden="true"></i></span>
             </div>
             <div class="col-sm-10">
               <strong><%=t 'notifications.form.system_message' %></strong>
diff --git a/app/views/users/settings/teams/_user_dropdown.html.erb b/app/views/users/settings/teams/_user_dropdown.html.erb
index a2682ab3c..7b0634dad 100644
--- a/app/views/users/settings/teams/_user_dropdown.html.erb
+++ b/app/views/users/settings/teams/_user_dropdown.html.erb
@@ -28,33 +28,33 @@
       <% end %>
       <li class="user-team-role <%= 'disabled' if user_team.guest? %>">
         <% if user_team.guest? %>
-          <span class="glyphicon glyphicon-ok"></span>
+          <span class="fas fa-check"></span>
           <%= UserTeam.new(role: 0).role_str %>
         <% else %>
           <a href="#" data-action="submit-role" data-value="guest">
-            <span class="glyphicon glyphicon-ok"></span>
+            <span class="fas fa-check"></span>
             <%= UserTeam.new(role: 0).role_str %>
           </a>
         <% end %>
       </li>
       <li class="user-team-role <%= 'disabled' if user_team.normal_user? %>">
         <% if user_team.normal_user? %>
-          <span class="glyphicon glyphicon-ok"></span>
+          <span class="fas fa-check"></span>
           <%= UserTeam.new(role: 1).role_str %>
         <% else %>
           <a href="#" data-action="submit-role" data-value="normal_user">
-            <span class="glyphicon glyphicon-ok"></span>
+            <span class="fas fa-check"></span>
             <%= UserTeam.new(role: 1).role_str %>
           </a>
         <% end %>
       </li>
       <li class="user-team-role <%= 'disabled' if user_team.admin? %>">
         <% if user_team.admin? %>
-          <span class="glyphicon glyphicon-ok"></span>
+          <span class="fas fa-check"></span>
           <%= UserTeam.new(role: 2).role_str %>
         <% else %>
           <a href="#" data-action="submit-role" data-value="admin">
-            <span class="glyphicon glyphicon-ok"></span>
+            <span class="fas fa-check"></span>
             <%= UserTeam.new(role: 2).role_str %>
           </a>
         <% end %>
diff --git a/app/views/users/settings/teams/index.html.erb b/app/views/users/settings/teams/index.html.erb
index 544542421..a34a4ad29 100644
--- a/app/views/users/settings/teams/index.html.erb
+++ b/app/views/users/settings/teams/index.html.erb
@@ -17,7 +17,7 @@
       <% if can_create_teams? %>
         <span id="new-team-button">
           <%= link_to new_team_path, class: "btn btn-primary", style: "margin-left: 30px;" do %>
-            <span class="glyphicon glyphicon-plus"></span>
+            <span class="fas fa-plus"></span>
             <span class="hidden-xs">
               <%= t("users.settings.teams.index.new_team") %>
             </span>
diff --git a/app/views/users/settings/teams/show.html.erb b/app/views/users/settings/teams/show.html.erb
index 27022b5c8..7efe56c59 100644
--- a/app/views/users/settings/teams/show.html.erb
+++ b/app/views/users/settings/teams/show.html.erb
@@ -28,7 +28,7 @@
     <div class="row">
       <div class="col-xs-6 col-sm-3">
         <div class="badge-icon">
-          <span class="glyphicon glyphicon-calendar"></span>
+          <span class="fas fa-calendar-alt"></span>
         </div>
         <div class="well well-sm">
           <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_created_at") %></span>
@@ -48,7 +48,7 @@
 
       <div class="col-xs-8 col-sm-4">
         <div class="badge-icon">
-          <span class="glyphicon glyphicon-hdd"></span>
+          <span class="fas fa-hdd"></span>
         </div>
         <div class="well well-sm">
           <span class="hidden-xs hidden-sm"><%= t("users.settings.teams.edit.header_space_taken") %></span>
@@ -66,7 +66,7 @@
                       remote: true,
                       class: 'description-link',
                       style: 'color: inherit' do %>
-            <span class="glyphicon glyphicon-info-sign"></span>
+            <span class="fas fa-info-circle"></span>
           <% end %>
         </div>
         <div class="well well-sm">
@@ -90,7 +90,7 @@
         <div class="col-xs-24 col-sm-12">
           <a href="#" class="btn btn-primary pull-right row" data-trigger="invite-users"
              data-turbolinks="false" data-modal-id="team-invite-users-modal">
-            <span class="glyphicon glyphicon-plus"></span>
+            <span class="fas fa-plus"></span>
             <%= t("users.settings.teams.edit.add_user") %>
           </a>
         </div>
diff --git a/app/views/users/settings/user_teams/_destroy_user_team_modal_body.html.erb b/app/views/users/settings/user_teams/_destroy_user_team_modal_body.html.erb
index 62101c5e2..7f5a68711 100644
--- a/app/views/users/settings/user_teams/_destroy_user_team_modal_body.html.erb
+++ b/app/views/users/settings/user_teams/_destroy_user_team_modal_body.html.erb
@@ -8,7 +8,7 @@
            team: user_team.team.name) %></p>
   <% if user_team.user.confirmed? %>
     <div class="alert alert-danger" role="alert">
-      <span class="glyphicon glyphicon-exclamation-sign"></span>
+      <span class="fas fa-exclamation-circle"></span>
       &nbsp;
       <%= t("users.settings.user_teams.destroy_uo_alert_heading") %>
       <ul>
diff --git a/app/views/users/settings/user_teams/_leave_user_team_modal_body.html.erb b/app/views/users/settings/user_teams/_leave_user_team_modal_body.html.erb
index e725ecc18..9e1c023c9 100644
--- a/app/views/users/settings/user_teams/_leave_user_team_modal_body.html.erb
+++ b/app/views/users/settings/user_teams/_leave_user_team_modal_body.html.erb
@@ -6,7 +6,7 @@
   <%= hidden_field_tag :leave, true %>
   <p><%= t("users.settings.user_teams.leave_uo_message", team: user_team.team.name) %></p>
   <div class="alert alert-danger" role="alert">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
+    <span class="fas fa-exclamation-circle"></span>
     &nbsp;
     <%= t("users.settings.user_teams.leave_uo_alert_heading") %>
     <ul>
diff --git a/package-lock.json b/package-lock.json
index 90494ccde..f2830291b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,10 +4,11 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@fortawesome/fontawesome-free-webfonts": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-webfonts/-/fontawesome-free-webfonts-1.0.5.tgz",
-      "integrity": "sha512-9JL80WJkSiTdR0AtIz7J2qGIkJxgOB1LAcESYP26cpl2Dfs8iy06NbAGM+e6BINpCT8XO1+fDKjU/LwCsOy8XA=="
+    "@fortawesome/fontawesome-free": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.1.0.tgz",
+      "integrity": "sha512-0XHj3cIq7OiG2v79UldqDHLFndLXxq0hbNTvsi7zDbLXiBtMkX+exuVUX466cajlSV8rkLiwa7GhTcMIKR1ajQ==",
+      "dev": true
     },
     "abbrev": {
       "version": "1.1.0",
diff --git a/package.json b/package.json
index e88667330..9028da55d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "lint": "eslint ."
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.1.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-transform-react-jsx-source": "^6.22.0",
     "eslint": "^4.7.2",
@@ -39,7 +40,6 @@
     "webpack-dev-server": "^2.5.1"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free-webfonts": "^1.0.5",
     "autoprefixer": "^7.1.2",
     "axios": "^0.16.2",
     "babel-core": "^6.25.0",