From ae4dd172293174705722adbd1ad691c33d17f30c Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 18 Aug 2022 19:57:15 +0200
Subject: [PATCH] Convert legacy icons

---
 com.woltlab.wcf/templates/__iconFormField.tpl |  1 -
 .../templates/__suffixFormFieldContainer.tpl  |  2 +-
 .../templates/__userObjectWatchButton.tpl     |  6 +++++-
 com.woltlab.wcf/templates/aclSimple.tpl       | 10 +++++++---
 com.woltlab.wcf/templates/articleList.tpl     |  9 ++++++++-
 com.woltlab.wcf/templates/editHistory.tpl     |  8 ++++++--
 .../lineBreakSeparatedTextOptionType.tpl      |  4 +++-
 com.woltlab.wcf/templates/mediaListItems.tpl  | 16 +++++++++++----
 com.woltlab.wcf/templates/mediaManager.tpl    |  4 +++-
 com.woltlab.wcf/templates/membersList.tpl     |  2 +-
 .../templates/messageQuoteList.tpl            |  6 +++++-
 com.woltlab.wcf/templates/messageSidebar.tpl  |  6 +++++-
 com.woltlab.wcf/templates/moderationList.tpl  | 16 +++++++--------
 com.woltlab.wcf/templates/optionFieldList.tpl | 13 +++++++++++-
 .../templates/pageHeaderSearch.tpl            |  6 +++---
 com.woltlab.wcf/templates/pageHeaderUser.tpl  |  2 +-
 com.woltlab.wcf/templates/styleChooser.tpl    |  9 ++++++++-
 ts/WoltLabSuite/Core/Ui/Acl/Simple.ts         |  4 ++--
 .../files/acp/templates/__iconFormField.tpl   |  1 -
 .../install/files/acp/templates/aclSimple.tpl | 10 +++++++---
 .../files/acp/templates/mediaListItems.tpl    | 20 +++++++++++++------
 .../js/WoltLabSuite/Core/Ui/Acl/Simple.js     |  4 ++--
 22 files changed, 113 insertions(+), 46 deletions(-)

