From 455d6b071bb7d77f5b1da7300982e3910e50f023 Mon Sep 17 00:00:00 2001
From: Marc Alexander <admin@m-a-styles.de>
Date: Tue, 2 Jan 2024 21:30:29 +0100
Subject: [PATCH] [ticket/17283] Adjust classes and lang call for icon

PHPBB3-17283
---
 .../all/template/macros/icons/font.twig       |  2 +-
 .../prosilver/template/display_options.html   |  4 +--
 phpBB/styles/prosilver/template/faq_body.html |  2 +-
 .../prosilver/template/forumlist_body.html    | 13 +++++-----
 phpBB/styles/prosilver/template/jumpbox.html  | 10 +++----
 .../prosilver/template/navbar_header.html     | 14 +++++-----
 .../prosilver/template/viewforum_body.html    | 26 +++++++++----------
 phpBB/styles/prosilver/theme/icons.css        |  4 +++
 8 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/phpBB/styles/all/template/macros/icons/font.twig b/phpBB/styles/all/template/macros/icons/font.twig
index 21f2e07b78..a0933d6164 100644
--- a/phpBB/styles/all/template/macros/icons/font.twig
+++ b/phpBB/styles/all/template/macros/icons/font.twig
@@ -1,3 +1,3 @@
 {% apply spaceless %}
-	<i class="o-icon o-icon-font fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES : ' fas') }}"{% if S_HIDDEN %}{% if TITLE %} title="{{ TITLE }}"{% endif %} aria-hidden="true"{% endif %}{{ ATTRIBUTES }}></i>{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ lang(TITLE) }}</span>{% endif %}
+	<i class="o-icon o-icon-font fa-fw fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES : ' fas') }}"{% if S_HIDDEN %}{% if TITLE %} title="{{ TITLE }}"{% endif %} aria-hidden="true"{% endif %}{{ ATTRIBUTES }}></i>{% if TITLE %}<span{% if S_HIDDEN %} class="sr-only"{% endif %}>{{ TITLE }}</span>{% endif %}
 {% endapply %}
diff --git a/phpBB/styles/prosilver/template/display_options.html b/phpBB/styles/prosilver/template/display_options.html
index db55be9737..dd909d3471 100644
--- a/phpBB/styles/prosilver/template/display_options.html
+++ b/phpBB/styles/prosilver/template/display_options.html
@@ -1,8 +1,8 @@
 <div class="dropdown-container dropdown-container-left dropdown-button-control sort-tools">
 	<span title="{L_SORT_OPTIONS}" class="button button-secondary dropdown-trigger dropdown-select">
-		{{ Icon('iconify', 'fa:sort-amount-asc', '', true, 'c-button-icon') }}
+		{{ Icon('font', 'arrow-down-short-wide', '', true, 'fas c-button-icon') }}
 		<span class="caret">
-			{{ Icon('iconify', 'fa:caret-down', '', true, 'c-button-icon') }}
+			{{ Icon('font', 'caret-down', '', true, 'fas c-button-icon') }}
 		</span>
 	</span>
 	<div class="dropdown hidden">
diff --git a/phpBB/styles/prosilver/template/faq_body.html b/phpBB/styles/prosilver/template/faq_body.html
index 44d2767c69..4f925fa6a2 100644
--- a/phpBB/styles/prosilver/template/faq_body.html
+++ b/phpBB/styles/prosilver/template/faq_body.html
@@ -36,7 +36,7 @@
 					<dd>{faq_block.faq_row.FAQ_ANSWER}</dd>
 				</dl>
 				<a href="#faqlinks" class="top">
-					{{ Icon('iconify', 'fa:chevron-circle-up', lang('BACK_TO_TOP'), false) }}
+					{{ Icon('font', 'circle-chevron-up', lang('BACK_TO_TOP'), false) }}
 				</a>
 				<!-- IF not faq_block.faq_row.S_LAST_ROW --><hr class="dashed" /><!-- ENDIF -->
 			<!-- END faq_row -->
diff --git a/phpBB/styles/prosilver/template/forumlist_body.html b/phpBB/styles/prosilver/template/forumlist_body.html
index b6ef2f97cf..9870d16ea0 100644
--- a/phpBB/styles/prosilver/template/forumlist_body.html
+++ b/phpBB/styles/prosilver/template/forumlist_body.html
@@ -45,7 +45,7 @@
 						<!-- IF S_ENABLE_FEEDS and forumrow.S_FEED_ENABLED -->
 							<!--
 								<a class="feed-icon-forum" title="{L_FEED} - {forumrow.FORUM_NAME}" href="{U_FEED}?f={forumrow.FORUM_ID}">
