From 5efb9349adb72cecdbc7bcb9522e0dc1183a83eb Mon Sep 17 00:00:00 2001
From: Francesco Lodolo <flodolo@mozilla.com>
Date: Mon, 6 Jan 2025 18:24:00 +0100
Subject: [PATCH] Use 'fas' instead of 'fa' for Font Awesome (#3509)

Also: Fix unreviewed (lightbulb) icon alignment
---
 pontoon/administration/templates/admin.html   |  2 +-
 pontoon/base/static/css/check-box.css         |  2 +-
 pontoon/base/static/css/download_selector.css |  6 ++---
 pontoon/base/static/css/heading_info.css      |  9 ++++---
 pontoon/base/static/css/style.css             | 26 +++++++++----------
 pontoon/base/static/css/table.css             |  6 ++---
 pontoon/base/static/js/table.js               |  2 +-
 pontoon/base/templates/django/base.html       | 20 +++++++-------
 .../socialaccount/authentication_error.html   |  2 +-
 pontoon/base/templates/header.html            | 16 ++++++------
 pontoon/base/templates/no_projects.html       |  2 +-
 pontoon/base/templates/widgets/checkbox.html  |  2 +-
 .../base/templates/widgets/heading_info.html  |  6 ++---
 .../templates/widgets/item_selector_list.html |  4 +--
 pontoon/base/templates/widgets/menu.html      |  2 +-
 pontoon/base/templates/widgets/priority.html  |  2 +-
 pontoon/base/templates/widgets/profile.html   |  2 +-
 .../templates/widgets/progress_chart.html     |  2 +-
 .../base/templates/widgets/theme_toggle.html  |  4 +--
 .../contributors/static/css/contributors.css  |  2 +-
 pontoon/contributors/static/css/settings.css  |  4 +--
 .../templates/contributors/profile.html       | 26 +++++++++----------
 .../widgets/contributor_selector_list.html    |  4 +--
 .../widgets/notifications_menu.html           |  2 +-
 pontoon/homepage/static/css/homepage.css      |  2 +-
 pontoon/homepage/templates/homepage.html      |  2 +-
 .../homepage/templates/homepage_content.html  |  2 +-
 .../insights/static/css/insights_charts.css   |  6 ++---
 .../templates/insights/widgets/tooltip.html   |  2 +-
 .../localizations/includes/resources.html     |  2 +-
 .../localizations/includes/tags.html          |  2 +-
 .../localizations/widgets/resource_list.html  | 12 ++++-----
 .../templates/machinery/machinery.html        |  4 +--
 pontoon/messaging/static/css/messaging.css    |  4 +--
 .../templates/messaging/includes/compose.html |  8 +++---
 .../templates/messaging/includes/sent.html    |  4 +--
 .../templates/projects/includes/tags.html     |  2 +-
 .../templates/projects/includes/teams.html    |  4 +--
 .../projects/templates/projects/projects.html |  2 +-
 .../projects/widgets/project_list.html        | 18 ++++++-------
 pontoon/sync/templates/sync/log_list.html     |  4 +--
 .../tags/templates/tags/widgets/tag_list.html | 10 +++----
 pontoon/teams/static/css/info.css             |  2 +-
 pontoon/teams/static/css/team.css             |  2 +-
 .../teams/static/css/translation_memory.css   | 12 ++++-----
 pontoon/teams/static/js/bugzilla.js           |  8 +++---
 pontoon/teams/static/js/request.js            |  2 +-
 .../teams/templates/teams/includes/info.html  |  2 +-
 .../templates/teams/includes/permissions.html |  6 ++---
 .../templates/teams/includes/projects.html    |  6 ++---
 .../teams/includes/translation_memory.html    |  8 +++---
 pontoon/teams/templates/teams/teams.html      |  4 +--
 .../templates/teams/widgets/team_list.html    | 14 +++++-----
 .../teams/widgets/team_selector.html          |  2 +-
 .../teams/widgets/team_selector_list.html     |  4 +--
 .../widgets/translation_memory_entries.html   | 10 +++----
 .../components/ApproveAll.test.js             |  8 +++---
 .../batchactions/components/ApproveAll.tsx    |  2 +-
 .../batchactions/components/BatchActions.css  |  4 +--
 .../batchactions/components/BatchActions.tsx  |  6 ++---
 .../batchactions/components/RejectAll.test.js |  8 +++---
 .../batchactions/components/RejectAll.tsx     |  2 +-
 .../components/ReplaceAll.test.js             |  8 +++---
 .../batchactions/components/ReplaceAll.tsx    |  2 +-
 .../comments/components/AddComment.tsx        |  2 +-
 .../modules/comments/components/Comment.css   |  2 +-
 .../modules/comments/components/Comment.tsx   |  2 +-
 .../editor/components/EditorMainAction.tsx    |  2 +-
 .../modules/editor/components/EditorMenu.css  |  2 +-
 .../editor/components/EditorSettings.css      |  6 ++---
 .../editor/components/EditorSettings.tsx      |  6 ++---
 .../entitieslist/components/EntitiesList.css  |  4 +--
 .../entitieslist/components/EntitiesList.tsx  |  6 ++---
 .../entitieslist/components/Entity.css        |  2 +-
 .../entitieslist/components/Entity.tsx        |  4 +--
 .../components/EntityNavigation.css           |  2 +-
 .../components/EntityNavigation.tsx           |  8 +++---
 .../history/components/HistoryTranslation.css |  2 +-
 .../history/components/HistoryTranslation.tsx | 18 ++++++-------
 .../loaders/components/SkeletonLoader.tsx     |  2 +-
 .../machinery/components/Machinery.tsx        |  6 ++---
 .../components/MachineryTranslation.tsx       |  2 +-
 .../components/source/GoogleTranslation.tsx   |  2 +-
 .../project/components/ProjectMenu.tsx        |  6 ++---
 .../projectinfo/components/ProjectInfo.tsx    |  2 +-
 .../resource/components/ResourceMenu.tsx      |  6 ++---
 .../search/components/FiltersPanel.css        | 10 ++++---
 .../search/components/FiltersPanel.tsx        | 20 ++++++++------
 .../modules/search/components/SearchBox.css   |  6 ++---
 .../modules/search/components/SearchPanel.css |  6 ++---
 .../modules/search/components/SearchPanel.tsx |  8 +++---
 .../search/components/TimeRangeFilter.css     |  2 +-
 .../search/components/TimeRangeFilter.tsx     |  4 +--
 .../modules/user/components/FileUpload.tsx    |  2 +-
 .../src/modules/user/components/UserMenu.css  |  2 +-
 .../src/modules/user/components/UserMenu.tsx  | 26 +++++++++----------
 .../user/components/UserNotificationsMenu.tsx |  2 +-
 97 files changed, 278 insertions(+), 271 deletions(-)

diff --git a/pontoon/administration/templates/admin.html b/pontoon/administration/templates/admin.html
index 00023ba0c4..b771f43089 100644
--- a/pontoon/administration/templates/admin.html
+++ b/pontoon/administration/templates/admin.html
@@ -15,7 +15,7 @@
   <div class="container">
     <menu class="controls">
       <div class="search-wrapper big clearfix">
-        <div class="icon fa fa-search"></div>
+        <div class="icon fas fa-search"></div>
         <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter projects">
       </div>
       <a class="add button small" href="{{ url('pontoon.admin.project.new') }}">Add new project</a>
diff --git a/pontoon/base/static/css/check-box.css b/pontoon/base/static/css/check-box.css
index dc422df264..e2a740c526 100644
--- a/pontoon/base/static/css/check-box.css
+++ b/pontoon/base/static/css/check-box.css
@@ -34,7 +34,7 @@
     color: var(--white-1);
   }
 
-  .fa {
+  .fas {
     margin-left: 23px;
     margin-right: 0;
   }
diff --git a/pontoon/base/static/css/download_selector.css b/pontoon/base/static/css/download_selector.css
index c138fe15df..d5912c898e 100644
--- a/pontoon/base/static/css/download_selector.css
+++ b/pontoon/base/static/css/download_selector.css
@@ -7,7 +7,7 @@
   padding-top: 0;
 }
 
-.download-selector .selector .fa {
+.download-selector .selector .fas {
   float: right;
   background: var(--button-background-2);
   border-radius: 3px;
@@ -20,11 +20,11 @@
   text-align: center;
 }
 
-.download-selector .selector .fa:hover {
+.download-selector .selector .fas:hover {
   background: var(--button-background-hover-2);
 }
 
-.download-selector.opened .selector .fa {
+.download-selector.opened .selector .fas {
   background: var(--button-background-hover-2);
   border-radius: 2px 2px 0 0;
 }
diff --git a/pontoon/base/static/css/heading_info.css b/pontoon/base/static/css/heading_info.css
index f565d6824e..dfa549406f 100644
--- a/pontoon/base/static/css/heading_info.css
+++ b/pontoon/base/static/css/heading_info.css
@@ -130,7 +130,7 @@ ul {
   color: var(--status-translated);
 }
 
-#heading .legend li .status.fa {
+#heading .legend li .status.fas {
   left: 0;
   top: 4px;
 }
@@ -176,17 +176,18 @@ ul {
   padding-bottom: 21px;
 }
 
-#heading .non-plottable .unreviewed .status.fa {
+#heading .non-plottable .unreviewed .status.fas {
   left: auto;
   position: relative;
   top: -1px;
+  left: -0.5px;
 }
 
-#heading .non-plottable .unreviewed .status.fa:before {
+#heading .non-plottable .unreviewed .status.fas:before {
   color: var(--icon-background-2);
   font-size: 18px;
 }
 
-#heading .non-plottable .unreviewed.pending .status.fa:before {
+#heading .non-plottable .unreviewed.pending .status.fas:before {
   color: var(--status-unreviewed);
 }
diff --git a/pontoon/base/static/css/style.css b/pontoon/base/static/css/style.css
index 807f6f1934..1f29f6aa5a 100755
--- a/pontoon/base/static/css/style.css
+++ b/pontoon/base/static/css/style.css
@@ -9,35 +9,35 @@
   font-size: 0.9em;
 }
 
