Upgrade font awesome to 6.2.1

style/fa/_animated.scss

@@ -1,20 +1,153 @@
-// Animated Icons
+// animating icons
 // --------------------------
 
+.#{$fa-css-prefix}-beat {
+  animation-name: #{$fa-css-prefix}-beat;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-bounce {
+  animation-name: #{$fa-css-prefix}-bounce;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1));
+}
+
+.#{$fa-css-prefix}-fade {
+  animation-name: #{$fa-css-prefix}-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+}
+
+.#{$fa-css-prefix}-beat-fade {
+  animation-name: #{$fa-css-prefix}-beat-fade;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1));
+}
+
+.#{$fa-css-prefix}-flip {
+  animation-name: #{$fa-css-prefix}-flip;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out);
+}
+
+.#{$fa-css-prefix}-shake {
+  animation-name: #{$fa-css-prefix}-shake;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
+}
+
 .#{$fa-css-prefix}-spin {
-  animation: fa-spin 2s infinite linear;
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s);
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear);
 }
 
-.#{$fa-css-prefix}-pulse {
-  animation: fa-spin 1s infinite steps(8);
+.#{$fa-css-prefix}-spin-reverse {
+  --#{$fa-css-prefix}-animation-direction: reverse;
 }
 
-@keyframes fa-spin {
-  0% {
-    transform: rotate(0deg);
-  }
+.#{$fa-css-prefix}-pulse,
+.#{$fa-css-prefix}-spin-pulse {
+  animation-name: #{$fa-css-prefix}-spin;
+  animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal);
+  animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s);
+  animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite);
+  animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8));
+}
 
-  100% {
-    transform: rotate(360deg);
+// if agent or operating system prefers reduced motion, disable animations
+// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
+// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+@media (prefers-reduced-motion: reduce) {
+  .#{$fa-css-prefix}-beat,
+  .#{$fa-css-prefix}-bounce,
+  .#{$fa-css-prefix}-fade,
+  .#{$fa-css-prefix}-beat-fade,
+  .#{$fa-css-prefix}-flip,
+  .#{$fa-css-prefix}-pulse,
+  .#{$fa-css-prefix}-shake,
+  .#{$fa-css-prefix}-spin,
+  .#{$fa-css-prefix}-spin-pulse {
+    animation-delay: -1ms;
+    animation-duration: 1ms;
+    animation-iteration-count: 1;
+    transition-delay: 0s;
+    transition-duration: 0s;
   }
 }
+
+@keyframes #{$fa-css-prefix}-beat {
+  0%, 90% { transform: scale(1); }
+  45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); }
+}
+
+@keyframes #{$fa-css-prefix}-bounce {
+  0%   { transform: scale(1,1) translateY(0); }
+  10%  { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); }
+  30%  { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); }
+  50%  { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); }
+  57%  { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); }
+  64%  { transform: scale(1,1) translateY(0); }
+  100% { transform: scale(1,1) translateY(0); }
+}
+
+@keyframes #{$fa-css-prefix}-fade {
+  50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); }
+}
+
+@keyframes #{$fa-css-prefix}-beat-fade {
+  0%, 100% {
+    opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4);
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-flip {
+  50% {
+    transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg));
+  }
+}
+
+@keyframes #{$fa-css-prefix}-shake {
+  0% { transform: rotate(-15deg); }
+  4% { transform: rotate(15deg); }
+  8%, 24% { transform: rotate(-18deg); }
+  12%, 28% { transform: rotate(18deg); }
+  16% { transform: rotate(-22deg); }
+  20% { transform: rotate(22deg); }
+  32% { transform: rotate(-12deg); }
+  36% { transform: rotate(12deg); }
+  40%, 100% { transform: rotate(0deg); }
+}
+
+@keyframes #{$fa-css-prefix}-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

style/fa/_bordered-pulled.scss

@@ -1,20 +1,20 @@
-// Bordered & Pulled
+// bordered + pulled icons
 // -------------------------
 
 .#{$fa-css-prefix}-border {