-									{{ Icon('iconify', 'fa:rss-square', '', true, 'c-feed-icon') }}<span class="sr-only">{L_FEED} - {forumrow.FORUM_NAME}</span>
+									{{ Icon('font', 'square-rss', '', true, 'fas c-feed-icon') }}<span class="sr-only">{L_FEED} - {forumrow.FORUM_NAME}</span>
 								</a>
 							-->
 						<!-- ENDIF -->
@@ -66,10 +66,11 @@
 							<!-- BEGIN subforum -->
 								<!-- EVENT forumlist_body_subforum_link_prepend -->
 								<a href="{forumrow.subforum.U_SUBFORUM}" class="subforum<!-- IF forumrow.subforum.S_UNREAD --> unread<!-- ELSE --> read<!-- ENDIF -->" title="{% if forumrow.subforum.IS_LINK %}{{ lang('FORUM_LINK') }}{% elseif forumrow.subforum.S_UNREAD %}{{ lang('UNREAD_POSTS') }}{% else %}{{ lang('NO_UNREAD_POSTS') }}{% endif %}">
-									{{ Icon('iconify', {
-										'fa:external-link' : forumrow.subforum.IS_LINK,
-										'fa:file-o' : true,
-									}, forumrow.subforum.SUBFORUM_NAME, false, 'c-subforum-icon') }}
+									{% if forumrow.subforum.IS_LINK %}
+										{{ Icon('font', 'arrow-up-right-from-square', forumrow.subforum.SUBFORUM_NAME, false, 'fas c-subforum-icon') }}
+									{% else %}
+										{{ Icon('font', 'file', forumrow.subforum.SUBFORUM_NAME, false, 'far c-subforum-icon') }}
+									{% endif %}
 								</a>{% if not forumrow.subforum.S_LAST_ROW %}{L_COMMA_SEPARATOR}{% endif %}
 								<!-- EVENT forumlist_body_subforum_link_append -->
 							<!-- END subforum -->
@@ -113,7 +114,7 @@
 									{L_POST_BY_AUTHOR} <!-- EVENT forumlist_body_last_poster_username_prepend -->{forumrow.LAST_POSTER_FULL}<!-- EVENT forumlist_body_last_poster_username_append -->
 								<!-- IF not S_IS_BOT -->
 									<a href="{forumrow.U_LAST_POST}" title="{L_VIEW_LATEST_POST}">
-										{{ Icon('iconify', 'fa:external-link-square', lang('VIEW_LATEST_POST'), true, 'c-last-post-icon') }}
+										{{ Icon('font', 'arrow-up-right-from-square', lang('VIEW_LATEST_POST'), true, 'fas c-last-post-icon') }}
 									</a>
 								<!-- ENDIF -->
 								<br /><time datetime="{forumrow.LAST_POST_TIME_RFC3339}">{forumrow.LAST_POST_TIME}</time>
diff --git a/phpBB/styles/prosilver/template/jumpbox.html b/phpBB/styles/prosilver/template/jumpbox.html
index 41185a7876..4edf77a64e 100644
--- a/phpBB/styles/prosilver/template/jumpbox.html
+++ b/phpBB/styles/prosilver/template/jumpbox.html
@@ -3,25 +3,25 @@
 	<!-- IF S_VIEWTOPIC -->
 	<p class="jumpbox-return">
 		<a href="{U_VIEW_FORUM}" class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" accesskey="r">