-.status.fa {
+.status.fas {
   font-size: 16px;
   left: 20px;
   position: absolute;
   top: 3px;
 }
 
-.status.fa:before {
+.status.fas:before {
   color: var(--status-missing);
   content: '';
 }
 
-.translated .status.fa:before {
+.translated .status.fas:before {
   color: var(--status-translated);
 }
 
-.pretranslated .status.fa:before {
+.pretranslated .status.fas:before {
   color: var(--status-pretranslated);
 }
 
-.warnings .status.fa:before {
+.warnings .status.fas:before {
   color: var(--status-warning);
 }
 
-.errors .status.fa:before {
+.errors .status.fas:before {
   color: var(--status-error);
 }
 
-.unreviewed .status.fa:before {
+.unreviewed .status.fas:before {
   color: var(--status-unreviewed);
   content: '';
 }
@@ -81,7 +81,7 @@ button {
   outline: none;
 }
 
-/* Reset values for Persian (fa) to avoid colision with Font Awesome */
+/* Reset values for Persian (fa) to avoid collision with Font Awesome */
 .language.fa {
   font-family: inherit;
   font-weight: inherit;
@@ -950,7 +950,7 @@ header .right .select .menu {
   line-height: 22px;
 }
 
-#profile .menu li i.fa,
+#profile .menu li i.fas,
 #profile .menu li i.fab {
   margin: 0 8px 0 -2px;
 }
@@ -1077,7 +1077,7 @@ nav .links li {
   color: var(--white-1);
 }
 
-.submenu.tabs .links a .fa {
+.submenu.tabs .links a .fas {
   margin-right: 4px;
 }
 
@@ -1150,17 +1150,17 @@ body > form,
   user-select: none;
 }
 
-.check-box .fa {
+.check-box .fas {
   margin-right: 6px;
 }
 
-.check-box .fa:before {
+.check-box .fas:before {
   color: var(--toggle-color-1);
   content: '';
   font-weight: normal;
 }
 
-.check-box.enabled .fa:before {
+.check-box.enabled .fas:before {
   color: var(--status-translated);
   content: '';
   font-weight: bold;
diff --git a/pontoon/base/static/css/table.css b/pontoon/base/static/css/table.css
index 2c1754b5e6..1f13f60cdf 100644
--- a/pontoon/base/static/css/table.css
+++ b/pontoon/base/static/css/table.css
@@ -76,7 +76,7 @@ table.table.project-list.hidden {
 .table .unreviewed-status span {
   position: absolute;
   font-size: 18px;
-  margin: -15px 0 0 -5px;
+  margin: -15px 0 0 -4.5px;
 }
 
 .table .progress {
@@ -152,7 +152,7 @@ table.table.project-list.hidden {
   padding-left: 15px;
 }
 
-.table td.priority .fa {
+.table td.priority .fas {
   margin-left: -1px;
   font-size: 12px;
 }
@@ -276,7 +276,7 @@ table.table.project-list.hidden {
   color: var(--icon-background-1);
   font-size: 18px;
   position: absolute;
-  right: 0;
+  right: 0.5px;
   top: -9px;
 }
 
diff --git a/pontoon/base/static/js/table.js b/pontoon/base/static/js/table.js
index 9c64ff2bde..e693da80d8 100644
--- a/pontoon/base/static/js/table.js
+++ b/pontoon/base/static/js/table.js
@@ -37,7 +37,7 @@ $('body')
 
       $element.after(
         '<aside class="tooltip">' +
-          '<span class="quote fa fa-2x fa-quote-right"></span>' +
+          '<span class="quote fas fa-quote-right fa-2x"></span>' +
           '<p class="translation">' +
           translation +
           '</p>' +
diff --git a/pontoon/base/templates/django/base.html b/pontoon/base/templates/django/base.html
index 992f274051..f75939d42b 100644
--- a/pontoon/base/templates/django/base.html
+++ b/pontoon/base/templates/django/base.html
@@ -64,21 +64,21 @@
                 {% if user.is_authenticated %}
                   <img class="rounded" src="{{ request.user.gravatar_url_small }}" width="44" height="44">
                 {% else %}
-                  <div class="menu-icon fa fa-bars"></div>
+                  <div class="menu-icon fas fa-bars"></div>
                 {% endif %}
               </div>
               <div class="menu">
                 <ul>
                   {% if user.is_authenticated %}
-                  <li><a href="{% url 'pontoon.contributors.contributor.username' username=user %}"><i class="fa fa-user fa-fw"></i>My Profile</a></li>
-                  <li><a href="{% url 'pontoon.contributors.settings' %}"><i class="fa fa-cog fa-fw"></i>Change Settings</a></li>
+                  <li><a href="{% url 'pontoon.contributors.contributor.username' username=user %}"><i class="fas fa-user fa-fw"></i>My Profile</a></li>
+                  <li><a href="{% url 'pontoon.contributors.settings' %}"><i class="fas fa-cog fa-fw"></i>Change Settings</a></li>
                   <li class="horizontal-separator"></li>
                   {% endif %}
 
-                  <li><a href="{% url 'pontoon.terms' %}" rel="noopener noreferrer" target="_blank"><i class="fa fa-gavel fa-fw"></i>Terms of Use</a></li>
+                  <li><a href="{% url 'pontoon.terms' %}" rel="noopener noreferrer" target="_blank"><i class="fas fa-gavel fa-fw"></i>Terms of Use</a></li>
                   <li><a href="https://github.com/mozilla/pontoon/" rel="noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>Hack it on GitHub</a></li>
-                  <li><a href="https://discourse.mozilla.org/c/pontoon" rel="noopener noreferrer" target="_blank"><i class="fa fa-comment-dots fa-fw"></i>Give Feedback</a></li>
-                  <li><a href="https://mozilla-l10n.github.io/localizer-documentation/tools/pontoon/" rel="noopener noreferrer" target="_blank"><i class="fa fa-life-ring fa-fw"></i>Help</a></li>
+                  <li><a href="https://discourse.mozilla.org/c/pontoon" rel="noopener noreferrer" target="_blank"><i class="fas fa-comment-dots fa-fw"></i>Give Feedback</a></li>
+                  <li><a href="https://mozilla-l10n.github.io/localizer-documentation/tools/pontoon/" rel="noopener noreferrer" target="_blank"><i class="fas fa-life-ring fa-fw"></i>Help</a></li>
 
                   <li class="horizontal-separator"></li>
 
@@ -88,18 +88,18 @@
 
                   {% if settings.AUTHENTICATION_METHOD == 'django' %}
                     {% if user.is_authenticated %}
-                      <li id="standalone-sign-out"><a href="{% url 'standalone_logout' %}" title="{{ user.email|nospam }}"><i class="fa fa-sign-out-alt fa-fw"></i>Sign out</a></li>
+                      <li id="standalone-sign-out"><a href="{% url 'standalone_logout' %}" title="{{ user.email|nospam }}"><i class="fas fa-sign-out-alt fa-fw"></i>Sign out</a></li>
                     {% else %}
-                      <li id="standalone-signin"><a href="{% url 'standalone_login' %}?next={{ request.get_full_path|urlencode }}"><i class="fa fa-sign-in-alt fa-fw"></i>Sign in</a></li>
+                      <li id="standalone-signin"><a href="{% url 'standalone_login' %}?next={{ request.get_full_path|urlencode }}"><i class="fas fa-sign-in-alt fa-fw"></i>Sign in</a></li>
                     {% endif %}
                   {% else %}
                     {% if user.is_authenticated %}
-                      <li id="sign-out"><a href="{% url 'account_logout' %}" title="{{ user.email|nospam }}">{{ SignOut.csrf_form }}<i class="fa fa-sign-out-alt fa-fw"></i>Sign out</a></li>
+                      <li id="sign-out"><a href="{% url 'account_logout' %}" title="{{ user.email|nospam }}">{{ SignOut.csrf_form }}<i class="fas fa-sign-out-alt fa-fw"></i>Sign out</a></li>
                     {% else %}
                       <li id="sign-in">
                         <form action="{{ provider_login_url }}?next={{ request.get_full_path|urlencode }}" method="post">
                           {% csrf_token %}
-                          <i class="fa fa-sign-in-alt fa-fw"></i>
+                          <i class="fas fa-sign-in-alt fa-fw"></i>
                           <button type="submit">Sign in</button>
                         </form>
                       </li>
diff --git a/pontoon/base/templates/django/socialaccount/authentication_error.html b/pontoon/base/templates/django/socialaccount/authentication_error.html
index a95c3ff7f2..af10286f8f 100644
--- a/pontoon/base/templates/django/socialaccount/authentication_error.html
+++ b/pontoon/base/templates/django/socialaccount/authentication_error.html
@@ -8,7 +8,7 @@ <h2 id="subtitle">An error occurred while attempting to sign in.</h2>
 <div id="action">
     <form action="{{ provider_login_url }}?next={{ request.get_full_path|urlencode }}" method="post">
         {% csrf_token %}
-        <i class="fa fa-sign-in-alt fa-fw"></i>
+        <i class="fas fa-sign-in-alt fa-fw"></i>
         <button type="submit">Try again</button>
       </form>
 </div>
diff --git a/pontoon/base/templates/header.html b/pontoon/base/templates/header.html
index 35c1431586..9ac56f1335 100644
--- a/pontoon/base/templates/header.html
+++ b/pontoon/base/templates/header.html
@@ -49,29 +49,29 @@
               <li class="horizontal-separator"></li>
               {% endif %}
 
-              <li><a href="{{ url('pontoon.terms') }}" rel="noopener noreferrer" target="_blank"><i class="fa fa-gavel fa-fw"></i>Terms of Use</a></li>
+              <li><a href="{{ url('pontoon.terms') }}" rel="noopener noreferrer" target="_blank"><i class="fas fa-gavel fa-fw"></i>Terms of Use</a></li>
               <li><a href="https://github.com/mozilla/pontoon/" rel="noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>Hack it on GitHub</a></li>
-              <li><a href="https://discourse.mozilla.org/c/pontoon" rel="noopener noreferrer" target="_blank"><i class="fa fa-comment-dots fa-fw"></i>Give Feedback</a></li>
-              <li><a href="https://mozilla-l10n.github.io/localizer-documentation/tools/pontoon/" rel="noopener noreferrer" target="_blank"><i class="fa fa-life-ring fa-fw"></i>Help</a></li>
+              <li><a href="https://discourse.mozilla.org/c/pontoon" rel="noopener noreferrer" target="_blank"><i class="fas fa-comment-dots fa-fw"></i>Give Feedback</a></li>
+              <li><a href="https://mozilla-l10n.github.io/localizer-documentation/tools/pontoon/" rel="noopener noreferrer" target="_blank"><i class="fas fa-life-ring fa-fw"></i>Help</a></li>
 
               {% if user.is_authenticated %}
               <li class="horizontal-separator"></li>
               {% endif %}
 
               {% if perms.base.can_manage_project %}
-              <li><a href="{{ url('pontoon.admin') }}"><i class="fa fa-wrench fa-fw"></i>Admin</a></li>
+              <li><a href="{{ url('pontoon.admin') }}"><i class="fas fa-wrench fa-fw"></i>Admin</a></li>
                 {% if project %}
-                <li><a href="{{ url('pontoon.admin.project', project.slug) }}"><i class="fa fa-wrench fa-fw"></i>Admin &middot; Current Project</a></li>
+                <li><a href="{{ url('pontoon.admin.project', project.slug) }}"><i class="fas fa-wrench fa-fw"></i>Admin &middot; Current Project</a></li>
                 {% endif %}
               {% endif %}
 
               {% if user.is_authenticated %}
-                <li><a href="{{ url('pontoon.contributors.settings') }}"><i class="fa fa-cog fa-fw"></i>Settings</a></li>
+                <li><a href="{{ url('pontoon.contributors.settings') }}"><i class="fas fa-cog fa-fw"></i>Settings</a></li>
 
                 {% if settings.AUTHENTICATION_METHOD == 'django' %}
-                <li id="standalone-sign-out"><a href="{{ url('standalone_logout') }}" title="{{ user.email|nospam }}"><i class="fa fa-sign-out-alt fa-fw"></i>Sign out</a></li>
+                <li id="standalone-sign-out"><a href="{{ url('standalone_logout') }}" title="{{ user.email|nospam }}"><i class="fas fa-sign-out-alt fa-fw"></i>Sign out</a></li>
                 {% else %}
-                <li id="sign-out"><a href="{{ url('account_logout') }}" title="{{ user.email|nospam }}">{{ SignOut.csrf_form() }}<i class="fa fa-sign-out-alt fa-fw"></i>Sign out</a></li>
+                <li id="sign-out"><a href="{{ url('account_logout') }}" title="{{ user.email|nospam }}">{{ SignOut.csrf_form() }}<i class="fas fa-sign-out-alt fa-fw"></i>Sign out</a></li>
                 {% endif %}
 
               {% endif %}
diff --git a/pontoon/base/templates/no_projects.html b/pontoon/base/templates/no_projects.html
index 4a8e289ea9..5e6ac516d7 100644
--- a/pontoon/base/templates/no_projects.html
+++ b/pontoon/base/templates/no_projects.html
@@ -7,7 +7,7 @@
   <div class="inner">
     <div id="box">
       <a href={{ url('pontoon.admin.project.new') }}>
-        <div class="fa fa-box-open"></div>
+        <div class="fas fa-box-open"></div>
       </a>
       <p>There are no projects to localize yet.</p>
     </div>
diff --git a/pontoon/base/templates/widgets/checkbox.html b/pontoon/base/templates/widgets/checkbox.html
index 7dbebf3ba2..01875207e6 100644
--- a/pontoon/base/templates/widgets/checkbox.html
+++ b/pontoon/base/templates/widgets/checkbox.html
@@ -2,7 +2,7 @@
 <div class="check-box {{ class }}{% if is_enabled %} enabled{% endif %}" data-attribute="{{ attribute }}"{% if title %} title="{{title}}"{% endif %}>
     <div class="check-box-wrapper">
         <span class="label">{{ label }}</span>
-        <i class="fa fa-fw"></i>
+        <i class="fas fa-fw"></i>
     </div>
     {% if help %}
     <p class="help">{{ help|safe }}</p>
diff --git a/pontoon/base/templates/widgets/heading_info.html b/pontoon/base/templates/widgets/heading_info.html
index ee72c29888..50900275e9 100644
--- a/pontoon/base/templates/widgets/heading_info.html
+++ b/pontoon/base/templates/widgets/heading_info.html
@@ -71,7 +71,7 @@
 <li class="{{ class }}">
   {% if link %}<a href="{{ link }}">{% endif %}
     {% if class != 'all' %}
-      <span class="fa status"></span>
+      <span class="fas status"></span>
     {% endif %}
     {{ title }}
     <span class="value" data-value="{{ value }}">{{ value|intcomma }}</span>
@@ -123,7 +123,7 @@
     {% if link %}<a href="{{ link + '?status=unreviewed' }}">{% endif %}
       <p class="title">Unreviewed</p>
       <p class="value">
-        <span class="fa status"></span>
+        <span class="fas status"></span>
         <span class="text">{{ obj.unreviewed_strings|intcomma }}</span>
       </p>
     {% if link %}</a>{% endif %}
@@ -134,7 +134,7 @@
 {% macro download_selector(locale, project) %}
 <div class="download-selector select">
   <div class="button selector">
-    <i class="fa fa-cloud-download-alt"></i>
+    <i class="fas fa-cloud-download-alt"></i>
   </div>
   <div class="menu">
       <ul>
diff --git a/pontoon/base/templates/widgets/item_selector_list.html b/pontoon/base/templates/widgets/item_selector_list.html
index b93f00ffe2..051ba3e7d9 100644
--- a/pontoon/base/templates/widgets/item_selector_list.html
+++ b/pontoon/base/templates/widgets/item_selector_list.html
@@ -12,13 +12,13 @@
 
     <div class="menu permanent">
         <div class="search-wrapper clearfix">
-            <div class="icon fa fa-search"></div>
+            <div class="icon fas fa-search"></div>
             <input id="{{ id }}" type="search" autocomplete="off">
         </div>
         <ul class="{% if sortable %}sortable{% endif %}">
             {% for item in items %}
             <li class="clearfix" data-id="{{ item.id }}">
-                <span class="arrow fa"></span>
+                <span class="arrow fas"></span>
                 <span class="item">{{ item.name }}</span>
             </li>
             {% endfor %}
diff --git a/pontoon/base/templates/widgets/menu.html b/pontoon/base/templates/widgets/menu.html
index 91ab1b089f..be364c6c97 100644
--- a/pontoon/base/templates/widgets/menu.html
+++ b/pontoon/base/templates/widgets/menu.html
@@ -11,7 +11,7 @@
 {% macro item(label, url, is_active, count=0, class=None, icon=None) %}
   <li {% if is_active %}class="active"{% endif %}>
     <a href="{{ url }}"{% if class %} class="button"{% endif %}>
-        {% if icon %}<i class="fa fa-{{ icon }}"></i>{% endif %}
+        {% if icon %}<i class="fas fa-{{ icon }}"></i>{% endif %}
         {{ label }}
         {% if count > 0 %}<span class="count">{{ count }}</span>{% endif %}
     </a>
diff --git a/pontoon/base/templates/widgets/priority.html b/pontoon/base/templates/widgets/priority.html
index 1861d4386e..125346f711 100644
--- a/pontoon/base/templates/widgets/priority.html
+++ b/pontoon/base/templates/widgets/priority.html
@@ -1,5 +1,5 @@
 {% macro priority(priority) %}
   {% for n in range(5) %}
-  <span class="fa fa-star{% if priority and loop.index <= priority %}{{ ' active' }}{% endif %}"></span>
+  <span class="fas fa-star{% if priority and loop.index <= priority %}{{ ' active' }}{% endif %}"></span>
   {% endfor %}
 {% endmacro %}
diff --git a/pontoon/base/templates/widgets/profile.html b/pontoon/base/templates/widgets/profile.html
index 1728f976da..daf92583fd 100644
--- a/pontoon/base/templates/widgets/profile.html
+++ b/pontoon/base/templates/widgets/profile.html
@@ -3,7 +3,7 @@
   {% if user.is_authenticated %}
     <img class="rounded" src="{{ user.gravatar_url(88) }}" width="44" height="44">
   {% else %}
-    <div class="menu-icon fa fa-bars"></div>
+    <div class="menu-icon fas fa-bars"></div>
   {% endif %}
 </div>
 {% endmacro %}
diff --git a/pontoon/base/templates/widgets/progress_chart.html b/pontoon/base/templates/widgets/progress_chart.html
index 376c4c33d0..6f8eda0870 100644
--- a/pontoon/base/templates/widgets/progress_chart.html
+++ b/pontoon/base/templates/widgets/progress_chart.html
@@ -9,7 +9,7 @@
       <span class="errors" style="width:{{ chart.errors_share }}%;"></span>
       <span class="missing" style="width:{{ 100 - chart.approved_share - chart.pretranslated_share - chart.warnings_share - chart.errors_share }}%;"></span>
     </span>
-    <span class="unreviewed-status fa fa-lightbulb{% if chart.unreviewed_strings > 0 %} pending{% endif %}"></span>
+    <span class="unreviewed-status fas fa-lightbulb{% if chart.unreviewed_strings > 0 %} pending{% endif %}"></span>
   </div>
   <div class="legend">
     <ul>
diff --git a/pontoon/base/templates/widgets/theme_toggle.html b/pontoon/base/templates/widgets/theme_toggle.html
index b8ad7d9b2b..c169d64d21 100644
--- a/pontoon/base/templates/widgets/theme_toggle.html
+++ b/pontoon/base/templates/widgets/theme_toggle.html
@@ -5,7 +5,7 @@
 {% set system = "Match system" if long_name else "System" %}
 <span class="toggle-button">
     <button type="button" value="dark" class="dark {% if user.profile.theme == 'dark' %}active{% endif %}" title="Use a dark theme"><i class="icon far fa-moon"></i>{{ dark }}</button>
-    <button type="button" value="light" class="light {% if user.profile.theme == 'light' %}active{% endif %}" title="Use a light theme"><i class="icon fa fa-sun"></i>{{ light }}</button>
-    <button type="button" value="system" class="system {% if user.profile.theme == 'system' %}active{% endif %}" title="Use a theme that matches your system settings"><i class="icon fa fa-laptop"></i>{{ system }}</button>
+    <button type="button" value="light" class="light {% if user.profile.theme == 'light' %}active{% endif %}" title="Use a light theme"><i class="icon fas fa-sun"></i>{{ light }}</button>
+    <button type="button" value="system" class="system {% if user.profile.theme == 'system' %}active{% endif %}" title="Use a theme that matches your system settings"><i class="icon fas fa-laptop"></i>{{ system }}</button>
 </span>
 {% endmacro %}
diff --git a/pontoon/contributors/static/css/contributors.css b/pontoon/contributors/static/css/contributors.css
index 0d6324b2c9..524b27f6ee 100644
--- a/pontoon/contributors/static/css/contributors.css
+++ b/pontoon/contributors/static/css/contributors.css
@@ -15,7 +15,7 @@
   padding: 0;
 }
 
-body.top-contributors #heading .legend li .status.fa {
+body.top-contributors #heading .legend li .status.fas {
   display: none;
 }
 
diff --git a/pontoon/contributors/static/css/settings.css b/pontoon/contributors/static/css/settings.css
index 6c0685adea..caec555e5a 100644
--- a/pontoon/contributors/static/css/settings.css
+++ b/pontoon/contributors/static/css/settings.css
@@ -168,7 +168,7 @@
       text-align: center;
       width: 100%;
 
-      .fa {
+      .fas {
         margin: 0;
       }
     }
@@ -177,7 +177,7 @@
   .check-box:first-child:not(.enabled) + .check-box {
     pointer-events: none;
 
-    .fa:before {
+    .fas:before {
       color: var(--toggle-color-2);
     }
   }
diff --git a/pontoon/contributors/templates/contributors/profile.html b/pontoon/contributors/templates/contributors/profile.html
index e954a83448..76204bfc37 100644
--- a/pontoon/contributors/templates/contributors/profile.html
+++ b/pontoon/contributors/templates/contributors/profile.html
@@ -34,7 +34,7 @@
                 {% endif %}
                 {% if profile_is_disabled %}
                 <div class="status">
-                    <i class="fa fa-exclamation-circle fa-sm"></i>
+                    <i class="fas fa-exclamation-circle fa-sm"></i>
                     <span>Account disabled by an administrator</span>
                 </div>
                 {% endif %}
@@ -68,7 +68,7 @@ <h2 class="display-name">{{ contributor.first_name }}</h2>
                     {% if is_email_visible %}
                     {% set email = contributor.contact_email %}
                     <div class="item-with-icon">
-                        <span class="icon fa fa-envelope"></span>
+                        <span class="icon fas fa-envelope"></span>
                         <a href="mailto:{{ email|nospam }}">{{ email|nospam }}</a>
                     </div>
                     {% endif %}
@@ -77,7 +77,7 @@ <h2 class="display-name">{{ contributor.first_name }}</h2>
 
                     {% if profile.chat %}
                     <div class="item-with-icon" title="Chat Account">
-                        <span class="icon fa fa-comment-dots"></span>
+                        <span class="icon fas fa-comment-dots"></span>
                         <span>{{ profile.chat }}</span>
                     </div>
                     {% endif %}
@@ -91,7 +91,7 @@ <h2 class="display-name">{{ contributor.first_name }}</h2>
 
                     {% if profile.bugzilla %}
                     <div class="item-with-icon" title="Bugzilla Account">
-                        <span class="icon fa fa-bug"></span>
+                        <span class="icon fas fa-bug"></span>
                         <a href="mailto:{{ profile.bugzilla|nospam }}">{{ profile.bugzilla|nospam }}</a>
                     </div>
                     {% endif %}
@@ -110,9 +110,9 @@ <h2 class="display-name">{{ contributor.first_name }}</h2>
                     <form id="account-status-form" action="{{ url('pontoon.contributors.toggle_active_user_status', username=contributor.username) }}" method="POST">
                         {% csrf_token %}
                         {% if contributor.is_active %}
-                        <button class="button" type="submit"><i class="icon fa fa-lock fa-sm"></i>Disable</button>
+                        <button class="button" type="submit"><i class="icon fas fa-lock fa-sm"></i>Disable</button>
                         {% else %}
-                        <button class="button" type="submit"><i class="icon fa fa-unlock fa-sm"></i>Enable</button>
+                        <button class="button" type="submit"><i class="icon fas fa-unlock fa-sm"></i>Enable</button>
                         {% endif %}
                     </form>
                     {% endif %}
@@ -145,7 +145,7 @@ <h4 class="subtitle">Achievements</h4>
                 <div class="block">
                     <h4 class="subtitle">Latest activity</h4>
                     <div class="item-with-icon">
-                        <span class="icon fa fa-calendar-alt"></span>
+                        <span class="icon fas fa-calendar-alt"></span>
                         {% set action = contributor.latest_action %}
                         {% if action and action.translation %}
                         {% set resource = action.translation.entity.resource %}
@@ -160,7 +160,7 @@ <h4 class="subtitle">Latest activity</h4>
                 <div class="block">
                     <h4 class="subtitle">Last login</h4>
                     <div class="item-with-icon">
-                        <span class="icon fa fa-calendar-alt"></span>
+                        <span class="icon fas fa-calendar-alt"></span>
                         <span>{{ contributor.last_login|format_datetime("date") }}</span>
                     </div>
                 </div>
@@ -168,7 +168,7 @@ <h4 class="subtitle">Last login</h4>
                 <div class="block">
                     <h4 class="subtitle">Member since</h4>
                     <div class="item-with-icon">
-                        <span class="icon fa fa-calendar-alt"></span>
+                        <span class="icon fas fa-calendar-alt"></span>
                         <span>{{ contributor.date_joined|format_datetime("date") }}</span>
                     </div>
                 </div>
@@ -184,7 +184,7 @@ <h4 class="subtitle">Member since</h4>
                     <h4 class="subtitle">Translator</h4>
                     {% for locale in translator_for_locales %}
                     <div class="item-with-icon">
-                        <span class="icon fa fa-language"></span>
+                        <span class="icon fas fa-language"></span>
                         <span>{{ locale.name }} <span class="stress">{{ locale.code }}</span></span>
                     </div>
                     {% endfor %}
@@ -196,7 +196,7 @@ <h4 class="subtitle">Translator</h4>
                     <h4 class="subtitle">Team manager</h4>
                     {% for locale in manager_for_locales %}
                     <div class="item-with-icon">
-                        <span class="icon fa fa-language"></span>
+                        <span class="icon fas fa-language"></span>
                         <a href="{{ url('pontoon.teams.team', locale.code) }}">{{ locale.name }} <span class="stress">{{ locale.code }}</span></a>
                     </div>
                     {% endfor %}
@@ -208,7 +208,7 @@ <h4 class="subtitle">Team manager</h4>
                     <h4 class="subtitle">Project manager</h4>
                     {% for project in contact_for %}
                     <div class="item-with-icon">
-                        <span class="icon fa fa-language"></span>
+                        <span class="icon fas fa-language"></span>
                         <a href="{{ url('pontoon.projects.project', project.slug) }}">{{ project.name }}</a>
                     </div>
                     {% endfor %}
@@ -328,7 +328,7 @@ <h3 class="title">{{ contribution_graph.title }}</h3>
                             <div class="value">
                                 <span data-type="all_contributions" title="Submissions, reviews performed and reviews received">All contributions</span>
                             </div>
-                            <span class="icon fa fa-caret-down"></span>
+                            <span class="icon fas fa-caret-down"></span>
                         </div>
                         <div class="menu" style="display: none;">
                             <ul>
diff --git a/pontoon/contributors/templates/contributors/widgets/contributor_selector_list.html b/pontoon/contributors/templates/contributors/widgets/contributor_selector_list.html
index 882a28f558..566968cc7c 100644
--- a/pontoon/contributors/templates/contributors/widgets/contributor_selector_list.html
+++ b/pontoon/contributors/templates/contributors/widgets/contributor_selector_list.html
@@ -3,12 +3,12 @@
   <label for="{{ identifier }}-{{ index }}">{{ label|safe }}</label>
   <div class="menu permanent">
     <div class="search-wrapper clearfix">
-      <div class="icon fa fa-search"></div>
+      <div class="icon fas fa-search"></div>
       <input id="{{ identifier }}-{{ index }}" type="search" autocomplete="off">
     </div>
     <ul>
       {% for user in choices %}
-      <li class="clearfix contributor" data-id="{{ user.id }}" title="{{ user.first_name }}"><span class="arrow fa"></span>{{ user.email }}</li>
+      <li class="clearfix contributor" data-id="{{ user.id }}" title="{{ user.first_name }}"><span class="arrow fas"></span>{{ user.email }}</li>
       {% endfor %}
     </ul>
   </div>
diff --git a/pontoon/contributors/templates/contributors/widgets/notifications_menu.html b/pontoon/contributors/templates/contributors/widgets/notifications_menu.html
index 8c6aa0563a..a5d62d77de 100644
--- a/pontoon/contributors/templates/contributors/widgets/notifications_menu.html
+++ b/pontoon/contributors/templates/contributors/widgets/notifications_menu.html
@@ -102,7 +102,7 @@
 
   {% if notifications|length == 0 %}
     <li class="no">
-      <i class="icon fa fa-bell fa-fw"></i>
+      <i class="icon fas fa-bell fa-fw"></i>
       <p class="title">{{ no_title }}</p>
       <p class="description">{{ no_description }}</p>
     </li>
diff --git a/pontoon/homepage/static/css/homepage.css b/pontoon/homepage/static/css/homepage.css
index b40a6b509a..3ff6197fed 100644
--- a/pontoon/homepage/static/css/homepage.css
+++ b/pontoon/homepage/static/css/homepage.css
@@ -186,7 +186,7 @@ body.addon-promotion-active #edit-homepage .select {
   color: var(--homepage-tour-button-color);
 }
 
-#edit-homepage .fa {
+#edit-homepage .fas {
   margin-right: 7px;
 }
 
diff --git a/pontoon/homepage/templates/homepage.html b/pontoon/homepage/templates/homepage.html
index e55f282233..daedfffa21 100644
--- a/pontoon/homepage/templates/homepage.html
+++ b/pontoon/homepage/templates/homepage.html
@@ -10,7 +10,7 @@
 <div id="edit-homepage">
   <div class="select controls">
     <a class="button" target=blank href="{{ url('admin:homepage_homepage_change', homepage_id) }}">
-      <span class="fa fa-pencil-alt"></span>Edit Homepage
+      <span class="fas fa-pencil-alt"></span>Edit Homepage
     </a>
   </div>
 </div>
diff --git a/pontoon/homepage/templates/homepage_content.html b/pontoon/homepage/templates/homepage_content.html
index 974ebe2a89..b329a6f771 100644
--- a/pontoon/homepage/templates/homepage_content.html
+++ b/pontoon/homepage/templates/homepage_content.html
@@ -41,7 +41,7 @@ <h2>This is how it works.</h2>
           <li class="second">Submit a suggestion</li>
           <li class="third">Have it approved by a trusted localizer</li>
           <li class="flex">
-            <div class="checkmark fa fa-check"></div>
+            <div class="checkmark fas fa-check"></div>
             <p>Show it to your friends as it lands in product</p>
           </li>
         </ol>
diff --git a/pontoon/insights/static/css/insights_charts.css b/pontoon/insights/static/css/insights_charts.css
index b17ad8ea62..e2708157d0 100644
--- a/pontoon/insights/static/css/insights_charts.css
+++ b/pontoon/insights/static/css/insights_charts.css
@@ -30,13 +30,13 @@
   box-sizing: border-box;
 }
 
-#insights h3 .fa {
+#insights h3 .fas {
   float: right;
   font-size: 14px;
 }
 
-#insights h3 .fa.active,
-#insights h3 .fa:hover {
+#insights h3 .fas.active,
+#insights h3 .fas:hover {
   background: var(--button-background-hover-2);
 }
 
diff --git a/pontoon/insights/templates/insights/widgets/tooltip.html b/pontoon/insights/templates/insights/widgets/tooltip.html
index 5f3b72f5e8..cec71f94e0 100644
--- a/pontoon/insights/templates/insights/widgets/tooltip.html
+++ b/pontoon/insights/templates/insights/widgets/tooltip.html
@@ -1,6 +1,6 @@
 {# Widget to display tooltip with more information about the section. #}
 {% macro display(intro='', items=[]) %}
-<div class="fa fa-info selector"></div>
+<div class="fas fa-info selector"></div>
 <div class="tooltip">
     {% if intro != '' %}
     <p>{{ intro }}</p>
diff --git a/pontoon/localizations/templates/localizations/includes/resources.html b/pontoon/localizations/templates/localizations/includes/resources.html
index 038fe904dc..527e2acf18 100644
--- a/pontoon/localizations/templates/localizations/includes/resources.html
+++ b/pontoon/localizations/templates/localizations/includes/resources.html
@@ -3,7 +3,7 @@
 <div class="resources">
   <menu class="controls">
     <div class="search-wrapper small clearfix">
-      <div class="icon fa fa-search"></div>
+      <div class="icon fas fa-search"></div>
       <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter resources">
     </div>
   </menu>
diff --git a/pontoon/localizations/templates/localizations/includes/tags.html b/pontoon/localizations/templates/localizations/includes/tags.html
index 2cdf4d31d5..75fba3f608 100644
--- a/pontoon/localizations/templates/localizations/includes/tags.html
+++ b/pontoon/localizations/templates/localizations/includes/tags.html
@@ -3,7 +3,7 @@
 <div class="tags">
   <menu class="controls">
     <div class="search-wrapper small clearfix">
-      <div class="icon fa fa-search"></div>
+      <div class="icon fas fa-search"></div>
       <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter tags">
     </div>
   </menu>
diff --git a/pontoon/localizations/templates/localizations/widgets/resource_list.html b/pontoon/localizations/templates/localizations/widgets/resource_list.html
index 867d19b219..b2d7d0f40f 100644
--- a/pontoon/localizations/templates/localizations/widgets/resource_list.html
+++ b/pontoon/localizations/templates/localizations/widgets/resource_list.html
@@ -7,19 +7,19 @@
   <table class="table table-sort project-list">
     <thead>
       <tr>
-        <th class="resource{% if deadline %} with-deadline{% endif %}{% if priority %} with-priority{% endif %} asc">Resource<i class="fa"></i></th>
+        <th class="resource{% if deadline %} with-deadline{% endif %}{% if priority %} with-priority{% endif %} asc">Resource<i class="fas"></i></th>
 
         {% if deadline %}
-        <th class="deadline">Target Date<i class="fa"></i></th>
+        <th class="deadline">Target Date<i class="fas"></i></th>
         {% endif %}
 
         {% if priority %}
-        <th class="priority inverted">Priority<i class="fa"></i></th>
+        <th class="priority inverted">Priority<i class="fas"></i></th>
         {% endif %}
 
-        <th class="latest-activity">Latest Activity<i class="fa"></i></th>
-        <th class="progress">Progress<i class="fa"></i></th>
-        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fa fa-lightbulb"></span><i class="fa"></i></th>
+        <th class="latest-activity">Latest Activity<i class="fas"></i></th>
+        <th class="progress">Progress<i class="fas"></i></th>
+        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fas fa-lightbulb"></span><i class="fas"></i></th>
       </tr>
     </thead>
     <tbody>
diff --git a/pontoon/machinery/templates/machinery/machinery.html b/pontoon/machinery/templates/machinery/machinery.html
index dd64e5dd1f..24241977e1 100644
--- a/pontoon/machinery/templates/machinery/machinery.html
+++ b/pontoon/machinery/templates/machinery/machinery.html
@@ -27,8 +27,8 @@
   <div class="container">
     <menu class="controls">
       <div id="search" class="search-wrapper big clearfix">
-        <div class="icon fa fa-search"></div>
-        <div class="icon fa fa-cog fa-spin"></div>
+        <div class="icon fas fa-search"></div>
+        <div class="icon fas fa-cog fa-spin"></div>
         <input type="search" autocomplete="off" autofocus placeholder="Type and press Enter to search">
       </div>
 
diff --git a/pontoon/messaging/static/css/messaging.css b/pontoon/messaging/static/css/messaging.css
index cd61180873..b1eef62d82 100644
--- a/pontoon/messaging/static/css/messaging.css
+++ b/pontoon/messaging/static/css/messaging.css
@@ -115,7 +115,7 @@
         text-align: left;
       }
 
-      .fa {
+      .fas {
         margin: 2px 10px 0 0;
         float: left;
       }
@@ -324,7 +324,7 @@
             float: left;
             text-transform: uppercase;
 
-            .fa {
+            .fas {
               color: var(--status-translated);
               margin-right: 5px;
             }
diff --git a/pontoon/messaging/templates/messaging/includes/compose.html b/pontoon/messaging/templates/messaging/includes/compose.html
index 310d74f37a..7b4d38dc79 100644
--- a/pontoon/messaging/templates/messaging/includes/compose.html
+++ b/pontoon/messaging/templates/messaging/includes/compose.html
@@ -163,7 +163,7 @@ <h3>Filter by last login</h3>
     </form>
     <menu class="controls">
         <button class="button toggle review" data-target="#review">Review message<span
-                class="fa fa-chevron-right"></span></button>
+                class="fas fa-chevron-right"></span></button>
     </menu>
 </div>
 <div id="review">
@@ -215,13 +215,13 @@ <h3>Message type</h3>
             included. When in doubt, please review with legal.</p>
     </section>
     <menu class="controls">
-        <button class="button toggle edit" data-target="#compose"><span class="fa fa-chevron-left"></span>Back to
+        <button class="button toggle edit" data-target="#compose"><span class="fas fa-chevron-left"></span>Back to
             editing</button>
         <div class="right">
             <button class="button send to-myself">Send to myself</button>
-            <button class="button fetching">Fetching recipients… <i class="fa fa-circle-notch fa-spin"></i></button>
+            <button class="button fetching">Fetching recipients… <i class="fas fa-circle-notch fa-spin"></i></button>
             <button class="button fetch-again">Fetch recipients again?</button>
-            <button class="button active send">Send to <span class="value"></span> recipients <i class="fa fa-circle-notch fa-spin"></i></button>
+            <button class="button active send">Send to <span class="value"></span> recipients <i class="fas fa-circle-notch fa-spin"></i></button>
         </div>
     </menu>
 </div>
diff --git a/pontoon/messaging/templates/messaging/includes/sent.html b/pontoon/messaging/templates/messaging/includes/sent.html
index fa9bb50b75..6767746cc5 100644
--- a/pontoon/messaging/templates/messaging/includes/sent.html
+++ b/pontoon/messaging/templates/messaging/includes/sent.html
@@ -1,7 +1,7 @@
 <div id="sent">
     {% if sent_messages|length == 0 %}
     <div class="no">
-        <i class="icon fa fa-envelope fa-fw"></i>
+        <i class="icon fas fa-envelope fa-fw"></i>
         <p class="title">No messages sent yet.</p>
     </div>
     {% endif %}
@@ -30,7 +30,7 @@
                 <div class="body"><div class="value">{{ message.body|safe }}</div></div>
             </div>
             <div class="footer">
-                <a href="{{ url('pontoon.messaging.use_as_template', message.pk) }}" class="use-as-template"><i class="fa fa-pencil-alt"></i>Use as template</a>
+                <a href="{{ url('pontoon.messaging.use_as_template', message.pk) }}" class="use-as-template"><i class="fas fa-pencil-alt"></i>Use as template</a>
                 <time>{{ message.sent_at|format_for_inbox }}</time>
             </div>
         </li>
diff --git a/pontoon/projects/templates/projects/includes/tags.html b/pontoon/projects/templates/projects/includes/tags.html
index e18be4c23b..b71e538501 100644
--- a/pontoon/projects/templates/projects/includes/tags.html
+++ b/pontoon/projects/templates/projects/includes/tags.html
@@ -3,7 +3,7 @@
 <div class="tags">
   <menu class="controls">
     <div class="search-wrapper small clearfix">
-      <div class="icon fa fa-search"></div>
+      <div class="icon fas fa-search"></div>
       <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter tags">
     </div>
   </menu>
diff --git a/pontoon/projects/templates/projects/includes/teams.html b/pontoon/projects/templates/projects/includes/teams.html
index 2e8d053965..2b30c236ce 100644
--- a/pontoon/projects/templates/projects/includes/teams.html
+++ b/pontoon/projects/templates/projects/includes/teams.html
@@ -3,13 +3,13 @@
 <div class="teams items">
   <menu class="controls">
     <div class="search-wrapper small clearfix">
-      <div class="icon fa fa-search"></div>
+      <div class="icon fas fa-search"></div>
       <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter teams" data-filter="td:nth-child(-n+2)">
     </div>
 
     {% if project.can_be_requested and user.is_authenticated %}
     <button class="request-toggle button small request-teams">
-      <span class="fa fa-chevron-right"></span>
+      <span class="fas fa-chevron-right"></span>
     </button>
     {% endif %}
   </menu>
diff --git a/pontoon/projects/templates/projects/projects.html b/pontoon/projects/templates/projects/projects.html
index 08fa4361e5..3aa2c8d3a0 100644
--- a/pontoon/projects/templates/projects/projects.html
+++ b/pontoon/projects/templates/projects/projects.html
@@ -59,7 +59,7 @@ <h1>
   <div class="container">
     <menu class="controls">
       <div class="search-wrapper small clearfix">
-        <div class="icon fa fa-search"></div>
+        <div class="icon fas fa-search"></div>
         <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter projects">
       </div>
     </menu>
diff --git a/pontoon/projects/templates/projects/widgets/project_list.html b/pontoon/projects/templates/projects/widgets/project_list.html
index a98fbd7888..cd8f97e1c2 100644
--- a/pontoon/projects/templates/projects/widgets/project_list.html
+++ b/pontoon/projects/templates/projects/widgets/project_list.html
@@ -7,15 +7,15 @@
   <table class="table table-sort project-list item-list {% if not visible %}hidden{% endif %}">
     <thead>
       <tr>
-        <th class="name asc">Project<i class="fa"></i></th>
-        <th class="deadline">Target Date<i class="fa"></i></th>
-        <th class="priority inverted">Priority<i class="fa"></i></th>
-        <th class="latest-activity">Latest Activity<i class="fa"></i></th>
-        <th class="progress">Progress<i class="fa"></i></th>
-        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fa fa-lightbulb"></span><i class="fa"></i></th>
+        <th class="name asc">Project<i class="fas"></i></th>
+        <th class="deadline">Target Date<i class="fas"></i></th>
+        <th class="priority inverted">Priority<i class="fas"></i></th>
+        <th class="latest-activity">Latest Activity<i class="fas"></i></th>
+        <th class="progress">Progress<i class="fas"></i></th>
+        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fas fa-lightbulb"></span><i class="fas"></i></th>
         {% if request %}
-          <th class="all-strings">Number of Strings<i class="fa"></i></th>
-          <th class="check">Request<i class="fa"></i></th>
+          <th class="all-strings">Number of Strings<i class="fas"></i></th>
+          <th class="check">Request<i class="fas"></i></th>
         {% endif %}
       </tr>
     </thead>
@@ -53,7 +53,7 @@ <h4>
           <span class="not-ready">Not synced yet</span>
         {% endif %}
       </td>
-      <td class="check fa fa-fw"></td>
+      <td class="check fas fa-fw"></td>
     {% endif %}
   </tr>
 {% endmacro %}
diff --git a/pontoon/sync/templates/sync/log_list.html b/pontoon/sync/templates/sync/log_list.html
index 059ecd007c..492f0c0ce9 100644
--- a/pontoon/sync/templates/sync/log_list.html
+++ b/pontoon/sync/templates/sync/log_list.html
@@ -34,7 +34,7 @@
     <div class="pagination">
       {% if sync_logs.has_previous() %}
         <a class="previous" href="?page={{ sync_logs.previous_page_number() }}">
-          <span class="fa fa-chevron-left"></span>
+          <span class="fas fa-chevron-left"></span>
           Previous
         </a>
       {% endif %}
@@ -46,7 +46,7 @@
       {% if sync_logs.has_next() %}
         <a class="next" href="?page={{ sync_logs.next_page_number() }}">
           Next
-          <span class="fa fa-chevron-right"></span>
+          <span class="fas fa-chevron-right"></span>
         </a>
       {% endif %}
     </div>
diff --git a/pontoon/tags/templates/tags/widgets/tag_list.html b/pontoon/tags/templates/tags/widgets/tag_list.html
index ad489e7182..8bb415ea45 100644
--- a/pontoon/tags/templates/tags/widgets/tag_list.html
+++ b/pontoon/tags/templates/tags/widgets/tag_list.html
@@ -6,11 +6,11 @@
   <table class="table table-sort project-list">
     <thead>
       <tr>
-        <th class="tag">Tag<i class="fa"></i></th>
-        <th class="priority inverted asc">Priority<i class="fa"></i></th>
-        <th class="latest-activity">Latest Activity<i class="fa"></i></th>
-        <th class="progress">Progress<i class="fa"></i></th>
-        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fa fa-lightbulb"></span><i class="fa"></i></th>
+        <th class="tag">Tag<i class="fas"></i></th>
+        <th class="priority inverted asc">Priority<i class="fas"></i></th>
+        <th class="latest-activity">Latest Activity<i class="fas"></i></th>
+        <th class="progress">Progress<i class="fas"></i></th>
+        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fas fa-lightbulb"></span><i class="fas"></i></th>
       </tr>
     </thead>
     <tbody>
diff --git a/pontoon/teams/static/css/info.css b/pontoon/teams/static/css/info.css
index 2e684fc1c5..1887d12b3b 100644
--- a/pontoon/teams/static/css/info.css
+++ b/pontoon/teams/static/css/info.css
@@ -1,4 +1,4 @@
-#info-wrapper .edit-info .fa {
+#info-wrapper .edit-info .fas {
   padding-right: 5px;
 }
 
diff --git a/pontoon/teams/static/css/team.css b/pontoon/teams/static/css/team.css
index 5a89909985..0a15e52283 100644
--- a/pontoon/teams/static/css/team.css
+++ b/pontoon/teams/static/css/team.css
@@ -166,7 +166,7 @@
   background: var(--status-error);
 }
 
-#permissions-form h3 .remove-project .fa {
+#permissions-form h3 .remove-project .fas {
   float: left;
   font-size: 13px;
   margin-top: 2px;
diff --git a/pontoon/teams/static/css/translation_memory.css b/pontoon/teams/static/css/translation_memory.css
index 1f07561778..c53fbc5e42 100644
--- a/pontoon/teams/static/css/translation_memory.css
+++ b/pontoon/teams/static/css/translation_memory.css
@@ -3,7 +3,7 @@
     float: right;
 
     .button.upload {
-      .fa {
+      .fas {
         padding-right: 2px;
       }
     }
@@ -13,13 +13,13 @@
       background-color: transparent;
       margin-left: 0;
 
-      .fa {
+      .fas {
         margin-right: 0;
       }
     }
 
     .button.cancel:hover {
-      .fa {
+      .fas {
         color: var(--white-1);
       }
     }
@@ -163,7 +163,7 @@
           .button {
             background: var(--button-background-1);
 
-            .fa {
+            .fas {
               margin-right: 2px;
             }
           }
@@ -199,13 +199,13 @@
             background-color: transparent;
             margin-left: 0;
 
-            .fa {
+            .fas {
               margin-right: 0;
             }
           }
 
           .button.cancel:hover {
-            .fa {
+            .fas {
               color: var(--white-1);
             }
           }
diff --git a/pontoon/teams/static/js/bugzilla.js b/pontoon/teams/static/js/bugzilla.js
index af29fe18de..15adb3563c 100755
--- a/pontoon/teams/static/js/bugzilla.js
+++ b/pontoon/teams/static/js/bugzilla.js
@@ -85,10 +85,10 @@ var Pontoon = (function (my) {
                 html:
                   '<thead>' +
                   '<tr>' +
-                  '<th class="id">ID<i class="fa"></i></th>' +
-                  '<th class="summary">Summary<i class="fa"></i></th>' +
-                  '<th class="last-changed desc">Last Changed<i class="fa"></i></th>' +
-                  '<th class="assigned-to">Assigned To<i class="fa"></i></th>' +
+                  '<th class="id">ID<i class="fas"></i></th>' +
+                  '<th class="summary">Summary<i class="fas"></i></th>' +
+                  '<th class="last-changed desc">Last Changed<i class="fas"></i></th>' +
+                  '<th class="assigned-to">Assigned To<i class="fas"></i></th>' +
                   '</tr>' +
                   '</thead>',
               }).append(tbody);
diff --git a/pontoon/teams/static/js/request.js b/pontoon/teams/static/js/request.js
index cf35e7e1f2..18729ee5c3 100644
--- a/pontoon/teams/static/js/request.js
+++ b/pontoon/teams/static/js/request.js
@@ -98,7 +98,7 @@ var Pontoon = (function (my) {
           complete() {
             $('.items td.check').removeClass('enabled');
             $('.items td.radio.enabled').toggleClass(
-              'far fa fa-circle fa-dot-circle enabled',
+              'far fas fa-circle fa-dot-circle enabled',
             );
             Pontoon.requestItem.toggleItem(true, 'locale-projects');
             $('.controls .request-toggle').show();
diff --git a/pontoon/teams/templates/teams/includes/info.html b/pontoon/teams/templates/teams/includes/info.html
index 325447c9cd..c66ecc891c 100644
--- a/pontoon/teams/templates/teams/includes/info.html
+++ b/pontoon/teams/templates/teams/includes/info.html
@@ -1,7 +1,7 @@
 <div id="info-wrapper">
   {% if request.user.has_perm('base.can_manage_locale', locale) %}
   <div class="controls">
-    <a class="edit-info button" href="#"><span class="fa fa-pencil-alt"></span>Edit</a>
+    <a class="edit-info button" href="#"><span class="fas fa-pencil-alt"></span>Edit</a>
     <a href="#" class="cancel">Cancel</a>
     <button class="button active save">Save</button>
   </div>
diff --git a/pontoon/teams/templates/teams/includes/permissions.html b/pontoon/teams/templates/teams/includes/permissions.html
index d4fe826c69..e6c9221fab 100644
--- a/pontoon/teams/templates/teams/includes/permissions.html
+++ b/pontoon/teams/templates/teams/includes/permissions.html
@@ -52,7 +52,7 @@ <h3 class="controls">General <span class="small stress">(default team permission
 
         <h3 class="controls">
             {{ project_locale.project.name }} <span class="small stress">(override team translators for this project)</span>
-            <a href="#" class="remove-project button" title="Remove custom project permissions"><span class="fa fa-trash"></span>Remove</a>
+            <a href="#" class="remove-project button" title="Remove custom project permissions"><span class="fas fa-trash"></span>Remove</a>
         </h3>
         <div class="selector-wrapper double-list-selector clearfix">
             {{ ContributorSelectorList.list(
@@ -76,10 +76,10 @@ <h3 class="controls">
     <menu class="controls">
         <button class="button active save">Save</button>
         <div id="project-selector" class="select{% if hide_project_selector %} hidden{% endif %}">
-            <div class="button selector">Add custom permissions for project<span class="icon fa fa-caret-up"></span></div>
+            <div class="button selector">Add custom permissions for project<span class="icon fas fa-caret-up"></span></div>
             <div class="menu">
                 <div class="search-wrapper clearfix">
-                    <div class="icon fa fa-search"></div>
+                    <div class="icon fas fa-search"></div>
                     <input autocomplete="off" autofocus="" type="search">
                 </div>
                 <ul>
diff --git a/pontoon/teams/templates/teams/includes/projects.html b/pontoon/teams/templates/teams/includes/projects.html
index 5d8f7bde87..90fa21cfd0 100644
--- a/pontoon/teams/templates/teams/includes/projects.html
+++ b/pontoon/teams/templates/teams/includes/projects.html
@@ -3,19 +3,19 @@
 <div class="projects items">
   <menu class="controls {% if no_visible_projects %}no-projects{% endif %}">
     <div class="search-wrapper small clearfix">
-      <div class="icon fa fa-search"></div>
+      <div class="icon fas fa-search"></div>
       <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter projects">
     </div>
 
     {% if project_request_enabled %}
     <button class="request-toggle button small request-projects">
-      <span class="fa fa-chevron-right"></span>
+      <span class="fas fa-chevron-right"></span>
     </button>
     {% endif %}
 
     {% if pretranslation_request_enabled %}
     <button class="request-toggle button small request-pretranslation">
-      <span class="fa fa-chevron-right"></span>
+      <span class="fas fa-chevron-right"></span>
     </button>
     {% endif %}
   </menu>
diff --git a/pontoon/teams/templates/teams/includes/translation_memory.html b/pontoon/teams/templates/teams/includes/translation_memory.html
index 47812902e0..ec6ee8cf37 100644
--- a/pontoon/teams/templates/teams/includes/translation_memory.html
+++ b/pontoon/teams/templates/teams/includes/translation_memory.html
@@ -1,23 +1,23 @@
 <div class="translation-memory items">
     <menu class="controls">
         <div class="search-wrapper small clearfix">
-            <div class="icon fa fa-search"></div>
+            <div class="icon fas fa-search"></div>
             <input class="table-filter" type="search" autocomplete="off" value="{{ search_query }}" autofocus
                 placeholder="Search translation memory">
         </div>
 
         <div class="upload-wrapper">
             <button class="cancel button">
-                <span class="fa fa-times"></span>
+                <span class="fas fa-times"></span>
             </button>
 
             <button class="confirm button">
-                <span class="fa fa-upload"></span>
+                <span class="fas fa-upload"></span>
                 Continue
             </button>
 
             <button class="upload button">
-                <span class="fa fa-upload"></span>
+                <span class="fas fa-upload"></span>
                 Upload .TMX
             </button>
         </div>
diff --git a/pontoon/teams/templates/teams/teams.html b/pontoon/teams/templates/teams/teams.html
index fbe9dfac81..b3ef2b4fb0 100644
--- a/pontoon/teams/templates/teams/teams.html
+++ b/pontoon/teams/templates/teams/teams.html
@@ -59,13 +59,13 @@ <h1>
   <div class="container">
     <menu class="controls clearfix">
       <div class="search-wrapper small clearfix">
-        <div class="icon fa fa-search"></div>
+        <div class="icon fas fa-search"></div>
         <input class="table-filter" type="search" autocomplete="off" autofocus placeholder="Filter teams" data-filter="td:nth-child(-n+2)">
       </div>
 
       {% if user.is_authenticated %}
       <button class="request-toggle request-team button small">
-        <span class="fa fa-chevron-right"></span>
+        <span class="fas fa-chevron-right"></span>
       </button>
       {% endif %}
     </menu>
diff --git a/pontoon/teams/templates/teams/widgets/team_list.html b/pontoon/teams/templates/teams/widgets/team_list.html
index f8bedaf507..16f6130f3c 100644
--- a/pontoon/teams/templates/teams/widgets/team_list.html
+++ b/pontoon/teams/templates/teams/widgets/team_list.html
@@ -5,14 +5,14 @@
   <table class="table table-sort team-list item-list">
     <thead>
       <tr>
-        <th class="name asc">Language<i class="fa"></i></th>
-        <th class="code">Locale<i class="fa"></i></th>
-        <th class="population">Speakers<i class="fa"></i></th>
-        <th class="latest-activity">Latest Activity<i class="fa"></i></th>
-        <th class="progress">Progress<i class="fa"></i></th>
-        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fa fa-lightbulb"></span><i class="fa"></i></th>
+        <th class="name asc">Language<i class="fas"></i></th>
+        <th class="code">Locale<i class="fas"></i></th>
+        <th class="population">Speakers<i class="fas"></i></th>
+        <th class="latest-activity">Latest Activity<i class="fas"></i></th>
+        <th class="progress">Progress<i class="fas"></i></th>
+        <th class="unreviewed-status inverted" title="Unreviewed suggestions"><span class="fas fa-lightbulb"></span><i class="fas"></i></th>
         {% if request %}
-          <th class="check">Request<i class="fa"></i></th>
+          <th class="check">Request<i class="fas"></i></th>
         {% endif %}
       </tr>
     </thead>
diff --git a/pontoon/teams/templates/teams/widgets/team_selector.html b/pontoon/teams/templates/teams/widgets/team_selector.html
index cd274c31df..a930859ba5 100644
--- a/pontoon/teams/templates/teams/widgets/team_selector.html
+++ b/pontoon/teams/templates/teams/widgets/team_selector.html
@@ -8,7 +8,7 @@
 
     <div class="menu">
       <div class="search-wrapper clearfix">
-        <div class="icon fa fa-search"></div>
+        <div class="icon fas fa-search"></div>
         <input type="search" autocomplete="off" autofocus>
       </div>
 
diff --git a/pontoon/teams/templates/teams/widgets/team_selector_list.html b/pontoon/teams/templates/teams/widgets/team_selector_list.html
index b3dab06d2c..992997a0ec 100644
--- a/pontoon/teams/templates/teams/widgets/team_selector_list.html
+++ b/pontoon/teams/templates/teams/widgets/team_selector_list.html
@@ -12,13 +12,13 @@
 
     <div class="menu permanent">
         <div class="search-wrapper clearfix">
-            <div class="icon fa fa-search"></div>
+            <div class="icon fas fa-search"></div>
             <input id="{{ id }}" type="search" autocomplete="off">
         </div>
         <ul class="{% if sortable %}sortable{% endif %}">
             {% for locale in locales %}
             <li class="clearfix" data-id="{{ locale.id }}">
-                <span class="arrow fa"></span>
+                <span class="arrow fas"></span>
                 <span class="language {{ locale.code }}">{{ locale.name }}</span>
                 <span class="code">{{ locale.code }}</span>
             </li>
diff --git a/pontoon/teams/templates/teams/widgets/translation_memory_entries.html b/pontoon/teams/templates/teams/widgets/translation_memory_entries.html
index 99394ad2ad..b72cd48c59 100644
--- a/pontoon/teams/templates/teams/widgets/translation_memory_entries.html
+++ b/pontoon/teams/templates/teams/widgets/translation_memory_entries.html
@@ -19,22 +19,22 @@
     </td>
     <td class="actions controls">
         <button class="cancel button">
-            <span class="fa fa-times"></span>
+            <span class="fas fa-times"></span>
         </button>
         <button class="edit button">
-            <span class="fa fa-pencil-alt"></span>
+            <span class="fas fa-pencil-alt"></span>
             Edit
         </button>
         <button class="save button">
-            <span class="fa fa-check"></span>
+            <span class="fas fa-check"></span>
             Save
         </button>
         <button class="delete button">
-            <span class="fa fa-trash"></span>
+            <span class="fas fa-trash"></span>
             Delete
         </button>
         <button class="are-you-sure button">
-            <span class="fa fa-trash"></span>
+            <span class="fas fa-trash"></span>
             Delete {{ entry.ids|length }} TM entr{{ entry.ids|length|pluralize("y,ies") }}?
         </button>
     </td>
diff --git a/translate/src/modules/batchactions/components/ApproveAll.test.js b/translate/src/modules/batchactions/components/ApproveAll.test.js
index 5d8ef48f80..6471670201 100644
--- a/translate/src/modules/batchactions/components/ApproveAll.test.js
+++ b/translate/src/modules/batchactions/components/ApproveAll.test.js
@@ -30,7 +30,7 @@ describe('<ApproveAll>', () => {
     expect(wrapper.find('#batchactions-ApproveAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ApproveAll--success')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ApproveAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders error button correctly', () => {
@@ -51,7 +51,7 @@ describe('<ApproveAll>', () => {
     expect(wrapper.find('#batchactions-ApproveAll--error')).toHaveLength(1);
     expect(wrapper.find('#batchactions-ApproveAll--success')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ApproveAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders success button correctly', () => {
@@ -72,7 +72,7 @@ describe('<ApproveAll>', () => {
     expect(wrapper.find('#batchactions-ApproveAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ApproveAll--success')).toHaveLength(1);
     expect(wrapper.find('#batchactions-ApproveAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders success with invalid button correctly', () => {
@@ -94,7 +94,7 @@ describe('<ApproveAll>', () => {
     expect(wrapper.find('#batchactions-ApproveAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ApproveAll--success')).toHaveLength(1);
     expect(wrapper.find('#batchactions-ApproveAll--invalid')).toHaveLength(1);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('performs approve all action when Approve All button is clicked', () => {
diff --git a/translate/src/modules/batchactions/components/ApproveAll.tsx b/translate/src/modules/batchactions/components/ApproveAll.tsx
index 805876c90e..62cb00e106 100644
--- a/translate/src/modules/batchactions/components/ApproveAll.tsx
+++ b/translate/src/modules/batchactions/components/ApproveAll.tsx
@@ -20,7 +20,7 @@ export function ApproveAll({
     <button className='approve-all' onClick={approveAll}>
       <Title {...response} />
       {requestInProgress === 'approve' ? (
-        <i className='fa fa-2x fa-circle-notch fa-spin'></i>
+        <i className='fas fa-2x fa-circle-notch fa-spin'></i>
       ) : null}
     </button>
   );
diff --git a/translate/src/modules/batchactions/components/BatchActions.css b/translate/src/modules/batchactions/components/BatchActions.css
index a36739ae3a..76712ede60 100644
--- a/translate/src/modules/batchactions/components/BatchActions.css
+++ b/translate/src/modules/batchactions/components/BatchActions.css
@@ -39,7 +39,7 @@
   color: var(--status-translated-alt);
 }
 
-.batch-actions .topbar button .fa {
+.batch-actions .topbar button .fas {
   padding-right: 5px;
 }
 
@@ -96,7 +96,7 @@
   position: relative;
 }
 
-.batch-actions .actions-panel button .fa {
+.batch-actions .actions-panel button .fas {
   position: absolute;
   right: 10px;
   top: 12px;
diff --git a/translate/src/modules/batchactions/components/BatchActions.tsx b/translate/src/modules/batchactions/components/BatchActions.tsx
index de01d064b7..86bf12e292 100644
--- a/translate/src/modules/batchactions/components/BatchActions.tsx
+++ b/translate/src/modules/batchactions/components/BatchActions.tsx
@@ -106,7 +106,7 @@ export function BatchActions(): React.ReactElement<'div'> {
         <Localized
           id='batchactions-BatchActions--header-select-all'
           attrs={{ title: true }}
-          elems={{ glyph: <i className='fa fa-check fa-lg' /> }}
+          elems={{ glyph: <i className='fas fa-check fa-lg' /> }}
         >
           <button
             className='select-all'
@@ -117,13 +117,13 @@ export function BatchActions(): React.ReactElement<'div'> {
           </button>
         </Localized>
         {batchactions.requestInProgress === 'select-all' ? (
-          <div className='selecting fa fa-sync fa-spin'></div>
+          <div className='selecting fas fa-sync fa-spin'></div>
         ) : (
           <Localized
             id='batchactions-BatchActions--header-selected-count'
             attrs={{ title: true }}
             elems={{
-              glyph: <i className='fa fa-times fa-lg' />,
+              glyph: <i className='fas fa-times fa-lg' />,
               stress: <span className='stress' />,
             }}
             vars={{ count: batchactions.entities.length }}
diff --git a/translate/src/modules/batchactions/components/RejectAll.test.js b/translate/src/modules/batchactions/components/RejectAll.test.js
index 2b2c86a352..6e9c8b342c 100644
--- a/translate/src/modules/batchactions/components/RejectAll.test.js
+++ b/translate/src/modules/batchactions/components/RejectAll.test.js
@@ -30,7 +30,7 @@ describe('<RejectAll>', () => {
     expect(wrapper.find('#batchactions-RejectAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-RejectAll--success')).toHaveLength(0);
     expect(wrapper.find('#batchactions-RejectAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders error button correctly', () => {
@@ -51,7 +51,7 @@ describe('<RejectAll>', () => {
     expect(wrapper.find('#batchactions-RejectAll--error')).toHaveLength(1);
     expect(wrapper.find('#batchactions-RejectAll--success')).toHaveLength(0);
     expect(wrapper.find('#batchactions-RejectAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders success button correctly', () => {
@@ -72,7 +72,7 @@ describe('<RejectAll>', () => {
     expect(wrapper.find('#batchactions-RejectAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-RejectAll--success')).toHaveLength(1);
     expect(wrapper.find('#batchactions-RejectAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders success with invalid button correctly', () => {
@@ -94,7 +94,7 @@ describe('<RejectAll>', () => {
     expect(wrapper.find('#batchactions-RejectAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-RejectAll--success')).toHaveLength(1);
     expect(wrapper.find('#batchactions-RejectAll--invalid')).toHaveLength(1);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('raise confirmation warning when Reject All button is clicked', () => {
diff --git a/translate/src/modules/batchactions/components/RejectAll.tsx b/translate/src/modules/batchactions/components/RejectAll.tsx
index 0a1d59ab86..07c92b7db6 100644
--- a/translate/src/modules/batchactions/components/RejectAll.tsx
+++ b/translate/src/modules/batchactions/components/RejectAll.tsx
@@ -32,7 +32,7 @@ export function RejectAll({
         response={response ?? {}}
       />
       {requestInProgress === 'reject' ? (
-        <i className='fa fa-2x fa-circle-notch fa-spin'></i>
+        <i className='fas fa-2x fa-circle-notch fa-spin'></i>
       ) : null}
     </button>
   );
diff --git a/translate/src/modules/batchactions/components/ReplaceAll.test.js b/translate/src/modules/batchactions/components/ReplaceAll.test.js
index 15cdaef8c7..f6fb56b895 100644
--- a/translate/src/modules/batchactions/components/ReplaceAll.test.js
+++ b/translate/src/modules/batchactions/components/ReplaceAll.test.js
@@ -30,7 +30,7 @@ describe('<ReplaceAll>', () => {
     expect(wrapper.find('#batchactions-ReplaceAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ReplaceAll--success')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ReplaceAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders error button correctly', () => {
@@ -51,7 +51,7 @@ describe('<ReplaceAll>', () => {
     expect(wrapper.find('#batchactions-ReplaceAll--error')).toHaveLength(1);
     expect(wrapper.find('#batchactions-ReplaceAll--success')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ReplaceAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders success button correctly', () => {
@@ -72,7 +72,7 @@ describe('<ReplaceAll>', () => {
     expect(wrapper.find('#batchactions-ReplaceAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ReplaceAll--success')).toHaveLength(1);
     expect(wrapper.find('#batchactions-ReplaceAll--invalid')).toHaveLength(0);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('renders success with invalid button correctly', () => {
@@ -94,7 +94,7 @@ describe('<ReplaceAll>', () => {
     expect(wrapper.find('#batchactions-ReplaceAll--error')).toHaveLength(0);
     expect(wrapper.find('#batchactions-ReplaceAll--success')).toHaveLength(1);
     expect(wrapper.find('#batchactions-ReplaceAll--invalid')).toHaveLength(1);
-    expect(wrapper.find('.fa')).toHaveLength(0);
+    expect(wrapper.find('.fas')).toHaveLength(0);
   });
 
   it('performs replace all action when Replace All button is clicked', () => {
diff --git a/translate/src/modules/batchactions/components/ReplaceAll.tsx b/translate/src/modules/batchactions/components/ReplaceAll.tsx
index 2e5495dc94..fb1d8aa12a 100644
--- a/translate/src/modules/batchactions/components/ReplaceAll.tsx
+++ b/translate/src/modules/batchactions/components/ReplaceAll.tsx
@@ -20,7 +20,7 @@ export function ReplaceAll({
     <button className='replace-all' onClick={replaceAll}>
       <Title {...response} />
       {requestInProgress !== 'replace' ? null : (
-        <i className='fa fa-2x fa-circle-notch fa-spin'></i>
+        <i className='fas fa-2x fa-circle-notch fa-spin'></i>
       )}
     </button>
   );
diff --git a/translate/src/modules/comments/components/AddComment.tsx b/translate/src/modules/comments/components/AddComment.tsx
index 159fbee860..b40b34bfab 100644
--- a/translate/src/modules/comments/components/AddComment.tsx
+++ b/translate/src/modules/comments/components/AddComment.tsx
@@ -284,7 +284,7 @@ export function AddComment({
         <Localized
           id='comments-AddComment--submit-button'
           attrs={{ title: true }}
-          elems={{ glyph: <i className='fa fa-paper-plane' /> }}
+          elems={{ glyph: <i className='fas fa-paper-plane' /> }}
         >
           <button
             className='submit-button'
diff --git a/translate/src/modules/comments/components/Comment.css b/translate/src/modules/comments/components/Comment.css
index f1ad634eca..7e43215f2b 100644
--- a/translate/src/modules/comments/components/Comment.css
+++ b/translate/src/modules/comments/components/Comment.css
@@ -85,6 +85,6 @@
   top: -10px;
 }
 
-.comments-list .comment .comment-pin .fa {
+.comments-list .comment .comment-pin .fas {
   padding-right: 2px;
 }
diff --git a/translate/src/modules/comments/components/Comment.tsx b/translate/src/modules/comments/components/Comment.tsx
index ad29e8a584..61453caad4 100644
--- a/translate/src/modules/comments/components/Comment.tsx
+++ b/translate/src/modules/comments/components/Comment.tsx
@@ -64,7 +64,7 @@ export function Comment(props: Props): null | React.ReactElement<'li'> {
             </Linkify>
             {!comment.pinned ? null : (
               <div className='comment-pin'>
-                <div className='fa fa-thumbtack'></div>
+                <div className='fas fa-thumbtack'></div>
                 <Localized id='comments-Comment--pinned'>
                   <span className='pinned'>PINNED</span>
                 </Localized>
diff --git a/translate/src/modules/editor/components/EditorMainAction.tsx b/translate/src/modules/editor/components/EditorMainAction.tsx
index 5562d090bc..fccbfa2049 100644
--- a/translate/src/modules/editor/components/EditorMainAction.tsx
+++ b/translate/src/modules/editor/components/EditorMainAction.tsx
@@ -73,7 +73,7 @@ export function EditorMainAction(): React.ReactElement<React.ElementType> {
   const label = action.toUpperCase();
 
   if (busy) {
-    const glyph = <i className='fa fa-circle-notch fa-spin' />;
+    const glyph = <i className='fas fa-circle-notch fa-spin' />;
     return (
       <Localized id={id} attrs={{ title: true }} elems={{ glyph }}>
         <button className={className} disabled title={title}>
diff --git a/translate/src/modules/editor/components/EditorMenu.css b/translate/src/modules/editor/components/EditorMenu.css
index 2adcf74fe6..16d3b6766d 100644
--- a/translate/src/modules/editor/components/EditorMenu.css
+++ b/translate/src/modules/editor/components/EditorMenu.css
@@ -26,7 +26,7 @@
   color: var(--status-translated);
 }
 
-.editor-menu .actions button .fa {
+.editor-menu .actions button .fas {
   margin-right: 4px;
 }
 
diff --git a/translate/src/modules/editor/components/EditorSettings.css b/translate/src/modules/editor/components/EditorSettings.css
index 2eb927c7e9..0f68adf1c4 100644
--- a/translate/src/modules/editor/components/EditorSettings.css
+++ b/translate/src/modules/editor/components/EditorSettings.css
@@ -55,16 +55,16 @@
   padding: 0;
 }
 
-.editor-settings .menu .check-box .fa {
+.editor-settings .menu .check-box .fas {
   margin-right: 6px;
 }
 
-.editor-settings .menu .check-box .fa:before {
+.editor-settings .menu .check-box .fas:before {
   color: var(--status-error);
   content: '';
 }
 
-.editor-settings .menu .check-box.enabled .fa:before {
+.editor-settings .menu .check-box.enabled .fas:before {
   color: var(--status-translated);
   content: '';
 }
diff --git a/translate/src/modules/editor/components/EditorSettings.tsx b/translate/src/modules/editor/components/EditorSettings.tsx
index f0aff227cd..d2fe515c39 100644
--- a/translate/src/modules/editor/components/EditorSettings.tsx
+++ b/translate/src/modules/editor/components/EditorSettings.tsx
@@ -40,7 +40,7 @@ export function EditorSettingsDialog({
       <Localized
         id='editor-EditorSettings--toolkit-checks'
         attrs={{ title: true }}
-        elems={{ glyph: <i className='fa fa-fw' /> }}
+        elems={{ glyph: <i className='fas fa-fw' /> }}
       >
         <li
           className={
@@ -57,7 +57,7 @@ export function EditorSettingsDialog({
         <Localized
           id='editor-EditorSettings--force-suggestions'
           attrs={{ title: true }}
-          elems={{ glyph: <i className='fa fa-fw' /> }}
+          elems={{ glyph: <i className='fas fa-fw' /> }}
         >
           <li
             className={
@@ -103,7 +103,7 @@ export function EditorSettings({
   return (
     <div className='editor-settings'>
       <div
-        className='selector fa fa-cog'
+        className='selector fas fa-cog'
         title='Settings'
         onClick={toggleVisible}
       />
diff --git a/translate/src/modules/entitieslist/components/EntitiesList.css b/translate/src/modules/entitieslist/components/EntitiesList.css
index a6432936d9..44a1bde03f 100644
--- a/translate/src/modules/entitieslist/components/EntitiesList.css
+++ b/translate/src/modules/entitieslist/components/EntitiesList.css
@@ -65,7 +65,7 @@
   float: left;
 }
 
-.entities .toolbar .clear-selected .fa {
+.entities .toolbar .clear-selected .fas {
   padding-right: 6px;
 }
 
@@ -74,7 +74,7 @@
   text-align: right;
 }
 
-.entities .toolbar .edit-selected .fa {
+.entities .toolbar .edit-selected .fas {
   padding-left: 6px;
 }
 
diff --git a/translate/src/modules/entitieslist/components/EntitiesList.tsx b/translate/src/modules/entitieslist/components/EntitiesList.tsx
index f5a9bb9b37..5f2b70e8b2 100644
--- a/translate/src/modules/entitieslist/components/EntitiesList.tsx
+++ b/translate/src/modules/entitieslist/components/EntitiesList.tsx
@@ -46,7 +46,7 @@ const EntitiesToolbar = ({
       id='entitieslist-EntitiesList--clear-selected'
       attrs={{ title: true }}
       elems={{
-        glyph: <i className='fa fa-times fa-lg' />,
+        glyph: <i className='fas fa-times fa-lg' />,
       }}
     >
       <button
@@ -61,7 +61,7 @@ const EntitiesToolbar = ({
       id='entitieslist-EntitiesList--edit-selected'
       attrs={{ title: true }}
       elems={{
-        glyph: <i className='fa fa-chevron-right fa-lg' />,
+        glyph: <i className='fas fa-chevron-right fa-lg' />,
         stress: <span className='selected-count' />,
       }}
       vars={{ count }}
@@ -271,7 +271,7 @@ export function EntitiesList(): React.ReactElement<'div'> {
     return (
       <div className='entities unselectable' ref={list}>
         <h3 className='no-results'>
-          <div className='fa fa-exclamation-circle'></div>
+          <div className='fas fa-exclamation-circle'></div>
           No results
         </h3>
       </div>
diff --git a/translate/src/modules/entitieslist/components/Entity.css b/translate/src/modules/entitieslist/components/Entity.css
index c75c7c8630..ce477ce9b6 100644
--- a/translate/src/modules/entitieslist/components/Entity.css
+++ b/translate/src/modules/entitieslist/components/Entity.css
@@ -69,7 +69,7 @@
   font-size: 16px;
 }
 
-.entity .status.fa {
+.entity .status.fas {
   left: 16px;
   top: 13px;
   position: absolute;
diff --git a/translate/src/modules/entitieslist/components/Entity.tsx b/translate/src/modules/entitieslist/components/Entity.tsx
index fe6548a62b..0c1d8f024b 100644
--- a/translate/src/modules/entitieslist/components/Entity.tsx
+++ b/translate/src/modules/entitieslist/components/Entity.tsx
@@ -115,7 +115,7 @@ export function Entity({
 
   return (
     <li className={cn} onClick={handleSelectEntity}>
-      <span className='status fa' onClick={handleForBatchEditing} />
+      <span className='status fas' onClick={handleForBatchEditing} />
       {selected && !entity.isSibling ? (
         <div>
           {!areSiblingsActive && showSiblingEntitiesButton() && (
@@ -153,7 +153,7 @@ export function Entity({
             search={parameters.search}
           />
         </p>
-        <div className='indicator fa fa-chevron-right'></div>
+        <div className='indicator fas fa-chevron-right'></div>
       </div>
     </li>
   );
diff --git a/translate/src/modules/entitydetails/components/EntityNavigation.css b/translate/src/modules/entitydetails/components/EntityNavigation.css
index a82385c2ca..f2437749f5 100644
--- a/translate/src/modules/entitydetails/components/EntityNavigation.css
+++ b/translate/src/modules/entitydetails/components/EntityNavigation.css
@@ -37,6 +37,6 @@
   pointer-events: none;
 }
 
-.entity-navigation button .fa {
+.entity-navigation button .fas {
   padding-right: 5px;
 }
diff --git a/translate/src/modules/entitydetails/components/EntityNavigation.tsx b/translate/src/modules/entitydetails/components/EntityNavigation.tsx
index dc90e983a5..3d5a45471a 100644
--- a/translate/src/modules/entitydetails/components/EntityNavigation.tsx
+++ b/translate/src/modules/entitydetails/components/EntityNavigation.tsx
@@ -89,7 +89,7 @@ export function EntityNavigation(): React.ReactElement {
       <Localized
         id='entitydetails-EntityNavigation--string-list'
         attrs={{ title: true }}
-        elems={{ glyph: <i className='fa fa-chevron-left fa-lg' /> }}
+        elems={{ glyph: <i className='fas fa-chevron-left fa-lg' /> }}
       >
         <button
           className='string-list'
@@ -102,7 +102,7 @@ export function EntityNavigation(): React.ReactElement {
       <Localized
         id='entitydetails-EntityNavigation--link'
         attrs={{ title: true }}
-        elems={{ glyph: <i className='fa fa-link fa-lg' /> }}
+        elems={{ glyph: <i className='fas fa-link fa-lg' /> }}
       >
         <button
           className='link'
@@ -116,7 +116,7 @@ export function EntityNavigation(): React.ReactElement {
         id='entitydetails-EntityNavigation--next'
         attrs={{ title: true }}
         elems={{
-          glyph: <i className='fa fa-chevron-down fa-lg' />,
+          glyph: <i className='fas fa-chevron-down fa-lg' />,
         }}
       >
         <button
@@ -131,7 +131,7 @@ export function EntityNavigation(): React.ReactElement {
       <Localized
         id='entitydetails-EntityNavigation--previous'
         attrs={{ title: true }}
-        elems={{ glyph: <i className='fa fa-chevron-up fa-lg' /> }}
+        elems={{ glyph: <i className='fas fa-chevron-up fa-lg' /> }}
       >
         <button
           className='previous'
diff --git a/translate/src/modules/history/components/HistoryTranslation.css b/translate/src/modules/history/components/HistoryTranslation.css
index 5ffbd0af55..06a3ff8b0c 100644
--- a/translate/src/modules/history/components/HistoryTranslation.css
+++ b/translate/src/modules/history/components/HistoryTranslation.css
@@ -92,7 +92,7 @@
   outline: none;
 }
 
-.history .translation .content > header button.fa,
+.history .translation .content > header button.fas,
 .history .translation .content > header button.far {
   font-size: 1.8em;
   height: 22px;
diff --git a/translate/src/modules/history/components/HistoryTranslation.tsx b/translate/src/modules/history/components/HistoryTranslation.tsx
index 8655bf7891..ecf3661a5d 100644
--- a/translate/src/modules/history/components/HistoryTranslation.tsx
+++ b/translate/src/modules/history/components/HistoryTranslation.tsx
@@ -282,7 +282,7 @@ export function HistoryTranslationBase({
                 }}
               >
                 <span
-                  className='fa machinery-sources'
+                  className='fas machinery-sources'
                   title={'Copied ({ $machinerySources })'}
                 ></span>
               </Localized>
@@ -337,7 +337,7 @@ export function HistoryTranslationBase({
                       attrs={{ title: true }}
                     >
                       <button
-                        className='unapprove fa'
+                        className='unapprove fas'
                         title='Unapprove'
                         name='unapprove'
                         onClick={handleStatusChange}
@@ -350,7 +350,7 @@ export function HistoryTranslationBase({
                       attrs={{ title: true }}
                     >
                       <button
-                        className='unapprove fa'
+                        className='unapprove fas'
                         title='Approved'
                         disabled
                       />
@@ -363,7 +363,7 @@ export function HistoryTranslationBase({
                     attrs={{ title: true }}
                   >
                     <button
-                      className='approve fa'
+                      className='approve fas'
                       title='Approve'
                       name='approve'
                       onClick={handleStatusChange}
@@ -376,7 +376,7 @@ export function HistoryTranslationBase({
                     attrs={{ title: true }}
                   >
                     <button
-                      className='approve fa'
+                      className='approve fas'
                       title='Not approved'
                       disabled
                     />
@@ -390,7 +390,7 @@ export function HistoryTranslationBase({
                       attrs={{ title: true }}
                     >
                       <button
-                        className='unreject fa'
+                        className='unreject fas'
                         title='Unreject'
                         name='unreject'
                         onClick={handleStatusChange}
@@ -403,7 +403,7 @@ export function HistoryTranslationBase({
                       attrs={{ title: true }}
                     >
                       <button
-                        className='unreject fa'
+                        className='unreject fas'
                         title='Rejected'
                         disabled
                       />
@@ -416,7 +416,7 @@ export function HistoryTranslationBase({
                     attrs={{ title: true }}
                   >
                     <button
-                      className='reject fa'
+                      className='reject fas'
                       title='Reject'
                       name='reject'
                       onClick={handleStatusChange}
@@ -429,7 +429,7 @@ export function HistoryTranslationBase({
                     attrs={{ title: true }}
                   >
                     <button
-                      className='reject fa'
+                      className='reject fas'
                       title='Not rejected'
                       disabled
                     />
diff --git a/translate/src/modules/loaders/components/SkeletonLoader.tsx b/translate/src/modules/loaders/components/SkeletonLoader.tsx
index c695cc05c1..fffa98e5ca 100644
--- a/translate/src/modules/loaders/components/SkeletonLoader.tsx
+++ b/translate/src/modules/loaders/components/SkeletonLoader.tsx
@@ -24,7 +24,7 @@ export function SkeletonLoader({
         }`;
         return (
           <li className={classes} key={i}>
-            <span className='status fa' />
+            <span className='status fas' />
             <div>
               <p className='source-string'></p>
               <p className='text-2'></p>
diff --git a/translate/src/modules/machinery/components/Machinery.tsx b/translate/src/modules/machinery/components/Machinery.tsx
index 92878a038f..340f32955c 100644
--- a/translate/src/modules/machinery/components/Machinery.tsx
+++ b/translate/src/modules/machinery/components/Machinery.tsx
@@ -33,17 +33,17 @@ export function Machinery(): React.ReactElement<'section'> {
       <div className='search-wrapper clearfix'>
         <label htmlFor='machinery-search'>
           {input && input !== query ? (
-            <button className='fa fa-search' onClick={getResults}></button>
+            <button className='fas fa-search' onClick={getResults}></button>
           ) : query ? (
             <button
-              className='fa fa-times'
+              className='fas fa-times'
               onClick={() => {
                 setInput('');
                 getResults();
               }}
             ></button>
           ) : (
-            <div className='fa fa-search'></div>
+            <div className='fas fa-search'></div>
           )}
         </label>
         <form
diff --git a/translate/src/modules/machinery/components/MachineryTranslation.tsx b/translate/src/modules/machinery/components/MachineryTranslation.tsx
index 457e1050e1..20aed69f57 100644
--- a/translate/src/modules/machinery/components/MachineryTranslation.tsx
+++ b/translate/src/modules/machinery/components/MachineryTranslation.tsx
@@ -140,7 +140,7 @@ function MachineryTranslationSuggestion({
         lang={code}
       >
         {loading ? (
-          <i className='fa fa-circle-notch fa-spin' />
+          <i className='fas fa-circle-notch fa-spin' />
         ) : (
           <GenericTranslation
             content={llmTranslation || translation.translation}
diff --git a/translate/src/modules/machinery/components/source/GoogleTranslation.tsx b/translate/src/modules/machinery/components/source/GoogleTranslation.tsx
index b26f401b7a..6c9da3b2c0 100644
--- a/translate/src/modules/machinery/components/source/GoogleTranslation.tsx
+++ b/translate/src/modules/machinery/components/source/GoogleTranslation.tsx
@@ -86,7 +86,7 @@ export function GoogleTranslation({
             <Localized id='machinery-GoogleTranslation--dropdown-title'>
               <span className='dropdown-title'>AI</span>
             </Localized>
-            <i className='fa fa-caret-down'></i>
+            <i className='fas fa-caret-down'></i>
           </button>
         </span>
       </Localized>
diff --git a/translate/src/modules/project/components/ProjectMenu.tsx b/translate/src/modules/project/components/ProjectMenu.tsx
index 92452610a3..7e26e7a3d3 100644
--- a/translate/src/modules/project/components/ProjectMenu.tsx
+++ b/translate/src/modules/project/components/ProjectMenu.tsx
@@ -51,7 +51,7 @@ export function ProjectMenuDialog({
     setSortAsc(sortActive !== 'progress' || !sortAsc);
   };
 
-  const sort = sortAsc ? 'fa fa-caret-up' : 'fa fa-caret-down';
+  const sort = sortAsc ? 'fas fa-caret-up' : 'fas fa-caret-down';
   const projectClass = sortActive === 'project' ? sort : '';
   const progressClass = sortActive === 'progress' ? sort : '';
 
@@ -67,7 +67,7 @@ export function ProjectMenuDialog({
   return (
     <div ref={ref} className='menu'>
       <div className='search-wrapper'>
-        <div className='icon fa fa-search'></div>
+        <div className='icon fas fa-search'></div>
         <Localized
           id='project-ProjectMenu--search-placeholder'
           attrs={{ placeholder: true }}
@@ -166,7 +166,7 @@ export function ProjectMenu({
         <Localized id='project-ProjectMenu--all-projects'>
           <span>All Projects</span>
         </Localized>
-        <span className='icon fa fa-caret-down'></span>
+        <span className='icon fas fa-caret-down'></span>
       </div>
       {visible && (
         <ProjectMenuDialog
diff --git a/translate/src/modules/projectinfo/components/ProjectInfo.tsx b/translate/src/modules/projectinfo/components/ProjectInfo.tsx
index 66ebfb2d9f..a0e460363d 100644
--- a/translate/src/modules/projectinfo/components/ProjectInfo.tsx
+++ b/translate/src/modules/projectinfo/components/ProjectInfo.tsx
@@ -40,7 +40,7 @@ export function ProjectInfo(): React.ReactElement<'div'> | null {
   return fetching || !info ? null : (
     <div className='project-info'>
       <div className='button' onClick={toggleVisible}>
-        <span className='fa fa-info'></span>
+        <span className='fas fa-info'></span>
       </div>
       {visible && <ProjectInfoDialog info={info} onDiscard={handleDiscard} />}
     </div>
diff --git a/translate/src/modules/resource/components/ResourceMenu.tsx b/translate/src/modules/resource/components/ResourceMenu.tsx
index b7e6d3bbb4..b44eef4cce 100644
--- a/translate/src/modules/resource/components/ResourceMenu.tsx
+++ b/translate/src/modules/resource/components/ResourceMenu.tsx
@@ -61,7 +61,7 @@ function ResourceMenuDialog({
     return res.path;
   };
 
-  const sort = sortAsc ? 'fa fa-caret-up' : 'fa fa-caret-down';
+  const sort = sortAsc ? 'fas fa-caret-up' : 'fas fa-caret-down';
   const resourceClass = sortActive === 'resource' ? sort : '';
   const progressClass = sortActive === 'progress' ? sort : '';
 
@@ -72,7 +72,7 @@ function ResourceMenuDialog({
   return (
     <div ref={ref} className='menu'>
       <div className='search-wrapper'>
-        <div className='icon fa fa-search'></div>
+        <div className='icon fas fa-search'></div>
         <Localized
           id='resource-ResourceMenu--search-placeholder'
           attrs={{ placeholder: true }}
@@ -236,7 +236,7 @@ export function ResourceMenu({
         title={resource}
       >
         <span>{resourceName}</span>
-        <span className='icon fa fa-caret-down'></span>
+        <span className='icon fas fa-caret-down'></span>
       </div>
 
       {visible && (
diff --git a/translate/src/modules/search/components/FiltersPanel.css b/translate/src/modules/search/components/FiltersPanel.css
index 35554536d4..b0f2073482 100644
--- a/translate/src/modules/search/components/FiltersPanel.css
+++ b/translate/src/modules/search/components/FiltersPanel.css
@@ -21,11 +21,11 @@
   width: 43px;
 }
 
-.filters-panel .visibility-switch .status.fa {
+.filters-panel .visibility-switch .status.fas {
   font-size: 16px;
 }
 
-.filters-panel .visibility-switch.unreviewed .status.fa {
+.filters-panel .visibility-switch.unreviewed .status.fas {
   top: 7px;
 }
 
@@ -80,6 +80,10 @@
   top: 4px;
 }
 
+.filters-panel .menu li.unreviewed .status {
+  left: 4.5px;
+}
+
 .filters-panel .menu li.all .status {
   left: 3px;
   top: 5px;
@@ -248,7 +252,7 @@
   font-weight: 300;
 }
 
-.filters-panel .toolbar button .fa {
+.filters-panel .toolbar button .fas {
   padding-right: 6px;
 }
 
diff --git a/translate/src/modules/search/components/FiltersPanel.tsx b/translate/src/modules/search/components/FiltersPanel.tsx
index aad503773f..1c951cdef1 100644
--- a/translate/src/modules/search/components/FiltersPanel.tsx
+++ b/translate/src/modules/search/components/FiltersPanel.tsx
@@ -71,7 +71,7 @@ const StatusFilter = ({
     onClick={onSelect}
   >
     <span
-      className='status fa'
+      className='status fas'
       onClick={(ev) => {
         ev.stopPropagation();
         onToggle();
@@ -99,12 +99,16 @@ const TagFilter = ({
     className={classNames('tag', slug, selected && 'selected')}
     onClick={onSelect}
   >
-    <span className='status fa' onClick={onSelect}></span>
+    <span className='status fas' onClick={onSelect}></span>
     <span className='title'>{name}</span>
     <span className='priority'>
       {[1, 2, 3, 4, 5].map((index) => (
         <span
-          className={classNames('fa', 'fa-star', index <= priority && 'active')}
+          className={classNames(
+            'fas',
+            'fa-star',
+            index <= priority && 'active',
+          )}
           key={index}
         ></span>
       ))}
@@ -125,7 +129,7 @@ const ExtraFilter = ({
 }) => (
   <li className={classNames(slug, selected && 'selected')} onClick={onSelect}>
     <span
-      className='status fa'
+      className='status fas'
       onClick={(ev) => {
         ev.stopPropagation();
         onToggle();
@@ -155,7 +159,7 @@ const AuthorFilter = ({
     <figure>
       <span className='sel'>
         <span
-          className='status fa'
+          className='status fas'
           onClick={(ev) => {
             ev.stopPropagation();
             onToggle();
@@ -192,7 +196,7 @@ const FilterToolbar = ({
       id='search-FiltersPanel--clear-selection'
       attrs={{ title: true }}
       elems={{
-        glyph: <i className='fa fa-times fa-lg' />,
+        glyph: <i className='fas fa-times fa-lg' />,
       }}
     >
       <button
@@ -207,7 +211,7 @@ const FilterToolbar = ({
       id='search-FiltersPanel--apply-filters'
       attrs={{ title: true }}
       elems={{
-        glyph: <i className='fa fa-check fa-lg' />,
+        glyph: <i className='fas fa-check fa-lg' />,
         stress: <span className='applied-count' />,
       }}
       vars={{ count }}
@@ -422,7 +426,7 @@ export function FiltersPanel({
         className={`visibility-switch ${filterIcon}`}
         onClick={toggleVisible}
       >
-        <span className='status fa'></span>
+        <span className='status fas'></span>
       </div>
       {visible ? (
         <FiltersPanelDialog
diff --git a/translate/src/modules/search/components/SearchBox.css b/translate/src/modules/search/components/SearchBox.css
index a12a1c399e..cdbe3fb559 100644
--- a/translate/src/modules/search/components/SearchBox.css
+++ b/translate/src/modules/search/components/SearchBox.css
@@ -41,7 +41,7 @@
   top: 16px;
 }
 
-.search-box .status.fa {
+.search-box .status.fas {
   position: absolute;
   left: 16px;
   top: 9px;
@@ -52,7 +52,7 @@
   top: 9px;
 }
 
-.search-box .status.fa::before {
+.search-box .status.fas::before {
   color: var(--light-grey-7);
   content: '';
 }
@@ -122,7 +122,7 @@
 .search-box .missing-without-unreviewed .status:before {
   content: '\f0eb';
   font-size: 18px;
-  margin-left: 1px;
+  margin-left: 1.5px;
 }
 
 .filters-panel .menu .missing-without-unreviewed.selected .status::before,
diff --git a/translate/src/modules/search/components/SearchPanel.css b/translate/src/modules/search/components/SearchPanel.css
index 56caab091d..cdb7b0a823 100644
--- a/translate/src/modules/search/components/SearchPanel.css
+++ b/translate/src/modules/search/components/SearchPanel.css
@@ -13,7 +13,7 @@
       color: var(--white-1);
     }
 
-    .fa {
+    .fas {
       font-size: 17px;
       margin-left: 10px;
       margin-top: 9px;
@@ -66,12 +66,12 @@
           padding-right: 10px;
         }
 
-        .fa::before {
+        .fas::before {
           color: var(--status-error);
           content: '';
         }
 
-        &.enabled .fa::before {
+        &.enabled .fas::before {
           color: var(--status-translated);
           content: '';
         }
diff --git a/translate/src/modules/search/components/SearchPanel.tsx b/translate/src/modules/search/components/SearchPanel.tsx
index d27e44c43d..d9f2aff6ea 100644
--- a/translate/src/modules/search/components/SearchPanel.tsx
+++ b/translate/src/modules/search/components/SearchPanel.tsx
@@ -38,10 +38,8 @@ const SearchOption = ({
         onToggle();
       }}
     >
-      <i className='fa'></i>
-      <Localized
-        id={`search-SearchPanel--option-name-${slug.replace(/_/g, '-')}`}
-      >
+      <i className='fas'></i>
+      <Localized id={`search-SearchPanel--option-name-${slug}`}>
         <span className='label'>{name}</span>
       </Localized>
     </li>
@@ -130,7 +128,7 @@ export function SearchPanel({
   return (
     <div className='search-panel'>
       <div className='visibility-switch' onClick={toggleVisible}>
-        <span className='fa fa-search'></span>
+        <span className='fas fa-search'></span>
       </div>
       {visible ? (
         <SearchPanelDialog
diff --git a/translate/src/modules/search/components/TimeRangeFilter.css b/translate/src/modules/search/components/TimeRangeFilter.css
index 2c16289971..77ca827900 100644
--- a/translate/src/modules/search/components/TimeRangeFilter.css
+++ b/translate/src/modules/search/components/TimeRangeFilter.css
@@ -16,7 +16,7 @@
   color: var(--status-translated);
 }
 
-.filters-panel .menu li.for-time-range button .fa {
+.filters-panel .menu li.for-time-range button .fas {
   padding-right: 5px;
 }
 
diff --git a/translate/src/modules/search/components/TimeRangeFilter.tsx b/translate/src/modules/search/components/TimeRangeFilter.tsx
index 7751a1d016..0b8d0b77d1 100644
--- a/translate/src/modules/search/components/TimeRangeFilter.tsx
+++ b/translate/src/modules/search/components/TimeRangeFilter.tsx
@@ -211,7 +211,7 @@ export function TimeRangeFilter({
           <Localized
             id='search-TimeRangeFilter--edit-range'
             elems={{
-              glyph: <i className='fa fa-chart-area' />,
+              glyph: <i className='fas fa-chart-area' />,
             }}
           >
             <button onClick={toggleEditingTimeRange} className='edit-range'>
@@ -227,7 +227,7 @@ export function TimeRangeFilter({
         )}
       </li>
       <li className={timeRangeClass} onClick={applyTimeRangeFilter}>
-        <span className='status fa' onClick={toggleTimeRangeFilter}></span>
+        <span className='status fas' onClick={toggleTimeRangeFilter}></span>
 
         <span className='clearfix'>
           <label className='from'>
diff --git a/translate/src/modules/user/components/FileUpload.tsx b/translate/src/modules/user/components/FileUpload.tsx
index 4a0a8f2615..dc61676c38 100644
--- a/translate/src/modules/user/components/FileUpload.tsx
+++ b/translate/src/modules/user/components/FileUpload.tsx
@@ -36,7 +36,7 @@ export function FileUpload({ parameters }: Props): React.ReactElement<'form'> {
         <Localized
           id='user-UserMenu--upload-translations'
           elems={{
-            glyph: <i className='fa fa-cloud-upload-alt fa-fw' />,
+            glyph: <i className='fas fa-cloud-upload-alt fa-fw' />,
           }}
         >
           <span>{'<glyph></glyph>Upload Translations'}</span>
diff --git a/translate/src/modules/user/components/UserMenu.css b/translate/src/modules/user/components/UserMenu.css
index 2c331c7a52..5a18a72464 100644
--- a/translate/src/modules/user/components/UserMenu.css
+++ b/translate/src/modules/user/components/UserMenu.css
@@ -84,7 +84,7 @@
   width: 100%;
 }
 
-.user-menu .menu li i.fa,
+.user-menu .menu li i.fas,
 .user-menu .menu li i.fab {
   margin: 0 8px 0 -2px;
 }
diff --git a/translate/src/modules/user/components/UserMenu.tsx b/translate/src/modules/user/components/UserMenu.tsx
index d639545ec3..245dfa722e 100644
--- a/translate/src/modules/user/components/UserMenu.tsx
+++ b/translate/src/modules/user/components/UserMenu.tsx
@@ -108,7 +108,7 @@ export function UserMenuDialog({
                 value='light'
                 text='Light'
                 title='Use a light theme'
-                icon='fa fa-sun'
+                icon='fas fa-sun'
                 user={user}
                 onClick={handleThemeButtonClick}
               />
@@ -116,7 +116,7 @@ export function UserMenuDialog({
                 value='system'
                 text='System'
                 title='Use a theme that matches your system settings'
-                icon='fa fa-laptop'
+                icon='fas fa-laptop'
                 user={user}
                 onClick={handleThemeButtonClick}
               />
@@ -130,7 +130,7 @@ export function UserMenuDialog({
       <li>
         <Localized
           id='user-UserMenu--download-terminology'
-          elems={{ glyph: <i className='fa fa-cloud-download-alt fa-fw' /> }}
+          elems={{ glyph: <i className='fas fa-cloud-download-alt fa-fw' /> }}
         >
           <a href={`/terminology/${locale}.tbx`}>
             {'<glyph></glyph>Download Terminology'}
@@ -141,7 +141,7 @@ export function UserMenuDialog({
       <li>
         <Localized
           id='user-UserMenu--download-tm'
-          elems={{ glyph: <i className='fa fa-cloud-download-alt fa-fw' /> }}
+          elems={{ glyph: <i className='fas fa-cloud-download-alt fa-fw' /> }}
         >
           <a href={`/translation-memory/${locale}.${project}.tmx`}>
             {'<glyph></glyph>Download Translation Memory'}
@@ -153,7 +153,7 @@ export function UserMenuDialog({
         <li>
           <Localized
             id='user-UserMenu--download-translations'
-            elems={{ glyph: <i className='fa fa-cloud-download-alt fa-fw' /> }}
+            elems={{ glyph: <i className='fas fa-cloud-download-alt fa-fw' /> }}
           >
             <a
               href={`/translations/?code=${locale}&slug=${project}&part=${resource}`}
@@ -175,7 +175,7 @@ export function UserMenuDialog({
       <li>
         <Localized
           id='user-UserMenu--terms'
-          elems={{ glyph: <i className='fa fa-gavel fa-fw' /> }}
+          elems={{ glyph: <i className='fas fa-gavel fa-fw' /> }}
         >
           <a href='/terms/' rel='noopener noreferrer' target='_blank'>
             {'<glyph></glyph>Terms of Use'}
@@ -201,7 +201,7 @@ export function UserMenuDialog({
       <li>
         <Localized
           id='user-UserMenu--feedback'
-          elems={{ glyph: <i className='fa fa-comment-dots fa-fw' /> }}
+          elems={{ glyph: <i className='fas fa-comment-dots fa-fw' /> }}
         >
           <a
             href='https://discourse.mozilla.org/c/pontoon'
@@ -216,7 +216,7 @@ export function UserMenuDialog({
       <li>
         <Localized
           id='user-UserMenu--help'
-          elems={{ glyph: <i className='fa fa-life-ring fa-fw' /> }}
+          elems={{ glyph: <i className='fas fa-life-ring fa-fw' /> }}
         >
           <a
             href='https://mozilla-l10n.github.io/localizer-documentation/tools/pontoon/'
@@ -235,7 +235,7 @@ export function UserMenuDialog({
           <li>
             <Localized
               id='user-UserMenu--admin'
-              elems={{ glyph: <i className='fa fa-wrench fa-fw' /> }}
+              elems={{ glyph: <i className='fas fa-wrench fa-fw' /> }}
             >
               <a href='/admin/'>{'<glyph></glyph>Admin'}</a>
             </Localized>
@@ -244,7 +244,7 @@ export function UserMenuDialog({
             <li>
               <Localized
                 id='user-UserMenu--admin-project'
-                elems={{ glyph: <i className='fa fa-wrench fa-fw' /> }}
+                elems={{ glyph: <i className='fas fa-wrench fa-fw' /> }}
               >
                 <a href={`/admin/projects/${project}/`}>
                   {'<glyph></glyph>Admin · Current Project'}
@@ -260,7 +260,7 @@ export function UserMenuDialog({
           <li>
             <Localized
               id='user-UserMenu--settings'
-              elems={{ glyph: <i className='fa fa-cog fa-fw' /> }}
+              elems={{ glyph: <i className='fas fa-cog fa-fw' /> }}
             >
               <a href='/settings/'>{'<glyph></glyph>Settings'}</a>
             </Localized>
@@ -268,7 +268,7 @@ export function UserMenuDialog({
           <li>
             <Localized
               id='user-SignOut--sign-out'
-              elems={{ glyph: <i className='fa fa-sign-out-alt fa-fw' /> }}
+              elems={{ glyph: <i className='fas fa-sign-out-alt fa-fw' /> }}
             >
               <SignInOutForm url={user.signOutURL}>
                 {'<glyph></glyph>Sign out'}
@@ -297,7 +297,7 @@ export function UserMenu(props: Props): React.ReactElement<'div'> {
             width='44'
           />
         ) : (
-          <div className='menu-icon fa fa-bars' />
+          <div className='menu-icon fas fa-bars' />
         )}
       </div>
 
diff --git a/translate/src/modules/user/components/UserNotificationsMenu.tsx b/translate/src/modules/user/components/UserNotificationsMenu.tsx
index d7623e2165..0e5b74afc8 100644
--- a/translate/src/modules/user/components/UserNotificationsMenu.tsx
+++ b/translate/src/modules/user/components/UserNotificationsMenu.tsx
@@ -39,7 +39,7 @@ export function UserNotificationsMenuDialog({
           })
         ) : (
           <li className='no'>
-            <i className='icon fa fa-bell fa-fw'></i>
+            <i className='icon fas fa-bell fa-fw'></i>
             <Localized id='user-UserNotificationsMenu--no-notifications-title'>
               <p className='title'>No new notifications.</p>
             </Localized>