-  border: solid .08em $fa-border-color;
-  border-radius: .1em;
-  padding: .2em .25em .15em;
+  border-color: var(--#{$fa-css-prefix}-border-color, #{$fa-border-color});
+  border-radius: var(--#{$fa-css-prefix}-border-radius, #{$fa-border-radius});
+  border-style: var(--#{$fa-css-prefix}-border-style, #{$fa-border-style});
+  border-width: var(--#{$fa-css-prefix}-border-width, #{$fa-border-width});
+  padding: var(--#{$fa-css-prefix}-border-padding, #{$fa-border-padding});
 }
 
-.#{$fa-css-prefix}-pull-left { float: left; }
-.#{$fa-css-prefix}-pull-right { float: right; }
-
-.#{$fa-css-prefix},
-.fas,
-.far,
-.fal,
-.fab {
-  &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
-  &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
+.#{$fa-css-prefix}-pull-left { 
+  float: left;
+  margin-right: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
+}
+
+.#{$fa-css-prefix}-pull-right { 
+  float: right;
+  margin-left: var(--#{$fa-css-prefix}-pull-margin, #{$fa-pull-margin}); 
 }

style/fa/_core.scss

@@ -1,19 +1,64 @@
-// Base Class Definition
+// base icon class definition
 // -------------------------
 
+.#{$fa-css-prefix} {
+  font-family: var(--#{$fa-css-prefix}-style-family, '#{$fa-style-family}');
+  font-weight: var(--#{$fa-css-prefix}-style, #{$fa-style});
+}
+
 .#{$fa-css-prefix},
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-sharp,
 .fas,
+.#{$fa-css-prefix}-solid,
 .far,
+.#{$fa-css-prefix}-regular,
 .fal,
+.#{$fa-css-prefix}-light,
+.fat,
+.#{$fa-css-prefix}-thin,
 .fad,
-.fab {
+.#{$fa-css-prefix}-duotone,
+.fass,
+.#{$fa-css-prefix}-sharp-solid,
+.fab,
+.#{$fa-css-prefix}-brands {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  display: inline-block;
+  display: var(--#{$fa-css-prefix}-display, #{$fa-display});
   font-style: normal;
   font-variant: normal;
-  text-rendering: auto;
   line-height: 1;
+  text-rendering: auto;
+}
+
+.fas,
+.#{$fa-css-prefix}-classic,
+.#{$fa-css-prefix}-solid,
+.far,
+.#{$fa-css-prefix}-regular,
+.fal,
+.#{$fa-css-prefix}-light,
+.fat,
+.#{$fa-css-prefix}-thin {
+  font-family: 'Font Awesome 6 Pro';
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+  font-family: 'Font Awesome 6 Brands';
+}
+
+.fad,
+.#{$fa-css-prefix}-classic.#{$fa-css-prefix}-duotone,
+.#{$fa-css-prefix}-duotone {
+  font-family: 'Font Awesome 6 Duotone';
+}
+
+.fass,
+.#{$fa-css-prefix}-sharp {
+  font-family: 'Font Awesome 6 Sharp';
+  font-weight: 900;
 }
 
 %fa-icon {

style/fa/_duotone-icons.scss

@@ -0,0 +1,10 @@
+// specific duotone icon class definition
+// -------------------------
+
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */
+
+@each $name, $icon in $fa-icons {
+  .fad.#{$fa-css-prefix}-#{$name}::after, .#{$fa-css-prefix}-duotone.#{$fa-css-prefix}-#{$name}::after {
+    content: unquote("\"#{ $icon }#{ $icon }\"");
+  }
+}

style/fa/_fixed-width.scss

@@ -1,5 +1,6 @@
-// Fixed Width Icons
+// fixed-width icons
 // -------------------------
+
 .#{$fa-css-prefix}-fw {
   text-align: center;
   width: $fa-fw-width;

style/fa/_functions.scss

@@ -0,0 +1,57 @@
+// functions
+// --------------------------
+
+// fa-content: convenience function used to set content property
+@function fa-content($fa-var) {
+  @return unquote("\"#{ $fa-var }\"");
+}
+
+// fa-divide: Originally obtained from the Bootstrap https://github.com/twbs/bootstrap
+//
+// Licensed under: The MIT License (MIT)
+//
+// Copyright (c) 2011-2021 Twitter, Inc.
+// Copyright (c) 2011-2021 The Bootstrap Authors
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+@function fa-divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  $quotient: 0;
+  $remainder: $dividend;
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  @if $divisor == 1 {
+    @return $dividend;
+  }
+  @while $remainder >= $divisor {
+    $quotient: $quotient + 1;
+    $remainder: $remainder - $divisor;
+  }
+  @if $remainder > 0 and $precision > 0 {
+    $remainder: fa-divide($remainder * 10, $divisor, $precision - 1) * .1;
+  }
+  @return ($quotient + $remainder) * $sign;
+}

style/fa/_larger.scss

@@ -1,23 +0,0 @@
-// Icon Sizes
-// -------------------------
-
-// makes the font 33% larger relative to the icon container
-.#{$fa-css-prefix}-lg {
-  font-size: (4em / 3);
-  line-height: (3em / 4);
-  vertical-align: -.0667em;
-}
-
-.#{$fa-css-prefix}-xs {
-  font-size: .75em;
-}
-
-.#{$fa-css-prefix}-sm {
-  font-size: .875em;
-}
-
-@for $i from 1 through 10 {
-  .#{$fa-css-prefix}-#{$i}x {
-    font-size: $i * 1em;
-  }
-}