diff --git a/com.woltlab.wcf/templates/__iconFormField.tpl b/com.woltlab.wcf/templates/__iconFormField.tpl
index ad6728ef72..6c47495c41 100644
--- a/com.woltlab.wcf/templates/__iconFormField.tpl
+++ b/com.woltlab.wcf/templates/__iconFormField.tpl
@@ -19,7 +19,6 @@
 			const input = document.getElementById('{@$field->getPrefixedId()}');
 			
 			const callback = (iconName, forceSolid) => {
-				icon.className = 'icon icon64 fa-' + iconName;
 				input.value = iconName;
 
 				let icon = iconContainer.querySelector("fa-icon");
diff --git a/com.woltlab.wcf/templates/__suffixFormFieldContainer.tpl b/com.woltlab.wcf/templates/__suffixFormFieldContainer.tpl
index c6ea9e6356..a1cc3421d0 100644
--- a/com.woltlab.wcf/templates/__suffixFormFieldContainer.tpl
+++ b/com.woltlab.wcf/templates/__suffixFormFieldContainer.tpl
@@ -15,7 +15,7 @@
 					{/if}
 				{else}
 					<span class="inputSuffix dropdown" id="{@$element->getSuffixField()->getPrefixedId()}_dropdown">
-						<span class="dropdownToggle">{@$element->getSelectedSuffixOption()[label]} <span class="icon icon16 fa-caret-down pointer"></span></span>
+						<span class="dropdownToggle">{@$element->getSelectedSuffixOption()[label]} {icon size=16 name='caret-down' type='solid'}</span>
 						
 						<ul class="dropdownMenu">
 							{foreach from=$element->getSuffixField()->getNestedOptions() item=__fieldNestedOption}
diff --git a/com.woltlab.wcf/templates/__userObjectWatchButton.tpl b/com.woltlab.wcf/templates/__userObjectWatchButton.tpl
index 8a98ab45a8..c60374a51a 100644
--- a/com.woltlab.wcf/templates/__userObjectWatchButton.tpl
+++ b/com.woltlab.wcf/templates/__userObjectWatchButton.tpl
@@ -1,7 +1,11 @@
 {if $__wcf->user->userID}
 	<div class="dropdown contentInteractionButton">
 		<a class="jsTooltip button small dropdownToggle jsSubscribeButton userObjectWatchDropdownToggle{if $isSubscribed} active{/if}" data-object-type="{$objectType}" data-object-id="{$objectID}" data-is-subscribed="{if $isSubscribed}1{else}0{/if}">
-			<span class="icon icon16 fa-bookmark{if !$isSubscribed}-o{/if}"></span>
+			{if $isSubscribed}
+				{icon size=16 name='bookmark' type='solid'}
+			{else}
+				{icon size=16 name='bookmark'}
+			{/if}
 			<span>{if $isSubscribed}{lang}wcf.user.objectWatch.button.subscribed{/lang}{else}{lang}wcf.user.objectWatch.button.subscribe{/lang}{/if}</span>
 		</a>
 		<ul class="dropdownMenu userObjectWatchDropdown" data-object-type="{$objectType}" data-object-id="{$objectID}">
diff --git a/com.woltlab.wcf/templates/aclSimple.tpl b/com.woltlab.wcf/templates/aclSimple.tpl
index 57f18f4e3a..8165da1ef1 100644
--- a/com.woltlab.wcf/templates/aclSimple.tpl
+++ b/com.woltlab.wcf/templates/aclSimple.tpl
@@ -57,15 +57,19 @@
 					<li>
 						{icon size=16 name='users'}
 						<span class="aclLabel">{$aclGroup}</span>
-						<span class="icon icon16 fa-times pointer jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span>
+						<button class="aclItemDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}">
+							<fa-icon size="16" name="xmark"></fa-icon>
+						</button>
 						<input type="hidden" name="{@$__aclInputName}[group][]" value="{@$aclGroup->groupID}">
 					</li>
 				{/foreach}
 				{foreach from=$aclValues[user] item=aclUser}
 					<li>
-						{icon size=16 name='user' type='solid'}
+						{icon size=16 name='user'}
 						<span class="aclLabel">{$aclUser}</span>
-						<span class="icon icon16 fa-times pointer jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span>
+						<button class="aclItemDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}">
+							<fa-icon size="16" name="xmark"></fa-icon>
+						</button>
 						<input type="hidden" name="{@$__aclInputName}[user][]" value="{@$aclUser->userID}">
 					</li>
 				{/foreach}
diff --git a/com.woltlab.wcf/templates/articleList.tpl b/com.woltlab.wcf/templates/articleList.tpl
index b4b3c3036f..8946071743 100644
--- a/com.woltlab.wcf/templates/articleList.tpl
+++ b/com.woltlab.wcf/templates/articleList.tpl
@@ -63,7 +63,14 @@
 
 {capture assign='contentInteractionButtons'}
 	<div class="contentInteractionButton dropdown jsOnly">
-		<a href="#" class="button small dropdownToggle"><span class="icon icon16 fa-sort-amount-{$sortOrder|strtolower}"></span> <span>{lang}wcf.article.button.sort{/lang}</span></a>
+		<a href="#" class="button small dropdownToggle">
+			{if $sortOrder|strtolower === 'asc'}
+				{icon size=16 name='arrow-down-short-wide'}
+			{else}
+				{icon size=16 name='arrow-down-wide-short'}
+			{/if}
+			<span>{lang}wcf.article.button.sort{/lang}</span>
+		</a>
 		<ul class="dropdownMenu">
 			<li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=title&sortOrder={if $sortField == 'title' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.title{/lang}{if $sortField == 'title'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
 			<li><a href="{link controller='ArticleList'}pageNo={@$pageNo}{if $user}&userID={@$user->userID}{/if}&sortField=time&sortOrder={if $sortField == 'time' && $sortOrder == 'ASC'}DESC{else}ASC{/if}{/link}">{lang}wcf.global.date{/lang}{if $sortField == 'time'} <span class="icon icon16 fa-caret-{if $sortOrder == 'ASC'}up{else}down{/if}"></span>{/if}</a></li>
diff --git a/com.woltlab.wcf/templates/editHistory.tpl b/com.woltlab.wcf/templates/editHistory.tpl
index cbf641e932..4bc711587e 100644
--- a/com.woltlab.wcf/templates/editHistory.tpl
+++ b/com.woltlab.wcf/templates/editHistory.tpl
@@ -77,7 +77,9 @@
 			<tbody>
 				<tr>
 					<td class="columnIcon">
-						<span class="icon icon16 fa-undo disabled"></span>
+						<span class="disabled">
+							{icon size=16 name='rotate-left'}
+						</span>
 						<input type="radio" name="oldID" value="current"{if $oldID === 'current'} checked{/if}> <input type="radio" name="newID" value="current"{if $newID === 'current'} checked{/if}>
 						{event name='rowButtons'}
 					</td>
@@ -91,7 +93,9 @@
 				{foreach from=$objects item=edit name=edit}
 					<tr class="jsEditRow">
 						<td class="columnIcon">
-							<span class="icon icon16 fa-undo pointer jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->entryID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.sure{/lang}"></span>
+							<button class="jsRevertButton jsTooltip" title="{lang}wcf.edit.revert{/lang}" data-object-id="{@$edit->entryID}" data-confirm-message="{lang __encode=true}wcf.edit.revert.sure{/lang}">
+								{icon size=16 name='rotate-left'}
+							</button>
 							<input type="radio" name="oldID" value="{@$edit->entryID}"{if $oldID == $edit->entryID} checked{/if}> <input type="radio" name="newID" value="{@$edit->entryID}"{if $newID == $edit->entryID} checked{/if}>
 							{event name='rowButtons'}
 						</td>
diff --git a/com.woltlab.wcf/templates/lineBreakSeparatedTextOptionType.tpl b/com.woltlab.wcf/templates/lineBreakSeparatedTextOptionType.tpl
index 55ef3f857d..a2bbd25552 100644
--- a/com.woltlab.wcf/templates/lineBreakSeparatedTextOptionType.tpl
+++ b/com.woltlab.wcf/templates/lineBreakSeparatedTextOptionType.tpl
@@ -4,7 +4,9 @@
 *}>
     {foreach from=$values item=value}
         <li data-value="{$value}">
-            <span class="icon icon16 fa-times jsDeleteItem jsTooltip pointer" title="{lang}wcf.global.button.delete{/lang}"></span>
+            <button type="button" class="jsDeleteItem jsTooltip" title="{lang}wcf.global.button.delete{/lang}">
+                {icon size=16 name='xmark'}
+            </button>
             <span>{$value}</span>
         </li>
     {/foreach}
diff --git a/com.woltlab.wcf/templates/mediaListItems.tpl b/com.woltlab.wcf/templates/mediaListItems.tpl
index 32ca63cf84..45dbbb1009 100644
--- a/com.woltlab.wcf/templates/mediaListItems.tpl
+++ b/com.woltlab.wcf/templates/mediaListItems.tpl
@@ -19,19 +19,27 @@
 				</li>
 				{if $__wcf->session->getPermission('admin.content.cms.canManageMedia')}
 					<li class="jsMediaEditButton" data-object-id="{@$media->mediaID}">
-						<a><span class="icon icon16 fa-pencil jsTooltip" title="{lang}wcf.global.button.edit{/lang}"></span> <span class="invisible">{lang}wcf.global.button.edit{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}">
+							{icon size=16 name='pencil'}
+						</button>
 					</li>
 					<li class="jsObjectAction" data-object-action="delete" data-confirm-message="{lang title=$__mediaTitle __encode=true}wcf.media.delete.confirmMessage{/lang}">
-						<a><span class="icon icon16 fa-times jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span class="invisible">{lang}wcf.global.button.delete{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.global.button.delete{/lang}">
+							{icon size=16 name='xmark'}
+						</button>
 					</li>
 				{/if}
 				{if $mode == 'editor'}
 					<li class="jsMediaInsertButton" data-object-id="{@$media->mediaID}">
-						<a><span class="icon icon16 fa-plus jsTooltip" title="{lang}wcf.media.button.insert{/lang}"></span> <span class="invisible">{lang}wcf.media.button.insert{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.media.button.insert{/lang}">
+							{icon size=16 name='plus'}
+						</button>
 					</li>
 				{elseif $mode == 'select'}
 					<li class="jsMediaSelectButton" data-object-id="{@$media->mediaID}">
-						<a><span class="icon icon16 fa-check jsTooltip" title="{lang}wcf.media.button.select{/lang}"></span> <span class="invisible">{lang}wcf.media.button.select{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.media.button.select{/lang}">
+							{icon size=16 name='check'}
+						</button>
 					</li>
 				{/if}
 			</ul>
diff --git a/com.woltlab.wcf/templates/mediaManager.tpl b/com.woltlab.wcf/templates/mediaManager.tpl
index 0def8b4f96..6c15152ced 100644
--- a/com.woltlab.wcf/templates/mediaManager.tpl
+++ b/com.woltlab.wcf/templates/mediaManager.tpl
@@ -28,7 +28,9 @@
 <div class="inputAddon mediaManagerSearch">
 	<input type="text" class="mediaManagerSearchField" placeholder="{lang}wcf.media.search.placeholder{/lang}">
 	<span class="inputSuffix">
-		<span class="icon icon16 fa-times mediaManagerSearchCancelButton pointer jsTooltip" title="{lang}wcf.media.search.cancel{/lang}"></span>
+		<button class="mediaManagerSearchCancelButton jsTooltip" title="{lang}wcf.media.search.cancel{/lang}">
+			{icon size=16 name='xmark'}
+		</button>
 	</span>
 </div>
 
diff --git a/com.woltlab.wcf/templates/membersList.tpl b/com.woltlab.wcf/templates/membersList.tpl
index 128a848a0d..5b85bff0d6 100644
--- a/com.woltlab.wcf/templates/membersList.tpl
+++ b/com.woltlab.wcf/templates/membersList.tpl
@@ -65,7 +65,7 @@
 				<div class="containerListActiveFilters">
 					<ul class="inlineList">
 						{content}
-							{if $letter}<li><span class="icon icon16 fa-bold jsTooltip" title="{lang}wcf.user.members.sort.letters{/lang}"></span> {$letter}</li>{/if}
+							{if $letter}<li class="jsTooltip" title="{lang}wcf.user.members.sort.letters{/lang}">{icon size=16 name='bold'} {$letter}</li>{/if}
 						{/content}
 					</ul>
 				</div>
diff --git a/com.woltlab.wcf/templates/messageQuoteList.tpl b/com.woltlab.wcf/templates/messageQuoteList.tpl
index cd9f8c14b3..f2e034d2b3 100644
--- a/com.woltlab.wcf/templates/messageQuoteList.tpl
+++ b/com.woltlab.wcf/templates/messageQuoteList.tpl
@@ -36,7 +36,11 @@
 							<li data-quote-id="{@$quoteID}" data-is-full-quote="{if $message->isFullQuote($quoteID)}true{else}false{/if}">
 								<span>
 									<input type="checkbox" value="1" id="quote_{@$quoteID}" class="jsCheckbox">
-									{if $supportPaste}<span class="icon icon16 fa-plus jsTooltip jsInsertQuote pointer" title="{lang}wcf.message.quote.insertQuote{/lang}"></span>{/if}
+									{if $supportPaste}
+										<button class="jsTooltip jsInsertQuote" title="{lang}wcf.message.quote.insertQuote{/lang}">
+											{icon size=16 name='plus'}
+										</button>
+									{/if}
 								</span>
 								
 								<div class="jsQuote">
diff --git a/com.woltlab.wcf/templates/messageSidebar.tpl b/com.woltlab.wcf/templates/messageSidebar.tpl
index 9cc04c6a7d..708f7cdcb6 100644
--- a/com.woltlab.wcf/templates/messageSidebar.tpl
+++ b/com.woltlab.wcf/templates/messageSidebar.tpl
@@ -28,7 +28,11 @@
 					<span{if $enableMicrodata} itemprop="name"{/if}>{@$userProfile->getFormattedUsername()}</span>
 				</a>
 				{if !$isReply}
-					{if $userProfile->banned}<span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}"></span>{/if}
+					{if $userProfile->banned}
+						<span class="jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}">
+							{icon size=16 name='lock'}
+						</span>
+					{/if}
 					
 					{event name='messageAuthorContainer'}
 				{/if}
diff --git a/com.woltlab.wcf/templates/moderationList.tpl b/com.woltlab.wcf/templates/moderationList.tpl
index c6d2e7eeef..f0c50d209d 100644
--- a/com.woltlab.wcf/templates/moderationList.tpl
+++ b/com.woltlab.wcf/templates/moderationList.tpl
@@ -49,15 +49,15 @@
 							<ul class="inlineList">
 								{content}
 									{if $definitionID}
-										<li>
-											<span class="icon icon16 fa-tag jsTooltip" title="{lang}wcf.moderation.filterByType{/lang}"></span>
+										<li class="jsTooltip" title="{lang}wcf.moderation.filterByType{/lang}">
+											{icon size=16 name='tag'}
 											{lang}wcf.moderation.type.{$availableDefinitions[$definitionID]}{/lang}
 										</li>
 									{/if}
 									
 									{if !$assignedUserID || $assignedUserID == $__wcf->getUser()->userID}
-										<li>
-											<span class="icon icon16 fa-user jsTooltip" title="{lang}wcf.moderation.filterByUser{/lang}"></span>
+										<li class="jsTooltip" title="{lang}wcf.moderation.filterByUser{/lang}">
+											{icon size=16 name='user'}
 											{if !$assignedUserID}
 												{lang}wcf.moderation.filterByUser.nobody{/lang}
 											{else}
@@ -67,12 +67,12 @@
 									{/if}
 									
 									{if $status == -1 || $status == 2}
-										<li>
+										<li class="jsTooltip" title="{lang}wcf.moderation.status{/lang}">
 											{if $status == -1}
-												<span class="icon icon16 fa-circle-o jsTooltip" title="{lang}wcf.moderation.status{/lang}"></span>
+												{icon size=16 name='circle'}
 												{lang}wcf.moderation.status.outstanding{/lang}
 											{else}
-												<span class="icon icon16 fa-check-circle-o jsTooltip" title="{lang}wcf.moderation.status{/lang}"></span>
+												{icon size=16 name='circle-check'}
 												{lang}wcf.moderation.status.done{/lang}
 											{/if}
 										</li>
@@ -141,7 +141,7 @@
 								<dd>{@$entry->comments|shortUnit}</dd>
 							</dl>
 							
-							<div class="messageGroupListStatsSimple">{if $entry->comments}<span class="icon icon16 fa-comment-o" aria-label="{lang}wcf.global.comments{/lang}"></span> {@$entry->comments|shortUnit}{/if}</div>
+							<div class="messageGroupListStatsSimple">{if $entry->comments}{icon size=16 name='comment'} {@$entry->comments|shortUnit}{/if}</div>
 						</li>
 						<li class="columnLastPost columnDate">
 							{if $entry->lastChangeTime}{@$entry->lastChangeTime|time}{/if}
diff --git a/com.woltlab.wcf/templates/optionFieldList.tpl b/com.woltlab.wcf/templates/optionFieldList.tpl
index 871d795dcf..6e453794cb 100644
--- a/com.woltlab.wcf/templates/optionFieldList.tpl
+++ b/com.woltlab.wcf/templates/optionFieldList.tpl
@@ -7,7 +7,18 @@
 		{assign var=error value=''}
 	{/if}
 	<dl class="{$option->optionName}Input{if $error} formError{/if}">
-		<dt{if $optionData[cssClassName]} class="{$optionData[cssClassName]}"{/if}>{if $isSearchMode|empty || !$optionData[hideLabelInSearch]}<label for="{$option->optionName}">{if VISITOR_USE_TINY_BUILD && $isGuestGroup && $option->excludedInTinyBuild}<span class="icon icon16 fa-bolt red jsTooltip" title="{lang}wcf.acp.group.excludedInTinyBuild{/lang}"></span> {/if}{$langPrefix|concat:$option->optionName|phrase}</label>{/if}</dt>
+		<dt{if $optionData[cssClassName]} class="{$optionData[cssClassName]}"{/if}>
+			{if $isSearchMode|empty || !$optionData[hideLabelInSearch]}
+				<label for="{$option->optionName}">
+					{if VISITOR_USE_TINY_BUILD && $isGuestGroup && $option->excludedInTinyBuild}
+						<span class="jsTooltip" title="{lang}wcf.acp.group.excludedInTinyBuild{/lang}">
+							{icon size=16 name='bolt'}
+						</span>
+					{/if}
+					{$langPrefix|concat:$option->optionName|phrase}
+				</label>
+			{/if}
+		</dt>
 		<dd>{@$optionData[html]}
 			{if $error}
 				<small class="innerError">
diff --git a/com.woltlab.wcf/templates/pageHeaderSearch.tpl b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
index b62588e925..232db6834e 100644
--- a/com.woltlab.wcf/templates/pageHeaderSearch.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderSearch.tpl
@@ -20,7 +20,7 @@
 {event name='settings'}
 
 <a href="#" id="pageHeaderSearchMobile" class="pageHeaderSearchMobile" role="button" tabindex="0" aria-expanded="false" aria-label="{lang}wcf.global.search{/lang}">
-	<span class="icon icon32 fa-search" aria-hidden="true"></span>
+	{icon size=32 name='magnifying-glass'}
 </a>
 
 <div id="pageHeaderSearch" class="pageHeaderSearch">
@@ -53,8 +53,8 @@
 			
 			<input type="search" name="q" id="pageHeaderSearchInput" class="pageHeaderSearchInput" placeholder="{lang}wcf.global.search.enterSearchTerm{/lang}" autocomplete="off" value="{if $query|isset}{$query}{/if}">
 			
-			<button class="pageHeaderSearchInputButton button" type="submit">
-				<span class="icon icon16 fa-search pointer" title="{lang}wcf.global.search{/lang}"></span>
+			<button class="pageHeaderSearchInputButton button" type="submit" title="{lang}wcf.global.search{/lang}">
+				{icon size=16 name='magnifying-glass'}
 			</button>
 			
 			<div id="pageHeaderSearchParameters"></div>
diff --git a/com.woltlab.wcf/templates/pageHeaderUser.tpl b/com.woltlab.wcf/templates/pageHeaderUser.tpl
index 0cd2a61ae5..af5a5e8713 100644
--- a/com.woltlab.wcf/templates/pageHeaderUser.tpl
+++ b/com.woltlab.wcf/templates/pageHeaderUser.tpl
@@ -3,7 +3,7 @@
 		<span class="userPanelAvatar" aria-hidden="true">{@$__wcf->getUserProfileHandler()->getAvatar()->getImageTag(32, false)}</span>
 	{else}
 		<a href="{link controller='Login' url=$__wcf->getRequestURI()}{/link}" class="userPanelLoginLink jsTooltip" title="{lang}wcf.user.loginOrRegister{/lang}">
-			<span class="icon icon32 fa-sign-in" aria-hidden="true"></span>
+			{icon size=32 name='arrow-right-to-bracket'}
 		</a>
 	{/if}
 	
diff --git a/com.woltlab.wcf/templates/styleChooser.tpl b/com.woltlab.wcf/templates/styleChooser.tpl
index e9b0fb0eab..de3e2ad305 100644
--- a/com.woltlab.wcf/templates/styleChooser.tpl
+++ b/com.woltlab.wcf/templates/styleChooser.tpl
@@ -7,7 +7,14 @@
 				</span>
 				<div class="details">
 					<div class="containerHeadline">
-						<h3>{$style->styleName}{if $style->styleID == $__wcf->getStyleHandler()->getStyle()->styleID} <span class="icon icon16 fa-check-circle" title="{lang}wcf.style.currentStyle{/lang}"></span>{/if}</h3>
+						<h3>
+							{$style->styleName}
+							{if $style->styleID == $__wcf->getStyleHandler()->getStyle()->styleID}
+								<span class="jsTooltip" title="{lang}wcf.style.currentStyle{/lang}">
+									{icon size=16 name='check-circle'}
+								</span>
+							{/if}
+						</h3>
 					</div>
 					{if $style->styleDescription}<small>{lang}{@$style->styleDescription}{/lang}</small>{/if}
 				</div>
diff --git a/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts b/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts
index 72d970695a..5f61a2647e 100644
--- a/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts
+++ b/ts/WoltLabSuite/Core/Ui/Acl/Simple.ts
@@ -87,10 +87,10 @@ class UiAclSimple {
     const objectId = listItem.dataset.objectId!;
 
     const iconName = type === "group" ? "users" : "user";
-    const html = `<fa-icon size="16" name="${iconName}" solid></fa-icon>
+    const html = `<fa-icon size="16" name="${iconName}"></fa-icon>
       <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
       <button class="aclItemDeleteButton jsTooltip" title="${Language.get("wcf.global.button.delete")}">
-        <fa-icon size="16" name="xmark" solid></fa-icon>
+        <fa-icon size="16" name="xmark"></fa-icon>
       </button>
       <input type="hidden" name="${this.inputName}[${type}][]" value="${objectId}">`;
 
diff --git a/wcfsetup/install/files/acp/templates/__iconFormField.tpl b/wcfsetup/install/files/acp/templates/__iconFormField.tpl
index ad6728ef72..6c47495c41 100644
--- a/wcfsetup/install/files/acp/templates/__iconFormField.tpl
+++ b/wcfsetup/install/files/acp/templates/__iconFormField.tpl
@@ -19,7 +19,6 @@
 			const input = document.getElementById('{@$field->getPrefixedId()}');
 			
 			const callback = (iconName, forceSolid) => {
-				icon.className = 'icon icon64 fa-' + iconName;
 				input.value = iconName;
 
 				let icon = iconContainer.querySelector("fa-icon");
diff --git a/wcfsetup/install/files/acp/templates/aclSimple.tpl b/wcfsetup/install/files/acp/templates/aclSimple.tpl
index 57f18f4e3a..8165da1ef1 100644
--- a/wcfsetup/install/files/acp/templates/aclSimple.tpl
+++ b/wcfsetup/install/files/acp/templates/aclSimple.tpl
@@ -57,15 +57,19 @@
 					<li>
 						{icon size=16 name='users'}
 						<span class="aclLabel">{$aclGroup}</span>
-						<span class="icon icon16 fa-times pointer jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span>
+						<button class="aclItemDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}">
+							<fa-icon size="16" name="xmark"></fa-icon>
+						</button>
 						<input type="hidden" name="{@$__aclInputName}[group][]" value="{@$aclGroup->groupID}">
 					</li>
 				{/foreach}
 				{foreach from=$aclValues[user] item=aclUser}
 					<li>
-						{icon size=16 name='user' type='solid'}
+						{icon size=16 name='user'}
 						<span class="aclLabel">{$aclUser}</span>
-						<span class="icon icon16 fa-times pointer jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span>
+						<button class="aclItemDeleteButton jsTooltip" title="{lang}wcf.global.button.delete{/lang}">
+							<fa-icon size="16" name="xmark"></fa-icon>
+						</button>
 						<input type="hidden" name="{@$__aclInputName}[user][]" value="{@$aclUser->userID}">
 					</li>
 				{/foreach}
diff --git a/wcfsetup/install/files/acp/templates/mediaListItems.tpl b/wcfsetup/install/files/acp/templates/mediaListItems.tpl
index 99eae0c50e..45dbbb1009 100644
--- a/wcfsetup/install/files/acp/templates/mediaListItems.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaListItems.tpl
@@ -3,7 +3,7 @@
 		<div class="mediaThumbnail">
 			{@$media->getElementTag(144)}
 		</div>
-		
+
 		{assign var='__mediaTitle' value=$media->filename}
 		{if $media->title}
 			{assign var='__mediaTitle' value=$media->title}
@@ -11,7 +11,7 @@
 		<div class="mediaInformation">
 			<p class="mediaTitle" title="{$__mediaTitle}">{$__mediaTitle}</p>
 		</div>
-		
+
 		<nav class="jsMobileNavigation buttonGroupNavigation">
 			<ul class="buttonList iconList">
 				<li class="mediaCheckbox">
@@ -19,19 +19,27 @@
 				</li>
 				{if $__wcf->session->getPermission('admin.content.cms.canManageMedia')}
 					<li class="jsMediaEditButton" data-object-id="{@$media->mediaID}">
-						<a><span class="icon icon16 fa-pencil jsTooltip" title="{lang}wcf.global.button.edit{/lang}"></span> <span class="invisible">{lang}wcf.global.button.edit{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.global.button.edit{/lang}">
+							{icon size=16 name='pencil'}
+						</button>
 					</li>
 					<li class="jsObjectAction" data-object-action="delete" data-confirm-message="{lang title=$__mediaTitle __encode=true}wcf.media.delete.confirmMessage{/lang}">
-						<a><span class="icon icon16 fa-times jsTooltip" title="{lang}wcf.global.button.delete{/lang}"></span> <span class="invisible">{lang}wcf.global.button.delete{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.global.button.delete{/lang}">
+							{icon size=16 name='xmark'}
+						</button>
 					</li>
 				{/if}
 				{if $mode == 'editor'}
 					<li class="jsMediaInsertButton" data-object-id="{@$media->mediaID}">
-						<a><span class="icon icon16 fa-plus jsTooltip" title="{lang}wcf.media.button.insert{/lang}"></span> <span class="invisible">{lang}wcf.media.button.insert{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.media.button.insert{/lang}">
+							{icon size=16 name='plus'}
+						</button>
 					</li>
 				{elseif $mode == 'select'}
 					<li class="jsMediaSelectButton" data-object-id="{@$media->mediaID}">
-						<a><span class="icon icon16 fa-check jsTooltip" title="{lang}wcf.media.button.select{/lang}"></span> <span class="invisible">{lang}wcf.media.button.select{/lang}</span></a>
+						<button class="jsTooltip" title="{lang}wcf.media.button.select{/lang}">
+							{icon size=16 name='check'}
+						</button>
 					</li>
 				{/if}
 			</ul>
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js
index 48f9d063ff..da4b9a6bf3 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Acl/Simple.js
@@ -64,10 +64,10 @@ define(["require", "exports", "tslib", "../../Core", "../../Language", "../../St
             const label = listItem.dataset.label;
             const objectId = listItem.dataset.objectId;
             const iconName = type === "group" ? "users" : "user";
-            const html = `<fa-icon size="16" name="${iconName}" solid></fa-icon>
+            const html = `<fa-icon size="16" name="${iconName}"></fa-icon>
       <span class="aclLabel">${StringUtil.escapeHTML(label)}</span>
       <button class="aclItemDeleteButton jsTooltip" title="${Language.get("wcf.global.button.delete")}">
-        <fa-icon size="16" name="xmark" solid></fa-icon>
+        <fa-icon size="16" name="xmark"></fa-icon>
       </button>
       <input type="hidden" name="${this.inputName}[${type}][]" value="${objectId}">`;
             const item = document.createElement("li");
-- 
2.20.1