-			{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_FORUM'), false, 'c-return-arrow-icon') }}
+			{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_FORUM'), false, 'fas c-return-arrow-icon') }}
 		</a>
 	</p>
 	<!-- ELSEIF S_VIEWFORUM -->
 	<p class="jumpbox-return">
 		<a href="{U_INDEX}" class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" accesskey="r">
-			{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_INDEX'), false, 'c-return-arrow-icon') }}
+			{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_INDEX'), false, 'fas c-return-arrow-icon') }}
 		</a>
 	</p>
 	<!-- ELSEIF SEARCH_TOPIC -->
 	<p class="jumpbox-return">
 		<a class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH_TOPIC}" accesskey="r">
-			{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_TOPIC'), false, 'c-return-arrow-icon') }}
+			{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('RETURN_TO_TOPIC'), false, 'fas c-return-arrow-icon') }}
 		</a>
 	</p>
 	<!-- ELSEIF S_SEARCH_ACTION -->
 	<p class="jumpbox-return">
 		<a class="left-box arrow-{S_CONTENT_FLOW_BEGIN}" href="{U_SEARCH}" title="{L_SEARCH_ADV}" accesskey="r">
-			{{ Icon('iconify', 'fa:angle-' ~ S_CONTENT_FLOW_BEGIN, lang('GO_TO_SEARCH_ADV'), false, 'c-return-arrow-icon') }}
+			{{ Icon('font', 'angle-' ~ S_CONTENT_FLOW_BEGIN, lang('GO_TO_SEARCH_ADV'), false, 'fas c-return-arrow-icon') }}
 		</a>
 	</p>
 	<!-- ENDIF -->
@@ -30,7 +30,7 @@
 	<div class="jumpbox dropdown-container dropdown-container-right<!-- IF not S_IN_MCP --> dropdown-up<!-- ENDIF --> dropdown-{S_CONTENT_FLOW_BEGIN} dropdown-button-control" id="jumpbox">
 			<span title="<!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF -->" class="button button-secondary dropdown-trigger dropdown-select">
 				<span><!-- IF S_IN_MCP and S_MERGE_SELECT -->{L_SELECT_TOPICS_FROM}<!-- ELSEIF S_IN_MCP -->{L_MODERATE_FORUM}<!-- ELSE -->{L_JUMP_TO}<!-- ENDIF --></span>
-				<span class="caret">{{ Icon('iconify', 'fa:caret-down', '', true) }}</span>
+				<span class="caret">{{ Icon('font', 'caret-down', '', true) }}</span>
 			</span>
 		<div class="dropdown">
 			<div class="pointer"><div class="pointer-inner"></div></div>
diff --git a/phpBB/styles/prosilver/template/navbar_header.html b/phpBB/styles/prosilver/template/navbar_header.html
index b85e7c44a4..1bc31a883e 100644
--- a/phpBB/styles/prosilver/template/navbar_header.html
+++ b/phpBB/styles/prosilver/template/navbar_header.html
@@ -16,32 +16,32 @@
 							{% if S_REGISTERED_USER %}
 								<li>
 									<a href="{{ U_SEARCH_SELF }}" role="menuitem">
-										{{ Icon('font', 'file', 'SEARCH_SELF', false, 'far icon icon-gray') }}
+										{{ Icon('font', 'file', lang('SEARCH_SELF'), false, 'far icon icon-gray') }}
 									</a>
 								</li>
 							{% endif %}
 							{% if S_USER_LOGGED_IN %}
 								<li>
 									<a href="{{ U_SEARCH_NEW }}" role="menuitem">
-										{{ Icon('font', 'file', 'SEARCH_NEW', false, 'far icon icon-red') }}
+										{{ Icon('font', 'file', lang('SEARCH_NEW'), false, 'far icon icon-red') }}
 									</a>
 								</li>
 							{% endif %}
 							{% if S_LOAD_UNREADS %}
 								<li>
 									<a href="{{ U_SEARCH_UNREAD }}" role="menuitem">
-										{{ Icon('font', 'file', 'SEARCH_UNREAD', false, 'far icon icon-red') }}
+										{{ Icon('font', 'file', lang('SEARCH_UNREAD'), false, 'far icon icon-red') }}
 									</a>
 								</li>
 							{% endif %}
 							<li>
 								<a href="{{ U_SEARCH_UNANSWERED }}" role="menuitem">
-									{{ Icon('font', 'file', 'SEARCH_UNANSWERED', false, 'far icon icon-gray') }}
+									{{ Icon('font', 'file', lang('SEARCH_UNANSWERED'), false, 'far icon icon-gray') }}
 								</a>
 							</li>
 							<li>
 								<a href="{{ U_SEARCH_ACTIVE_TOPICS }}" role="menuitem">
-									{{ Icon('font', 'file-lines', 'SEARCH_ACTIVE_TOPICS', false, 'far icon icon-blue') }}
+									{{ Icon('font', 'file-lines', lang('SEARCH_ACTIVE_TOPICS'), false, 'far icon icon-blue') }}
 								</a>
 							</li>
 							<li class="separator"></li>
@@ -91,14 +91,14 @@
 			{% if U_ACP %}
 				<li>
 					<a href="{{ U_ACP }}" title="{{ lang('ACP') }}" role="menuitem">
-						{{ Icon('font', 'gears', 'ACP_SHORT', false) }}
+						{{ Icon('font', 'gears', lang('ACP_SHORT'), false) }}
 					</a>
 				</li>
 			{% endif %}
 			{% if U_MCP %}
 				<li>
 					<a href="{{ U_MCP }}" title="{{ lang('MCP') }}" role="menuitem">
-						{{ Icon('font', 'gavel', 'MCP_SHORT', false) }}
+						{{ Icon('font', 'gavel', lang('MCP_SHORT'), false) }}
 					</a>
 				</li>
 			{% endif %}
diff --git a/phpBB/styles/prosilver/template/viewforum_body.html b/phpBB/styles/prosilver/template/viewforum_body.html
index 0111423f6d..27d1da6816 100644
--- a/phpBB/styles/prosilver/template/viewforum_body.html
+++ b/phpBB/styles/prosilver/template/viewforum_body.html
@@ -42,9 +42,9 @@
 
 		<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
 			<!-- IF S_IS_LOCKED -->
-				<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('iconify', 'fa:lock', '', true, 'c-button-icon') }}
+				<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('font', 'lock', '', true, 'fas c-button-icon') }}
 			<!-- ELSE -->
