Upgrade Font Awesome from 4 to 5.15.4

src/supermarket/app/assets/stylesheets/appheader.scss

@@ -157,10 +157,17 @@
     width: rem-calc(40);
   }
 
-  .fa {
+  i {
     font-size: rem-calc(16);
     margin-left: rem-calc(5);
   }
+
+  a {
+    i.fa {
+      font-size: 0.75rem;
+      margin-left: rem-calc(5);
+    }
+  }
 }
 
 @media #{$mobile-only} {

src/supermarket/app/assets/stylesheets/application.css.scss

@@ -15,6 +15,7 @@
 *= require_tree ./cookbooks
 *= require_tree ./profile
 *= require_tree ./tools
+*= require_tree ./font_awesome
 *= require tabs
 *= require dashboard
 *= require contribute

src/supermarket/app/views/application/_appheader.html.erb

@@ -16,10 +16,10 @@
     <%= gravatar_for current_user, size: 80 %>
     <%= current_user.username %> <i class="fa fa-caret-down"></i>
     <ul class="userdropdown">
-      <li><%= link_to 'View Profile', current_user, class: 'fa fa-user', rel: 'view_profile' %></li>
-      <li><%= link_to 'Manage Profile', edit_profile_path, class: 'fa fa-cog', rel: 'manage_profile' %></li>
+      <li><%= link_to '<i class="fa fa-user"></i> View Profile'.html_safe, current_user, rel: 'view_profile' %></li>
+      <li><%= link_to '<i class="fa fa-cog"></i> Manage Profile'.html_safe, edit_profile_path, rel: 'manage_profile' %></li>
 
-      <li><%= link_to 'Sign Out', sign_out_path, :class => 'fa fa-power-off', method: :delete, rel: 'sign_out' %></li>
+      <li><%= link_to '<i class="fa fa-power-off"></i> Sign Out'.html_safe, sign_out_path, method: :delete, rel: 'sign_out' %></li>
     </ul>
   <% end %>
   </div>

src/supermarket/app/views/layouts/application.html.erb

@@ -15,7 +15,6 @@
     <link rel="apple-touch-icon" href="<%= image_url('apple-touch-icon.png') %>"/>
     <%= stylesheet_link_tag "application", media: "all" %>
     <% unless Rails.env == 'test' || air_gapped? %>
-      <%= stylesheet_link_tag "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" %>
       <%= stylesheet_link_tag "//fonts.googleapis.com/css?family=Montserrat:400,700" %>
     <% end %>
     <%= csrf_meta_tags %>
@@ -47,7 +46,7 @@
         </aside>
 
         <header class="globalheader">
-          <a class="left-off-canvas-toggle fa fa-bars"><span class="hide">Menu</span></a>
+          <a class="left-off-canvas-toggle"><i class="fa fa-bars"></i><span class="hide">Menu</span></a>
           <div class="inner_wrap">
             <div class="logo_and_nav_toggle">
               <h2 class="logochef"><%= link_to root_path do %><span>Chef Supermarket</span><% end %></h2>