style/fa/_list.scss

@@ -1,18 +1,18 @@
-// List Icons
+// icons in a list
 // -------------------------
 
 .#{$fa-css-prefix}-ul {
   list-style-type: none;
-  margin-left: $fa-li-width * 5/4;
+  margin-left: var(--#{$fa-css-prefix}-li-margin, #{$fa-li-margin});
   padding-left: 0;
 
   > li { position: relative; }
 }
 
 .#{$fa-css-prefix}-li {
-  left: -$fa-li-width;
+  left: calc(var(--#{$fa-css-prefix}-li-width, #{$fa-li-width}) * -1);
   position: absolute;
   text-align: center;
-  width: $fa-li-width;
+  width: var(--#{$fa-css-prefix}-li-width, #{$fa-li-width});
   line-height: inherit;
 }

style/fa/_mixins.scss

@@ -1,6 +1,7 @@
-// Mixins
+// mixins
 // --------------------------
 
+// base rendering for an icon
 @mixin fa-icon {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -11,46 +12,110 @@
   line-height: 1;
 }
 
-@mixin fa-icon-rotate($degrees, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-  transform: rotate($degrees);
+// sets relative font-sizing and alignment (in _sizing)
+@mixin fa-size ($font-size) {
+  font-size: fa-divide($font-size, $fa-size-scale-base) * 1em; // converts step in sizing scale into an em-based value that's relative to the scale's base
+  line-height: fa-divide(1, $font-size) * 1em; // sets the line-height of the icon back to that of it's parent
+  vertical-align: (fa-divide(6, $font-size) - fa-divide(3, 8)) * 1em; // vertically centers the icon taking into account the surrounding text's descender
 }
 
-@mixin fa-icon-flip($horiz, $vert, $rotation) {
-  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
-  transform: scale($horiz, $vert);
-}
-
-
-// Only display content to screen readers. A la Bootstrap 4.
-//
-// See: http://a11yproject.com/posts/how-to-hide-content/
-
-@mixin sr-only {
-  border: 0;
-  clip: rect(0, 0, 0, 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
+// only display content to screen readers
+// see: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
+// see: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+@mixin fa-sr-only() {
   position: absolute;
   width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
 }
 
-// Use in conjunction with .sr-only to only display content when it's focused.
-//
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-//
-// Credit: HTML5 Boilerplate
-
-@mixin sr-only-focusable {
-  &:active,
-  &:focus {
-    clip: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    position: static;
-    width: auto;
+// use in conjunction with .sr-only to only display content when it's focused
+@mixin fa-sr-only-focusable() {
+  &:not(:focus) {
+    @include fa-sr-only();
   }
 }
+
+// sets a specific icon family to use alongside style + icon mixins
+@mixin fa-family-classic() {
+  font-family: 'Font Awesome 6 Pro';
+}
+
+@mixin fa-family-sharp() {
+  font-family: 'Font Awesome 6 Sharp';
+}
+
+// convenience mixins for declaring pseudo-elements by CSS variable,
+// including all style-specific font properties, and both the ::before
+// and ::after elements in the duotone case.
+@mixin fa-icon-solid($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-solid;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-regular($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-regular;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-light($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-light;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-thin($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-thin;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-duotone($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-duotone;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+  &::after {
+    content: unquote("\"#{ $fa-var }#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-sharp-solid($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-sharp-solid;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+
+@mixin fa-icon-brands($fa-var) {
+  @extend %fa-icon;
+  @extend .fa-brands;
+
+  &::before {
+    content: unquote("\"#{ $fa-var }\"");
+  }
+}
+

style/fa/_rotated-flipped.scss

@@ -1,24 +1,31 @@
-// Rotated & Flipped Icons
+// rotating + flipping icons
 // -------------------------
 
-.#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
-.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
-.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
-
-.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
-.#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
-.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); }
-
-// Hook for IE8-9
-// -------------------------
-
-:root {
-  .#{$fa-css-prefix}-rotate-90,
-  .#{$fa-css-prefix}-rotate-180,
-  .#{$fa-css-prefix}-rotate-270,
-  .#{$fa-css-prefix}-flip-horizontal,
-  .#{$fa-css-prefix}-flip-vertical,
-  .#{$fa-css-prefix}-flip-both {
-    filter: none;
-  }
+.#{$fa-css-prefix}-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.#{$fa-css-prefix}-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.#{$fa-css-prefix}-rotate-270 {
+  transform: rotate(270deg);
+}
+
+.#{$fa-css-prefix}-flip-horizontal {
+  transform: scale(-1, 1);
+}
+
+.#{$fa-css-prefix}-flip-vertical {
+  transform: scale(1, -1);
+}
+
+.#{$fa-css-prefix}-flip-both,
+.#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { 
+  transform: scale(-1, -1);
+}
+
+.#{$fa-css-prefix}-rotate-by {
+  transform: rotate(var(--#{$fa-css-prefix}-rotate-angle, none));
 }

style/fa/_screen-reader.scss

@@ -1,5 +1,14 @@
-// Screen Readers
+// screen-reader utilities
 // -------------------------
 
-.sr-only { @include sr-only; }
-.sr-only-focusable { @include sr-only-focusable; }
+// only display content to screen readers
+.sr-only,
+.#{$fa-css-prefix}-sr-only {
+  @include fa-sr-only;
+}
+
+// use in conjunction with .sr-only to only display content when it's focused
+.sr-only-focusable,
+.#{$fa-css-prefix}-sr-only-focusable {
+  @include fa-sr-only-focusable;
+}

style/fa/_sizing.scss

@@ -0,0 +1,16 @@
+// sizing icons
+// -------------------------
+
+// literal magnification scale
+@for $i from 1 through 10 {
+  .#{$fa-css-prefix}-#{$i}x {
+    font-size: $i * 1em;
+  }
+}
+
+// step-based scale (with alignment)
+@each $size, $value in $fa-sizes {
+  .#{$fa-css-prefix}-#{$size} {
+     @include fa-size($value);
+  }
+}

style/fa/_stacked.scss

@@ -1,4 +1,4 @@
-// Stacked Icons
+// stacking icons
 // -------------------------
 
 .#{$fa-css-prefix}-stack {
@@ -6,8 +6,8 @@
   height: 2em;
   line-height: 2em;
   position: relative;
-  vertical-align: middle;
-  width: ($fa-fw-width*2);
+  vertical-align: $fa-stack-vertical-align;
+  width: $fa-stack-width;
 }
 
 .#{$fa-css-prefix}-stack-1x,
@@ -16,6 +16,7 @@
   position: absolute;
   text-align: center;
   width: 100%;
+  z-index: var(--#{$fa-css-prefix}-stack-z-index, #{$fa-stack-z-index});
 }
 
 .#{$fa-css-prefix}-stack-1x {
@@ -27,5 +28,5 @@
 }
 
 .#{$fa-css-prefix}-inverse {
-  color: $fa-inverse;
+  color: var(--#{$fa-css-prefix}-inverse, #{$fa-inverse});
 }

style/fa/brands.scss

@@ -1,23 +1,30 @@
 /*!
- * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
  */
+@import 'functions';
 @import 'variables';
 
+:root, :host {
+  --#{$fa-css-prefix}-style-family-brands: 'Font Awesome 6 Brands';
+  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
+}
+
 @font-face {
-  font-family: 'Font Awesome 5 Brands';
+  font-family: 'Font Awesome 6 Brands';
   font-style: normal;
   font-weight: 400;
   font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-brands-400.eot');
-  src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-brands-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg');
+  src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
 }
 
-.fab {
-  font-family: 'Font Awesome 5 Brands';
+.fab,
+.#{$fa-css-prefix}-brands {
   font-weight: 400;
 }
+
+@each $name, $icon in $fa-brand-icons {
+  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
+}

style/fa/fontawesome.scss

@@ -1,11 +1,16 @@
 /*!
- * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
  */
+// Font Awesome core compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
 @import 'variables';
 @import 'mixins';
 @import 'core';
-@import 'larger';
+@import 'sizing';
 @import 'fixed-width';
 @import 'list';
 @import 'bordered-pulled';

style/fa/light.scss

@@ -1,23 +1,26 @@
 /*!
- * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
  */
+@import 'functions';
 @import 'variables';
 
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-light: normal 300 1em/1 '#{ $fa-style-family }';
+}
+
 @font-face {
-  font-family: 'Font Awesome 5 Pro';
+  font-family: 'Font Awesome 6 Pro';
   font-style: normal;
   font-weight: 300;
   font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-light-300.eot');
-  src: url('#{$fa-font-path}/fa-light-300.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-light-300.woff') format('woff'),
-  url('#{$fa-font-path}/fa-light-300.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-light-300.svg#fontawesome') format('svg');
+  src: url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-light-300.ttf') format('truetype');
 }
 
-.fal {
-  font-family: 'Font Awesome 5 Pro';
+.fal,
+.#{$fa-css-prefix}-light {
   font-weight: 300;
 }

style/fa/regular.scss

@@ -1,23 +1,26 @@
 /*!
- * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
  */
+@import 'functions';
 @import 'variables';
 
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-regular: normal 400 1em/1 '#{ $fa-style-family }';
+}
+
 @font-face {
-  font-family: 'Font Awesome 5 Pro';
+  font-family: 'Font Awesome 6 Pro';
   font-style: normal;
   font-weight: 400;
   font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-regular-400.eot');
-  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
-  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
+  src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
 }
 