-				<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('iconify', 'fa:pencil', '', true, 'c-button-icon') }}
+				<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('font', 'pencil', '', true, 'fas c-button-icon') }}
 			<!-- ENDIF -->
 		</a>
 			<!-- EVENT viewforum_buttons_top_after -->
@@ -56,10 +56,10 @@
 			<fieldset>
 				<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
 				<button class="button button-search" type="submit" title="{L_SEARCH}">
-					{{ Icon('iconify', 'fa:search', lang('SEARCH'), true, 'c-button-icon') }}
+					{{ Icon('font', 'search', lang('SEARCH'), true, 'fas c-button-icon') }}
 				</button>
 				<a href="{{ U_SEARCH_FORUM }}" class="button button-search-end" title="lang('SEARCH_ADV')">
-					{{ Icon('iconify', 'fa:cog', lang('SEARCH_ADV'), true, 'c-button-icon') }}
+					{{ Icon('font', 'gear', lang('SEARCH_ADV'), true, 'fas c-button-icon') }}
 				</a>
 				{S_SEARCH_LOCAL_HIDDEN_FIELDS}
 			</fieldset>
@@ -186,17 +186,17 @@
 						{% endif %}
 						<!-- IF topicrow.S_TOPIC_UNAPPROVED or topicrow.S_POSTS_UNAPPROVED -->
 							<a href="{topicrow.U_MCP_QUEUE}" title="<!-- IF topicrow.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF -->">
-								{{ Icon('iconify', 'fa:question', '', true, 'c-unapproved-icon') }}<span class="sr-only"><!-- IF topicrow.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF --></span>
+								{{ Icon('font', 'circle-question', '', true, 'fas icon icon-blue c-unapproved-icon o-icon-baseline') }}<span class="sr-only"><!-- IF topicrow.S_TOPIC_UNAPPROVED -->{L_TOPIC_UNAPPROVED}<!-- ELSE -->{L_POSTS_UNAPPROVED}<!-- ENDIF --></span>
 							</a>
 						<!-- ENDIF -->
 						<!-- IF topicrow.S_TOPIC_DELETED -->
 							<a href="{topicrow.U_MCP_QUEUE}" title="{L_TOPIC_DELETED}">
-								{{ Icon('iconify', 'fa:recycle', lang('TOPIC_DELETED'), true, 'c-topic-deleted-icon') }}
+								{{ Icon('font', 'recycle', lang('TOPIC_DELETED'), true, 'c-topic-deleted-icon') }}
 							</a>
 						<!-- ENDIF -->
 						<!-- IF topicrow.S_TOPIC_REPORTED -->
 							<a href="{topicrow.U_MCP_REPORT}" title="{L_TOPIC_REPORTED}">
