From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 12 Aug 2022 14:37:49 +0000 (+0200)
Subject: Replace legacy icons in JS files
X-Git-Tag: 6.0.0_Alpha_1~1024^2~2^2~60
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=abf3d80d41ce1871dd2c7103f17cc3897b6a8dd0;p=GitHub%2FWoltLab%2FWCF.git

Replace legacy icons in JS files
---

diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.ts b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.ts
index 72b2cf6bf3..87a969298b 100644
--- a/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.ts
@@ -123,7 +123,7 @@ class AcpUiDevtoolsNotificationTest implements AjaxCallbackObject, DialogCallbac
   private test(event: MouseEvent): void {
     const button = event.currentTarget as HTMLButtonElement;
 
-    button.innerHTML = '<span class="icon icon16 fa-spinner"></span>';
+    button.innerHTML = '<fa-icon size="16" name="spinner" solid></fa-icon>';
 
     this.buttons.forEach((button) => (button.disabled = true));
 
diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts
index 667d207b88..30728961cf 100644
--- a/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.ts
@@ -141,7 +141,7 @@ class AcpUiDevtoolsProjectSync {
     }
 
     const syncAll = document.createElement("li");
-    syncAll.innerHTML = `<a href="#" class="button"><span class="icon icon16 fa-refresh"></span> ${Language.get(
+    syncAll.innerHTML = `<a href="#" class="button"><fa-icon size="16" name="arrows-rotate" solid></fa-icon> ${Language.get(
       "wcf.acp.devtools.sync.syncAll",
     )}</a>`;
     this.buttonSyncAll = syncAll.children[0] as HTMLAnchorElement;
@@ -154,7 +154,7 @@ class AcpUiDevtoolsProjectSync {
   private sync(pluginName: string, target: string): void {
     const identifier = this.getButtonIdentifier(pluginName, target);
     this.buttons.get(identifier)!.disabled = true;
-    this.buttonStatus.get(identifier)!.innerHTML = '<span class="icon icon16 fa-spinner"></span>';
+    this.buttonStatus.get(identifier)!.innerHTML = '<fa-icon size="16" name="spinner" solid></fa-icon>';
 
     Ajax.api(this, {
       parameters: {
diff --git a/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts b/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts
index 8c1bc4ae5f..9031e3861c 100644
--- a/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts
+++ b/ts/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.ts
@@ -75,7 +75,7 @@ class EmailSmtpTest implements AjaxCallbackObject {
     event.preventDefault();
 
     this.buttonRunTest.classList.add("disabled");
-    this.buttonRunTest.innerHTML = `<span class="icon icon16 fa-spinner"></span> ${Language.get("wcf.global.loading")}`;
+    this.buttonRunTest.innerHTML = `<fa-icon size="16" name="spinner" solid></fa-icon> ${Language.get("wcf.global.loading")}`;
 
     DomUtil.innerError(this.buttonRunTest, false);
 
diff --git a/ts/WoltLabSuite/Core/Date/Picker.ts b/ts/WoltLabSuite/Core/Date/Picker.ts
index fbe365626f..badf4afff6 100644
--- a/ts/WoltLabSuite/Core/Date/Picker.ts
+++ b/ts/WoltLabSuite/Core/Date/Picker.ts
@@ -58,7 +58,7 @@ function createPicker() {
   _dateMonthPrevious.className = "previous jsTooltip";
   _dateMonthPrevious.title = Language.get("wcf.date.datePicker.previousMonth");
   _dateMonthPrevious.setAttribute("aria-label", Language.get("wcf.date.datePicker.previousMonth"));
-  _dateMonthPrevious.innerHTML = '<span class="icon icon16 fa-arrow-left"></span>';
+  _dateMonthPrevious.innerHTML = '<fa-icon size="16" name="arrow-left" solid></fa-icon>';
   _dateMonthPrevious.addEventListener("click", () => DatePicker.previousMonth());
   header.appendChild(_dateMonthPrevious);
 
@@ -90,7 +90,7 @@ function createPicker() {
   _dateMonthNext.className = "next jsTooltip";
   _dateMonthNext.title = Language.get("wcf.date.datePicker.nextMonth");
   _dateMonthNext.setAttribute("aria-label", Language.get("wcf.date.datePicker.nextMonth"));
-  _dateMonthNext.innerHTML = '<span class="icon icon16 fa-arrow-right"></span>';
+  _dateMonthNext.innerHTML = '<fa-icon size="16" name="arrow-right" solid></fa-icon>';
   _dateMonthNext.addEventListener("click", () => DatePicker.nextMonth());
   header.appendChild(_dateMonthNext);
 
diff --git a/ts/WoltLabSuite/Core/Ui/Article/Search.ts b/ts/WoltLabSuite/Core/Ui/Article/Search.ts
index a89d87f2c9..4a4e914a68 100644
--- a/ts/WoltLabSuite/Core/Ui/Article/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Article/Search.ts
@@ -133,7 +133,7 @@ class UiArticleSearch implements AjaxCallbackObject, DialogCallbackObject {
             <dd>
               <div class="inputAddon">
                 <input type="text" id="wcfUiArticleSearchInput" class="long">
-                <a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>
+                <a href="#" class="inputSuffix"><fa-icon size="16" name="search" solid></fa-icon></a>
               </div>
             </dd>
           </dl>
diff --git a/ts/WoltLabSuite/Core/Ui/Comment/Add.ts b/ts/WoltLabSuite/Core/Ui/Comment/Add.ts
index 3018446c0f..ec60bd0a43 100644
--- a/ts/WoltLabSuite/Core/Ui/Comment/Add.ts
+++ b/ts/WoltLabSuite/Core/Ui/Comment/Add.ts
@@ -206,7 +206,7 @@ class UiCommentAdd {
     if (this._loadingOverlay === null) {
       this._loadingOverlay = document.createElement("div");
       this._loadingOverlay.className = "commentLoadingOverlay";
-      this._loadingOverlay.innerHTML = '<span class="icon icon96 fa-spinner"></span>';
+      this._loadingOverlay.innerHTML = '<fa-icon size="96" name="spinner" solid></fa-icon>';
     }
 
     this._content.classList.add("loading");
diff --git a/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts b/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts
index c4ec8d0638..e1e9c55213 100644
--- a/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts
+++ b/ts/WoltLabSuite/Core/Ui/Comment/Edit.ts
@@ -93,7 +93,7 @@ class UiCommentEdit {
   protected _prepare(): void {
     this._editorContainer = document.createElement("div");
     this._editorContainer.className = "commentEditorContainer";
-    this._editorContainer.innerHTML = '<span class="icon icon48 fa-spinner"></span>';
+    this._editorContainer.innerHTML = '<fa-icon size="48" name="spinner" solid></fa-icon>';
 
     const content = this._activeElement!.querySelector(".commentContentContainer")!;
     content.insertBefore(this._editorContainer, content.firstChild);
diff --git a/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts b/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts
index cc18eefeee..c711925066 100644
--- a/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts
+++ b/ts/WoltLabSuite/Core/Ui/Comment/Response/Edit.ts
@@ -96,7 +96,7 @@ class UiCommentResponseEdit extends UiCommentEdit {
   protected _prepare(): void {
     this._editorContainer = document.createElement("div");
     this._editorContainer.className = "commentEditorContainer";
-    this._editorContainer.innerHTML = '<span class="icon icon48 fa-spinner"></span>';
+    this._editorContainer.innerHTML = '<fa-icon size="48" name="spinner" solid></fa-icon>';
 
     const content = this._activeElement!.querySelector(".commentResponseContent")!;
     content.insertBefore(this._editorContainer, content.firstChild);
diff --git a/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts b/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts
index 98a42eda32..c26fdbcc7a 100644
--- a/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts
+++ b/ts/WoltLabSuite/Core/Ui/ItemList/Filter.ts
@@ -98,7 +98,7 @@ class UiItemListFilter {
     this._clearButton.href = "#";
     this._clearButton.className = "button inputSuffix disabled jsTooltip";
     this._clearButton.title = Language.get("wcf.global.filter.button.clear");
-    this._clearButton.innerHTML = '<span class="icon icon16 fa-times"></span>';
+    this._clearButton.innerHTML = '<fa-icon size="16" name="times" solid></fa-icon>';
     this._clearButton.addEventListener("click", (event) => {
       event.preventDefault();
 
@@ -113,7 +113,7 @@ class UiItemListFilter {
       visibilityButton.href = "#";
       visibilityButton.className = "button inputSuffix jsTooltip";
       visibilityButton.title = Language.get("wcf.global.filter.button.visibility");
-      visibilityButton.innerHTML = '<span class="icon icon16 fa-eye"></span>';
+      visibilityButton.innerHTML = '<fa-icon size="16" name="eye"></fa-icon>';
       visibilityButton.addEventListener("click", (ev) => this._toggleVisibility(ev));
       inputAddon.appendChild(visibilityButton);
     }
diff --git a/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts b/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
index 8a3d90e5bc..96dc4e6a06 100644
--- a/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
+++ b/ts/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.ts
@@ -125,7 +125,7 @@ export class UiItemListLineBreakSeparatedText {
     this.addButton.href = "#";
     this.addButton.classList.add("button", "inputSuffix", "jsTooltip");
     this.addButton.title = Language.get("wcf.global.button.add");
-    this.addButton.innerHTML = '<span class="icon icon16 fa-plus"></span>';
+    this.addButton.innerHTML = '<fa-icon size="16" name="plus" solid></fa-icon>';
     this.addButton.addEventListener("click", (ev) => this.addItem(ev));
     inputAddon.appendChild(this.addButton);
 
@@ -133,7 +133,7 @@ export class UiItemListLineBreakSeparatedText {
     this.clearButton.href = "#";
     this.clearButton.classList.add("button", "inputSuffix", "jsTooltip");
     this.clearButton.title = Language.get("wcf.global.button.delete");
-    this.clearButton.innerHTML = '<span class="icon icon16 fa-times"></span>';
+    this.clearButton.innerHTML = '<fa-icon size="16" name="times" solid></fa-icon>';
     this.clearButton.addEventListener("click", (ev) => this.clearList(ev));
     inputAddon.appendChild(this.clearButton);
     if (this.items.size === 0) {
diff --git a/ts/WoltLabSuite/Core/Ui/Message/Reply.ts b/ts/WoltLabSuite/Core/Ui/Message/Reply.ts
index 358d2a16a5..c12be3daba 100644
--- a/ts/WoltLabSuite/Core/Ui/Message/Reply.ts
+++ b/ts/WoltLabSuite/Core/Ui/Message/Reply.ts
@@ -247,7 +247,7 @@ class UiMessageReply {
     if (this._loadingOverlay === null) {
       this._loadingOverlay = document.createElement("div");
       this._loadingOverlay.className = "messageContentLoadingOverlay";
-      this._loadingOverlay.innerHTML = '<span class="icon icon96 fa-spinner"></span>';
+      this._loadingOverlay.innerHTML = '<fa-icon size="96" name="spinner" solid></fa-icon>';
     }
 
     this._content.classList.add("loading");
diff --git a/ts/WoltLabSuite/Core/Ui/Page/Action.ts b/ts/WoltLabSuite/Core/Ui/Page/Action.ts
index 710563da6d..b0a6fabcd7 100644
--- a/ts/WoltLabSuite/Core/Ui/Page/Action.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Action.ts
@@ -30,7 +30,7 @@ function buildToTopButton(): HTMLAnchorElement {
   button.href = "";
   button.title = Language.get("wcf.global.scrollUp");
   button.setAttribute("aria-hidden", "true");
-  button.innerHTML = '<span class="icon icon32 fa-angle-up"></span>';
+  button.innerHTML = '<fa-icon size="32" name="angle-up" solid></fa-icon>';
 
   button.addEventListener("click", scrollToTop);
 
diff --git a/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts b/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts
index 4db052f8fd..98668271ba 100644
--- a/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Header/Menu.ts
@@ -150,7 +150,7 @@ function initOverflowNavigation(): void {
   _buttonShowNext = document.createElement("a");
   _buttonShowNext.className = "mainMenuShowNext";
   _buttonShowNext.href = "#";
-  _buttonShowNext.innerHTML = '<span class="icon icon32 fa-angle-right"></span>';
+  _buttonShowNext.innerHTML = '<fa-icon size="32" name="angle-right" solid></fa-icon>';
   _buttonShowNext.setAttribute("aria-hidden", "true");
   _buttonShowNext.addEventListener("click", (event) => {
     event.preventDefault();
@@ -163,7 +163,7 @@ function initOverflowNavigation(): void {
   _buttonShowPrevious = document.createElement("a");
   _buttonShowPrevious.className = "mainMenuShowPrevious";
   _buttonShowPrevious.href = "#";
-  _buttonShowPrevious.innerHTML = '<span class="icon icon32 fa-angle-left"></span>';
+  _buttonShowPrevious.innerHTML = '<fa-icon size="32" name="angle-left" solid></fa-icon>';
   _buttonShowPrevious.setAttribute("aria-hidden", "true");
   _buttonShowPrevious.addEventListener("click", (event) => {
     event.preventDefault();
diff --git a/ts/WoltLabSuite/Core/Ui/Page/Search.ts b/ts/WoltLabSuite/Core/Ui/Page/Search.ts
index e326d381c2..9352c79f00 100644
--- a/ts/WoltLabSuite/Core/Ui/Page/Search.ts
+++ b/ts/WoltLabSuite/Core/Ui/Page/Search.ts
@@ -130,7 +130,7 @@ class UiPageSearch implements AjaxCallbackObject, DialogCallbackObject {
           <dd>
             <div class="inputAddon">
               <input type="text" id="wcfUiPageSearchInput" class="long">
-              <a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>
+              <a href="#" class="inputSuffix"><fa-icon size="16" name="search" solid></fa-icon></a>
             </div>
           </dd>
         </dl>
diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts
index 99ec9e8a5a..fda343f89b 100644
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts
@@ -59,7 +59,7 @@ class UserMenuDataModerationQueue implements UserMenuProvider {
   getMenuButtons(): UserMenuButton[] {
     return [
       {
-        icon: '<span class="icon icon24 fa-trash-o"></span>',
+        icon: '<fa-icon size="24" name="trash-can"></fa-icon>',
         link: this.options.deletedContentLink,
         name: "deletedContent",
         title: this.options.deletedContent,
diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
index 35c0134de7..fb46e4c378 100644
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
@@ -169,7 +169,7 @@ class UserMenuDataNotification implements DesktopNotifications, UserMenuProvider
   getMenuButtons(): UserMenuButton[] {
     return [
       {
-        icon: '<span class="icon icon24 fa-cog"></span>',
+        icon: '<fa-icon size="24" name="cog" solid></fa-icon>',
         link: this.options.settingsLink,
         name: "settings",
         title: this.options.settingsTitle,
diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
index 5dfe2560d4..ef47b47c42 100644
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
@@ -32,7 +32,7 @@ export class UserMenuView {
     this.buildElement();
 
     this.markAllAsReadButton = this.buildButton({
-      icon: '<span class="icon icon24 fa-check"></span>',
+      icon: '<fa-icon size="24" name="check" solid></fa-icon>',
       link: "#",
       name: "markAllAsRead",
       title: Language.get("wcf.global.button.markAllAsRead"),
@@ -210,7 +210,7 @@ export class UserMenuView {
 
   private reset(): void {
     const content = this.getContent();
-    content.innerHTML = `<span class="userMenuContentStatus"><span class="icon icon24 fa-spinner"></span></span>`;
+    content.innerHTML = `<span class="userMenuContentStatus"><fa-icon size="24" name="spinner" solid></fa-icon></span>`;
   }
 
   private buildElement(): void {
diff --git a/ts/WoltLabSuite/Core/Ui/User/Search/Input.ts b/ts/WoltLabSuite/Core/Ui/User/Search/Input.ts
index bd8dd6e533..56b4361770 100644
--- a/ts/WoltLabSuite/Core/Ui/User/Search/Input.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Search/Input.ts
@@ -39,7 +39,7 @@ class UiUserSearchInput extends UiSearchInput {
 
     const box = document.createElement("div");
     box.className = "box16";
-    box.innerHTML = item.type === "group" ? `<span class="icon icon16 fa-users"></span>` : item.icon;
+    box.innerHTML = item.type === "group" ? `<fa-icon size="16" name="users" solid></fa-icon>` : item.icon;
     box.appendChild(listItem.children[0]);
     listItem.appendChild(box);
 
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js
index d583655c09..810778b29f 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Notification/Test.js
@@ -95,7 +95,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Language
          */
         test(event) {
             const button = event.currentTarget;
-            button.innerHTML = '<span class="icon icon16 fa-spinner"></span>';
+            button.innerHTML = '<fa-icon size="16" name="spinner" solid></fa-icon>';
             this.buttons.forEach((button) => (button.disabled = true));
             Ajax.api(this, {
                 parameters: {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js
index b550ad8cc2..8b62855644 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Devtools/Project/Sync.js
@@ -92,7 +92,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Language
                 }
             }
             const syncAll = document.createElement("li");
-            syncAll.innerHTML = `<a href="#" class="button"><span class="icon icon16 fa-refresh"></span> ${Language.get("wcf.acp.devtools.sync.syncAll")}</a>`;
+            syncAll.innerHTML = `<a href="#" class="button"><fa-icon size="16" name="arrows-rotate" solid></fa-icon> ${Language.get("wcf.acp.devtools.sync.syncAll")}</a>`;
             this.buttonSyncAll = syncAll.children[0];
             this.buttonSyncAll.addEventListener("click", this.syncAll.bind(this));
             const list = document.querySelector(".contentHeaderNavigation > ul");
@@ -101,7 +101,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../../../../Language
         sync(pluginName, target) {
             const identifier = this.getButtonIdentifier(pluginName, target);
             this.buttons.get(identifier).disabled = true;
-            this.buttonStatus.get(identifier).innerHTML = '<span class="icon icon16 fa-spinner"></span>';
+            this.buttonStatus.get(identifier).innerHTML = '<fa-icon size="16" name="spinner" solid></fa-icon>';
             Ajax.api(this, {
                 parameters: {
                     pluginName,
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js
index a2c0ed6500..07e165ad11 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Acp/Ui/Option/EmailSmtpTest.js
@@ -57,7 +57,7 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Dom/Util", "..
         onClick(event) {
             event.preventDefault();
             this.buttonRunTest.classList.add("disabled");
-            this.buttonRunTest.innerHTML = `<span class="icon icon16 fa-spinner"></span> ${Language.get("wcf.global.loading")}`;
+            this.buttonRunTest.innerHTML = `<fa-icon size="16" name="spinner" solid></fa-icon> ${Language.get("wcf.global.loading")}`;
             Util_1.default.innerError(this.buttonRunTest, false);
             window.setTimeout(() => {
                 const startTls = document.querySelector('input[name="values[mail_smtp_starttls]"]:checked');
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
index f07e22ce58..79ca064ffe 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Date/Picker.js
@@ -51,7 +51,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         _dateMonthPrevious.className = "previous jsTooltip";
         _dateMonthPrevious.title = Language.get("wcf.date.datePicker.previousMonth");
         _dateMonthPrevious.setAttribute("aria-label", Language.get("wcf.date.datePicker.previousMonth"));
-        _dateMonthPrevious.innerHTML = '<span class="icon icon16 fa-arrow-left"></span>';
+        _dateMonthPrevious.innerHTML = '<fa-icon size="16" name="arrow-left" solid></fa-icon>';
         _dateMonthPrevious.addEventListener("click", () => DatePicker.previousMonth());
         header.appendChild(_dateMonthPrevious);
         const monthYearContainer = document.createElement("span");
@@ -78,7 +78,7 @@ define(["require", "exports", "tslib", "../Core", "./Util", "../Dom/Change/Liste
         _dateMonthNext.className = "next jsTooltip";
         _dateMonthNext.title = Language.get("wcf.date.datePicker.nextMonth");
         _dateMonthNext.setAttribute("aria-label", Language.get("wcf.date.datePicker.nextMonth"));
-        _dateMonthNext.innerHTML = '<span class="icon icon16 fa-arrow-right"></span>';
+        _dateMonthNext.innerHTML = '<fa-icon size="16" name="arrow-right" solid></fa-icon>';
         _dateMonthNext.addEventListener("click", () => DatePicker.nextMonth());
         header.appendChild(_dateMonthNext);
         _dateGrid = document.createElement("ul");
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Article/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Article/Search.js
index 73ac1e56e1..92cf8cd8d5 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Article/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Article/Search.js
@@ -109,7 +109,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Dom/Util", "../../La
             <dd>
               <div class="inputAddon">
                 <input type="text" id="wcfUiArticleSearchInput" class="long">
-                <a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>
+                <a href="#" class="inputSuffix"><fa-icon size="16" name="search" solid></fa-icon></a>
               </div>
             </dd>
           </dl>
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
index b7bfafc9d3..8a3fbbadd0 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Add.js
@@ -163,7 +163,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Controller/Captcha",
             if (this._loadingOverlay === null) {
                 this._loadingOverlay = document.createElement("div");
                 this._loadingOverlay.className = "commentLoadingOverlay";
-                this._loadingOverlay.innerHTML = '<span class="icon icon96 fa-spinner"></span>';
+                this._loadingOverlay.innerHTML = '<fa-icon size="96" name="spinner" solid></fa-icon>';
             }
             this._content.classList.add("loading");
             this._content.appendChild(this._loadingOverlay);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js
index eb78a7ac26..7da1118e98 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Edit.js
@@ -72,7 +72,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Dom/Ch
         _prepare() {
             this._editorContainer = document.createElement("div");
             this._editorContainer.className = "commentEditorContainer";
-            this._editorContainer.innerHTML = '<span class="icon icon48 fa-spinner"></span>';
+            this._editorContainer.innerHTML = '<fa-icon size="48" name="spinner" solid></fa-icon>';
             const content = this._activeElement.querySelector(".commentContentContainer");
             content.insertBefore(this._editorContainer, content.firstChild);
         }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js
index 7898fddfb1..e3ac8b6083 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Comment/Response/Edit.js
@@ -74,7 +74,7 @@ define(["require", "exports", "tslib", "../../../Ajax", "../../../Core", "../../
         _prepare() {
             this._editorContainer = document.createElement("div");
             this._editorContainer.className = "commentEditorContainer";
-            this._editorContainer.innerHTML = '<span class="icon icon48 fa-spinner"></span>';
+            this._editorContainer.innerHTML = '<fa-icon size="48" name="spinner" solid></fa-icon>';
             const content = this._activeElement.querySelector(".commentResponseContent");
             content.insertBefore(this._editorContainer, content.firstChild);
         }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js
index c29f821e71..4d52e34b75 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/Filter.js
@@ -67,7 +67,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Util", "../../La
             this._clearButton.href = "#";
             this._clearButton.className = "button inputSuffix disabled jsTooltip";
             this._clearButton.title = Language.get("wcf.global.filter.button.clear");
-            this._clearButton.innerHTML = '<span class="icon icon16 fa-times"></span>';
+            this._clearButton.innerHTML = '<fa-icon size="16" name="times" solid></fa-icon>';
             this._clearButton.addEventListener("click", (event) => {
                 event.preventDefault();
                 this.reset();
@@ -79,7 +79,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Dom/Util", "../../La
                 visibilityButton.href = "#";
                 visibilityButton.className = "button inputSuffix jsTooltip";
                 visibilityButton.title = Language.get("wcf.global.filter.button.visibility");
-                visibilityButton.innerHTML = '<span class="icon icon16 fa-eye"></span>';
+                visibilityButton.innerHTML = '<fa-icon size="16" name="eye"></fa-icon>';
                 visibilityButton.addEventListener("click", (ev) => this._toggleVisibility(ev));
                 inputAddon.appendChild(visibilityButton);
             }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
index 5d292511ca..4d8f6d3ba8 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/ItemList/LineBreakSeparatedText.js
@@ -103,14 +103,14 @@ define(["require", "exports", "tslib", "../Confirmation", "../../Language", "../
             this.addButton.href = "#";
             this.addButton.classList.add("button", "inputSuffix", "jsTooltip");
             this.addButton.title = Language.get("wcf.global.button.add");
-            this.addButton.innerHTML = '<span class="icon icon16 fa-plus"></span>';
+            this.addButton.innerHTML = '<fa-icon size="16" name="plus" solid></fa-icon>';
             this.addButton.addEventListener("click", (ev) => this.addItem(ev));
             inputAddon.appendChild(this.addButton);
             this.clearButton = document.createElement("a");
             this.clearButton.href = "#";
             this.clearButton.classList.add("button", "inputSuffix", "jsTooltip");
             this.clearButton.title = Language.get("wcf.global.button.delete");
-            this.clearButton.innerHTML = '<span class="icon icon16 fa-times"></span>';
+            this.clearButton.innerHTML = '<fa-icon size="16" name="times" solid></fa-icon>';
             this.clearButton.addEventListener("click", (ev) => this.clearList(ev));
             inputAddon.appendChild(this.clearButton);
             if (this.items.size === 0) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js
index ed13bbfabf..4d18dfbf24 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/Reply.js
@@ -185,7 +185,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Core", "../../Event/
             if (this._loadingOverlay === null) {
                 this._loadingOverlay = document.createElement("div");
                 this._loadingOverlay.className = "messageContentLoadingOverlay";
-                this._loadingOverlay.innerHTML = '<span class="icon icon96 fa-spinner"></span>';
+                this._loadingOverlay.innerHTML = '<fa-icon size="96" name="spinner" solid></fa-icon>';
             }
             this._content.classList.add("loading");
             this._content.appendChild(this._loadingOverlay);
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js
index d111f4a277..b35b51c4ee 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Action.js
@@ -29,7 +29,7 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../Ui
         button.href = "";
         button.title = Language.get("wcf.global.scrollUp");
         button.setAttribute("aria-hidden", "true");
-        button.innerHTML = '<span class="icon icon32 fa-angle-up"></span>';
+        button.innerHTML = '<fa-icon size="32" name="angle-up" solid></fa-icon>';
         button.addEventListener("click", scrollToTop);
         return button;
     }
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js
index e8e6d9a823..f0f1619df2 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Header/Menu.js
@@ -131,7 +131,7 @@ define(["require", "exports", "tslib", "../../../Environment", "../../../Languag
         _buttonShowNext = document.createElement("a");
         _buttonShowNext.className = "mainMenuShowNext";
         _buttonShowNext.href = "#";
-        _buttonShowNext.innerHTML = '<span class="icon icon32 fa-angle-right"></span>';
+        _buttonShowNext.innerHTML = '<fa-icon size="32" name="angle-right" solid></fa-icon>';
         _buttonShowNext.setAttribute("aria-hidden", "true");
         _buttonShowNext.addEventListener("click", (event) => {
             event.preventDefault();
@@ -141,7 +141,7 @@ define(["require", "exports", "tslib", "../../../Environment", "../../../Languag
         _buttonShowPrevious = document.createElement("a");
         _buttonShowPrevious.className = "mainMenuShowPrevious";
         _buttonShowPrevious.href = "#";
-        _buttonShowPrevious.innerHTML = '<span class="icon icon32 fa-angle-left"></span>';
+        _buttonShowPrevious.innerHTML = '<fa-icon size="32" name="angle-left" solid></fa-icon>';
         _buttonShowPrevious.setAttribute("aria-hidden", "true");
         _buttonShowPrevious.addEventListener("click", (event) => {
             event.preventDefault();
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js
index cec46abafc..ddb8d89d8e 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Page/Search.js
@@ -103,7 +103,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Dom/Util", "../../La
           <dd>
             <div class="inputAddon">
               <input type="text" id="wcfUiPageSearchInput" class="long">
-              <a href="#" class="inputSuffix"><span class="icon icon16 fa-search"></span></a>
+              <a href="#" class="inputSuffix"><fa-icon size="16" name="search" solid></fa-icon></a>
             </div>
           </dd>
         </dl>
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js
index 1860cae57f..ba7da1d048 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js
@@ -33,7 +33,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../View", "../Manage
         getMenuButtons() {
             return [
                 {
-                    icon: '<span class="icon icon24 fa-trash-o"></span>',
+                    icon: '<fa-icon size="24" name="trash-can"></fa-icon>',
                     link: this.options.deletedContentLink,
                     name: "deletedContent",
                     title: this.options.deletedContent,
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js
index 04ca982f1b..3d2e0f8337 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js
@@ -121,7 +121,7 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../View", "../Manage
         getMenuButtons() {
             return [
                 {
-                    icon: '<span class="icon icon24 fa-cog"></span>',
+                    icon: '<fa-icon size="24" name="cog" solid></fa-icon>',
                     link: this.options.settingsLink,
                     name: "settings",
                     title: this.options.settingsTitle,
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
index b73d3eff5a..c27c8af7d2 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
@@ -22,7 +22,7 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
             this.element = document.createElement("div");
             this.buildElement();
             this.markAllAsReadButton = this.buildButton({
-                icon: '<span class="icon icon24 fa-check"></span>',
+                icon: '<fa-icon size="24" name="check" solid></fa-icon>',
                 link: "#",
                 name: "markAllAsRead",
                 title: Language.get("wcf.global.button.markAllAsRead"),
@@ -167,7 +167,7 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
         }
         reset() {
             const content = this.getContent();
-            content.innerHTML = `<span class="userMenuContentStatus"><span class="icon icon24 fa-spinner"></span></span>`;
+            content.innerHTML = `<span class="userMenuContentStatus"><fa-icon size="24" name="spinner" solid></fa-icon></span>`;
         }
         buildElement() {
             this.element.hidden = true;
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Search/Input.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Search/Input.js
index cdeb0dc7c5..0fd04827cf 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Search/Input.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Search/Input.js
@@ -31,7 +31,7 @@ define(["require", "exports", "tslib", "../../../Core", "../../Search/Input"], f
             listItem.dataset.type = item.type;
             const box = document.createElement("div");
             box.className = "box16";
-            box.innerHTML = item.type === "group" ? `<span class="icon icon16 fa-users"></span>` : item.icon;
+            box.innerHTML = item.type === "group" ? `<fa-icon size="16" name="users" solid></fa-icon>` : item.icon;
             box.appendChild(listItem.children[0]);
             listItem.appendChild(box);
             return listItem;