-.far {
-  font-family: 'Font Awesome 5 Pro';
+.far,
+.#{$fa-css-prefix}-regular {
   font-weight: 400;
 }

style/fa/sharp-solid.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-sharp: 'Font Awesome 6 Sharp';
+  --#{$fa-css-prefix}-font-sharp-solid: normal 900 1em/1 'Font Awesome 6 Sharp';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Sharp';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-sharp-solid-900.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-sharp-solid-900.ttf') format('truetype');
+}
+
+.fass,
+.#{$fa-css-prefix}-sharp-solid {
+  font-weight: 900;
+}

style/fa/solid.scss

@@ -1,24 +1,26 @@
-/*
- * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
  */
+@import 'functions';
 @import 'variables';
 
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-solid: normal 900 1em/1 '#{ $fa-style-family }';
+}
+
 @font-face {
-  font-family: 'Font Awesome 5 Pro';
+  font-family: 'Font Awesome 6 Pro';
   font-style: normal;
   font-weight: 900;
   font-display: $fa-font-display;
-  src: url('#{$fa-font-path}/fa-solid-900.eot');
-  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
-  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
-  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
-  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
-  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
+  src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
 }
 
-.fa,
-.fas {
-  font-family: 'Font Awesome 5 Pro';
+.fas,
+.#{$fa-css-prefix}-solid {
   font-weight: 900;
 }

style/fa/thin.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-style-family-classic: '#{ $fa-style-family }';
+  --#{$fa-css-prefix}-font-thin: normal 100 1em/1 '#{ $fa-style-family }';
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Pro';
+  font-style: normal;
+  font-weight: 100;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-thin-100.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-thin-100.ttf') format('truetype');
+}
+
+.fat,
+.#{$fa-css-prefix}-thin {
+  font-weight: 100;
+}

style/fa/v4-shims.scss

@@ -1,6 +1,11 @@
 /*!
- * Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com
+ * Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2022 Fonticons, Inc.
  */
+// V4 shims compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
 @import 'variables';
 @import 'shims';