-								{{ Icon('iconify', 'fa:exclamation', lang('TOPIC_REPORTED'), true, 'c-topic-reported-icon') }}
+								{{ Icon('font', 'triangle-exclamation', lang('TOPIC_REPORTED'), true, 'fas c-topic-reported-icon o-icon-baseline') }}
 							</a>
 						<!-- ENDIF -->
 						<br />
@@ -213,8 +213,8 @@
 						<!-- ENDIF -->
 
 						<div class="topic-poster responsive-hide left-box">
-							<!-- IF topicrow.S_HAS_POLL -->{{ Icon('iconify', 'fa:bar-chart', '', true) }}<!-- ENDIF -->
-							<!-- IF topicrow.ATTACH_ICON_IMG -->{{ Icon('iconify', 'fa:paperclip', '', true) }}<!-- ENDIF -->
+							<!-- IF topicrow.S_HAS_POLL -->{{ Icon('font', 'chart-bar', '', true) }}<!-- ENDIF -->
+							<!-- IF topicrow.ATTACH_ICON_IMG -->{{ Icon('font', 'paperclip', '', true) }}<!-- ENDIF -->
 							{% EVENT topiclist_row_topic_by_author_before %}
 							{L_POST_BY_AUTHOR} <!-- EVENT viewforum_body_topic_author_username_prepend -->{topicrow.TOPIC_AUTHOR_FULL}<!-- EVENT viewforum_body_topic_author_username_append --> &raquo; <time datetime="{topicrow.FIRST_POST_TIME_RFC3339}">{topicrow.FIRST_POST_TIME}</time>
 							{% EVENT topiclist_row_topic_by_author_after %}
@@ -223,7 +223,7 @@
 
 						<!-- IF .topicrow.pagination -->
 						<div class="pagination">
-							<span>{{ Icon('iconify', 'fa:clone', '', true) }}</span>
+							<span>{{ Icon('font', 'clone', '', true, 'far') }}</span>
 							<ul>
 								<!-- BEGIN pagination -->
 									<!-- IF topicrow.pagination.S_IS_PREV -->
@@ -249,7 +249,7 @@
 					<span><dfn>{L_LAST_POST} </dfn>{L_POST_BY_AUTHOR} <!-- EVENT viewforum_body_last_post_author_username_prepend -->{topicrow.LAST_POST_AUTHOR_FULL}<!-- EVENT viewforum_body_last_post_author_username_append -->
 						<!-- IF not S_IS_BOT and topicrow.U_LAST_POST -->
 							<a href="{topicrow.U_LAST_POST}" title="{L_GOTO_LAST_POST}">
-								{{ Icon('iconify', 'fa:external-link-square', VIEW_LATEST_POST, true, 'c-last-post-icon') }}
+								{{ Icon('font', 'arrow-up-right-from-square', VIEW_LATEST_POST, true, 'fas c-last-post-icon') }}
 							</a>
 						<!-- ENDIF -->
 						<br /><time datetime="{topicrow.LAST_POST_TIME_RFC3339}">{topicrow.LAST_POST_TIME}</time>
@@ -289,9 +289,9 @@
 
 			<a href="{U_POST_NEW_TOPIC}" class="button" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->">
 			<!-- IF S_IS_LOCKED -->
-				<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('iconify', 'fa:lock', '', true, 'c-button-icon') }}
+				<span>{L_BUTTON_FORUM_LOCKED}</span> {{ Icon('font', 'lock', '', true, 'fas c-button-icon') }}
 			<!-- ELSE -->
-				<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('iconify', 'fa:pencil', '', true, 'c-button-icon') }}
+				<span>{L_BUTTON_NEW_TOPIC}</span> {{ Icon('font', 'pencil', '', true, 'fas c-button-icon') }}
 			<!-- ENDIF -->
 			</a>
 
diff --git a/phpBB/styles/prosilver/theme/icons.css b/phpBB/styles/prosilver/theme/icons.css
index 6b7701f43e..7d491b385a 100644
--- a/phpBB/styles/prosilver/theme/icons.css
+++ b/phpBB/styles/prosilver/theme/icons.css
@@ -42,6 +42,10 @@ svg {
 	text-rendering: auto; /* optimizelegibility throws things off #1094 */
 }
 
+.o-icon-baseline {
+	vertical-align: baseline !important;
+}
+
 .o-icon + span,
 span + .o-icon {
 	padding-left: 4px;