Merge pull request #6587 from iMattPro/ticket/17291

[ticket/17291] Use icon function in ACP templates

phpBB/adm/index.php

@@ -63,6 +63,7 @@ $template->set_custom_style(
 	],
 	[
 		$phpbb_admin_path . 'style',
+		$phpbb_root_path . 'styles/all/imgs/',
 		$phpbb_root_path . 'styles/all/template/',
 	],
 );

phpBB/adm/style/acp_avatar_options_upload.html

@@ -17,52 +17,52 @@
 	<div class="avatar-cropper-buttons" id="avatar-cropper-buttons">
 		<div class="button-group">
 			<button class="button" type="button" title="{{ lang('ZOOM_IN') }}" data-cropper-action="zoom,0.1">
-				<i class="icon fa-search-plus fa-fw"></i>
+				{{ Icon('font', 'search-plus', '', true) }}
 			</button>
 			<button class="button" type="button" title="{{ lang('ZOOM_OUT') }}" data-cropper-action="zoom,-0.1">
-				<i class="icon fa-search-minus fa-fw"></i>
+				{{ Icon('font', 'search-minus', '', true) }}
 			</button>
 		</div>
 
 		<div class="button-group">
 			<button class="button" type="button" title="{{ lang('MOVE_LEFT') }}" data-cropper-action="move,-10,0">
-				<i class="icon fa-arrow-left fa-fw"></i>
+				{{ Icon('font', 'arrow-left', '', true) }}
 			</button>
 			<button class="button" type="button" title="{{ lang('MOVE_RIGHT') }}" data-cropper-action="move,10,0">
-				<i class="icon fa-arrow-right fa-fw"></i>
+				{{ Icon('font', 'arrow-right', '', true) }}
 			</button>
 			<button class="button" type="button" title="{{ lang('MOVE_UP') }}" data-cropper-action="move,0,-10">
-				<i class="icon fa-arrow-up fa-fw"></i>
+				{{ Icon('font', 'arrow-up', '', true) }}
 			</button>
 			<button class="button" type="button" title="{{ lang('MOVE_DOWN') }}" data-cropper-action="move,0,10">
-				<i class="icon fa-arrow-down fa-fw"></i>
+				{{ Icon('font', 'arrow-down', '', true) }}
 			</button>
 		</div>
 
 		<div class="button-group">
 			<button class="button" type="button" title="{{ lang('ROTATE_LEFT') }}" data-cropper-action="rotate,-90">
-				<i class="icon fa-rotate-left fa-fw"></i>
+				{{ Icon('font', 'rotate-left', '', true) }}
 			</button>
 			<button class="button" type="button" title="{{ lang('ROTATE_RIGHT') }}" data-cropper-action="rotate,90">
-				<i class="icon fa-rotate-right fa-fw"></i>
+				{{ Icon('font', 'rotate-right', '', true) }}
 			</button>
 		</div>
 
 		<div class="button-group">
 			<button class="button" type="button" title="{{ lang('FLIP_HORIZONTALLY') }}" data-cropper-action="scaleX">
-				<i class="icon fa-arrows-h fa-fw"></i>
+				{{ Icon('font', 'arrows-left-right', '', true) }}
 			</button>
 			<button class="button" type="button" title="{{ lang('FLIP_VERTICALLY') }}" data-cropper-action="scaleY">
-				<i class="icon fa-arrows-v fa-fw"></i>
+				{{ Icon('font', 'arrows-up-down', '', true) }}
 			</button>
 		</div>
 
 		<div class="button-group">
 			<button class="button" type="button" title="{{ lang('RESET') }}" data-cropper-action="reset">
-				<i class="icon fa-refresh fa-fw"></i>
+				{{ Icon('font', 'arrows-rotate', '', true) }}
 			</button>
 			<button class="button" type="button" title="{{ lang('CLEAR') }}" data-cropper-action="clear">
-				<i class="icon fa-times fa-fw"></i>
+				{{ Icon('font', 'xmark', '', true) }}
 			</button>
 		</div>
 	</div>

phpBB/adm/style/acp_ext_list.html

@@ -52,7 +52,7 @@
 			<td style="text-align: center;">
 				<!-- IF enabled.S_VERSIONCHECK -->
 				<strong class="<!-- IF enabled.S_UP_TO_DATE -->current-ext<!-- ELSE -->outdated-ext<!-- ENDIF -->">{enabled.META_VERSION}</strong>
-				<!-- IF not enabled.S_UP_TO_DATE --><i class="fa fa-exclamation-circle outdated-ext" aria-hidden="true"></i><!-- ENDIF -->
+				<!-- IF not enabled.S_UP_TO_DATE -->{{ Icon('font', 'circle-exclamation', '', true, 'fas outdated-ext') }}<!-- ENDIF -->
 				<!-- ELSE -->
 				{enabled.META_VERSION}
 				<!-- ENDIF -->
@@ -78,7 +78,7 @@
 			<td style="text-align: center;">
 				<!-- IF disabled.S_VERSIONCHECK -->
 				<strong class="<!-- IF disabled.S_UP_TO_DATE -->current-ext<!-- ELSE -->outdated-ext<!-- ENDIF -->">{disabled.META_VERSION}</strong>
-				<!-- IF not disabled.S_UP_TO_DATE --><i class="fa fa-exclamation-circle outdated-ext" aria-hidden="true"></i><!-- ENDIF -->
+				<!-- IF not disabled.S_UP_TO_DATE -->{{ Icon('font', 'circle-exclamation', '', true, 'fas outdated-ext') }}<!-- ENDIF -->
 				<!-- ELSE -->
 				{disabled.META_VERSION}
 				<!-- ENDIF -->

phpBB/adm/style/acp_forums.html

@@ -348,7 +348,7 @@
 		<!-- EVENT acp_forums_rules_settings_append -->
 		</fieldset>
 	</div>
-	
+
 	<!-- EVENT acp_forums_custom_settings -->
 
 	<fieldset class="submit-buttons">
@@ -472,7 +472,17 @@
 		<tbody>
 		<!-- BEGIN forums -->
 			<tr>
-				<td class="folder">{forums.FOLDER_IMAGE}</td>
+				<td class="folder">
+					<span class="fa-stack fa-2x">
+					{{ Icon('font', 'circle', '', true, 'fas fa-stack-2x') }}
+					{{ Icon('font', {
+						'link' : forums.S_FORUM_LINK,
+						'lock' : forums.S_FORUM_LOCKED,
+						'comments' : forums.S_SUBFORUMS,
+						'comment' : true,
+					}, '', true, 'fas fa-inverse fa-stack-1x') }}
+					</span>
+				</td>
 				<td class="forum-desc">
 					<!-- IF forums.FORUM_IMAGE --><div style="float: {S_CONTENT_FLOW_BEGIN}; margin-right: 5px;">{forums.FORUM_IMAGE}</div><!-- ENDIF -->
 					<strong><!-- IF forums.S_FORUM_LINK -->{forums.FORUM_NAME}<!-- ELSE --><a href="{forums.U_FORUM}">{forums.FORUM_NAME}</a><!-- ENDIF --></strong>

phpBB/adm/style/acp_help_phpbb.html

@@ -8,11 +8,11 @@
 <div class="send-stats-row">
 	<!-- EVENT acp_help_phpbb_stats_before -->
 	<div class="send-stats-tile">
-		<h2><i class="icon fa-bar-chart"></i>{L_SEND_STATISTICS}</h2>
+		<h2>{{ Icon('font', 'chart-column', lang('SEND_STATISTICS')) }}</h2>
 		<p>{L_EXPLAIN_SEND_STATISTICS}</p>
 		<div class="send-stats-row">
 			<div class="send-stats-data-row send-stats-data-only-row">
-				<a id="trigger-configlist" data-ajax="toggle_link" data-overlay="false" data-toggle-text="{L_HIDE_STATISTICS}"><span>{L_SHOW_STATISTICS}</span><i class="icon fa-angle-down"></i></a>
+				<a id="trigger-configlist" data-ajax="toggle_link" data-overlay="false" data-toggle-text="{L_HIDE_STATISTICS}"><span>{L_SHOW_STATISTICS}</span>{{ Icon('font', 'angle-down', '', true) }}</a>
 			</div>
 			<div class="send-stats-data-row">
 				<div class="configlist" id="configlist">

phpBB/adm/style/acp_modules.html

@@ -132,7 +132,16 @@
 		<tbody>
 		<!-- BEGIN modules -->
 			<tr>
-				<td style="width: 5%; text-align: center;">{modules.MODULE_IMAGE}</td>
+				<td style="width: 5%; text-align: center;">
+					<span class="fa-stack fa-2x">
+					{{ Icon('font', 'circle', '', true, 'fas fa-stack-2x') }}
+					{{ Icon('font', {
+						'lock' : not modules.MODULE_ENABLED,
+						'folder-tree' : modules.S_SUB_MODULE,
+						'folder' : true,
+					}, '', true, 'fas fa-inverse fa-stack-1x') }}
+					</span>
+				</td>
 				<td><a href="{modules.U_MODULE}">{modules.MODULE_TITLE}</a><!-- IF not modules.MODULE_DISPLAYED --> <span class="small">[{L_HIDDEN_MODULE}]</span><!-- ENDIF --></td>
 				<td style="width: 15%; white-space: nowrap; text-align: center; vertical-align: middle;">&nbsp;<!-- IF modules.MODULE_ENABLED --><a href="{modules.U_DISABLE}">{L_DISABLE}</a><!-- ELSE --><a href="{modules.U_ENABLE}">{L_ENABLE}</a><!-- ENDIF -->&nbsp;</td>
 				<td class="actions">

phpBB/adm/style/admin.css

@@ -334,7 +334,8 @@ li {
 	}
 
 	#content {
-		background: #f3f3f3 url("../images/innerbox_bg.gif") repeat-x top;
+		background: #f3f3f3;
+		background: linear-gradient(to bottom, #dbdee2 0%, #e0e2e5 27%, #ecedee 65%, #f3f3f3 100%);
 		padding: 5px;
 	}
 
@@ -501,7 +502,8 @@ li {
 /* Main Panel
 ---------------------------------------- */
 #acp {
-	background: #f3f3f3 url("../images/innerbox_bg.gif") repeat-x top;
+	background: #f3f3f3;
+	background: linear-gradient(to bottom, #dbdee2 0%, #e0e2e5 27%, #ecedee 65%, #f3f3f3 100%);
 	border: 1px #999999 solid;
 	border-radius: 5px;
 	box-shadow: #ffffff 0 0 0 1px inset;
@@ -517,7 +519,8 @@ li {
 }
 
 .panel {
-	background: #f3f3f3 url("../images/innerbox_bg.gif") repeat-x top;
+	background: #f3f3f3;
+	background: linear-gradient(to bottom, #dbdee2 0%, #e0e2e5 27%, #ecedee 65%, #f3f3f3 100%);
 	border-radius: 5px;
 	overflow: hidden;
 	padding: 5px 0;
@@ -604,25 +607,47 @@ li {
 #menu li#activemenu a span {
 	font-weight: bold;
 	text-decoration: none;
-	background: transparent url("../images/arrow_right.gif") 0% 50% no-repeat;
 	color: #1180b7;
 }
 
-.rtl #menu li#activemenu a span {
-	background: transparent url("../images/arrow_left.gif") 100% 50% no-repeat;
-}
 
 #menu li#activemenu a:hover span,
 #menu li#activemenu span {
 	font-weight: bold;
 	text-decoration: none;
-	background: #ffffff url("../images/arrow_right.gif") 1% 50% no-repeat;
 	color: #bc2a4d;
 }
 
-.rtl #menu li#activemenu a:hover span,
-.rtl #menu li#activemenu span {
-	background: #ffffff url("../images/arrow_left.gif") 99% 50% no-repeat;
+#menu li#activemenu a span:before,
+#menu li#activemenu a:hover span:before,
+#menu li#activemenu span:before {
+	font-family: "Font Awesome 6 Free";
+	color: #515f77;
+	margin-right: 3px;
+	margin-left: -10px;
+	content: "\f105";
+}
+
+#menu li#activemenu a:hover span:before,
+#menu li#activemenu span:before {
+	margin-right: 1px;
+	margin-left: -8px;
+}
+
+.rtl #menu li#activemenu a span:before,
+.rtl #menu li#activemenu a:hover span:before,
+.rtl #menu li#activemenu span:before {
+	font-family: "Font Awesome 6 Free";
+	color: #515f77;
+	margin-right: -10px;
+	margin-left: 3px;
+	content: "\f104";
+}
+
+.rtl #menu li#activemenu a:hover span:before,
+.rtl #menu li#activemenu span:before {
+	margin-right: -8px;
+	margin-left: 1px;
 }
 
 #menu li a:active,
@@ -633,16 +658,30 @@ li {
 
 #menu li span.completed {
 	text-decoration: none;
-	background: url("../images/arrow_down.gif") 1% 50% no-repeat;
 	padding: 3px 3px 3px 12px;
 }
 
+#menu li span.completed:before {
+	font-family: "Font Awesome 6 Free";
+	color: #515f77;
+	margin-right: 1px;
+	margin-left: -8px;
+	content: "\f107";
+}
+
 .rtl #menu li span.completed {
 	text-decoration: none;
-	background: url("../images/arrow_down.gif") 99% 50% no-repeat;
 	padding: 3px 12px 3px 3px;
 }
 
+.rtl #menu li span.completed:before {
+	font-family: "Font Awesome 6 Free";
+	color: #515f77;
+	margin-right: -8px;
+	margin-left: 1px;
+	content: "\f107";
+}
+
 #menu .header {
 	font-family: Tahoma, Helvetica, sans-serif;
 	font-size: 0.75em;
@@ -734,7 +773,8 @@ th {
 	font-size: 0.75em;
 	text-align: left;
 	text-transform: uppercase;
-	background: #70aed3 url("../images/gradient2b.gif") bottom left repeat-x;
+	background: #70aed3;
+	background: linear-gradient(to bottom, #70aed3 0%, #5ba0c9 100%);
 	border-top: 1px solid #6dacd2;
 	border-bottom: 1px solid #327aa5;
 	color: #ffffff;
@@ -1019,7 +1059,8 @@ table.fixed-width-table {
 		font-weight: bold;
 		text-align: left;
 		text-transform: uppercase;
-		background: #70aed3 url("../images/gradient2b.gif") bottom left repeat-x;
+		background: #70aed3;
+		background: linear-gradient(to bottom, #70aed3 0%, #5ba0c9 100%);
 		border-top: 1px solid #6dacd2;
 		border-bottom: 1px solid #327aa5;
 		color: #ffffff;
@@ -1719,7 +1760,8 @@ a.button2,
 input.button2 {
 	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
 	font-size: 0.85em;
-	background: #efefef url("../images/bg_button.gif") repeat-x top;
+	background: #efefef;
+	background: linear-gradient(to bottom, #ffffff 0%, #d2d2d2 4%, #dfdfdf 26%, #efefef 65%, #efefef 100%);
 	color: #000000;
 	width: auto !important;
 	padding: 1px 3px 0;
@@ -1763,7 +1805,8 @@ a.button1:hover,
 input.button1:hover,
 a.button2:hover,
 input.button2:hover {
-	background: #efefef url("../images/bg_button.gif") repeat bottom;
+	background: #efefef;
+	background: linear-gradient(to bottom, #ffffff 0%, #d2d2d2 4%, #dfdfdf 26%, #efefef 65%, #efefef 100%);
 	border: 1px solid #bc2a4d;
 	color: #bc2a4d;
 }
@@ -1823,24 +1866,18 @@ input.button2:focus {
 	display: none;
 	width: 620px;
 	margin: 0 auto;
-	padding: 25px;
 	padding: 0 25px 20px;
 }
 
 .phpbb_alert .alert_close {
-	text-decoration: none !important;
-	background: transparent url("../images/alert_close.png") 0 0 no-repeat;
-	display: block;
+	font-size: 14px;
 	float: right;
-	overflow: hidden;
-	width: 16px;
-	height: 16px;
-	margin-top: -7px;
-	margin-right: -31px;
+	margin-top: 2px;
+	margin-right: -22px;
 }
 
 .phpbb_alert .alert_close:hover {
-	background-position: 0 -16px;
+	color: #bc2a4d;
 }
 
 .phpbb_alert p {
@@ -2351,11 +2388,11 @@ fieldset.permissions .permissions-switch {
 	font-size: 0.85em;
 	line-height: normal;
 	min-width: 570px;
-	margin: 0 0 -1px 7px;
+	margin: 0 0 0 7px;
 }
 
 .rtl .permissions-category {
-	margin: 0 7px -1px 0;
+	margin: 0 7px 0 0;
 }
 
 .permissions-category ul {
@@ -2376,7 +2413,9 @@ fieldset.permissions .permissions-switch {
 
 .permissions-category a {
 	text-decoration: none;
-	background: url("../images/bg_tabs_alt1.gif") no-repeat 0% -35px;
+	background: #bcccd8;
+	border: 1px solid transparent;
+	border-radius: 4px 4px 0 0;
 	position: relative;
 	float: left;
 	margin: 0 1px 0 0;
@@ -2389,7 +2428,6 @@ fieldset.permissions .permissions-switch {
 
 .permissions-category a span.tabbg {
 	white-space: nowrap;
-	background: url("../images/bg_tabs_alt2.gif") no-repeat 100% -35px;
 	color: #536482;
 	display: block;
 	float: left;
@@ -2400,41 +2438,34 @@ fieldset.permissions .permissions-switch {
 	float: right;
 }
 
-/* Commented Backslash Hack hides rule from IE5-Mac \ */
 .permissions-category a span.tabbg,
 .rtl .permissions-category a span.tabbg {
 	float: none;
 }
 
-/* End hack */
+.permissions-category a:hover,
 .permissions-category a:hover span.tabbg {
-	background-position: 100% -70px;
+	background: #dfedfa;
 	color: #dd6900;
 }
 
+.permissions-category .activetab a,
+.permissions-category .activetab a:hover,
+.permissions-category .activetab a span.tabbg {
+	background: #ccdcea;
+	background: linear-gradient(to bottom, #eaf2f9 0%, #ccdcea 100%);
+	color: #333333;
+}
+
 .permissions-category .activetab a {
-	background-position: 0 0;
+	border-color: #cadceb;
+	box-shadow: 0 1px 1px #f2f9ff inset;
 }
 
 .permissions-category .activetab a span.tabbg {
-	background-position: 100% 0;
-	color: #333333;
 	padding-bottom: 7px;
 }
 
-.permissions-category a:hover {
-	background-position: 0 -70px;
-}
-
-.permissions-category .activetab a:hover span.tabbg {
-	background-position: 100% 0;
-	color: #333333;
-}
-
-.permissions-category .activetab a:hover {
-	background-position: 0 0;
-}
-
 .permissions-category a span.colour {
 	border: 1px solid #536482;
 	display: block;
@@ -2808,8 +2839,16 @@ fieldset.permissions .permissions-switch {
 	user-select: none;
 }
 
+.roles-options > .button:hover {
+	background: transparent;
+}
+
+.roles-options > .button:active {
+	padding: 4px;
+}
+
 .roles-options > span {
-	background: url("../images/arrow_down.gif") no-repeat 245px 0.7em;
+	background: transparent;
 	border: 1px solid #dedede;
 	border-radius: 3px;
 	display: none;
@@ -2817,8 +2856,16 @@ fieldset.permissions .permissions-switch {
 	padding: 4px;
 }
 
-.rtl .roles-options > span {
-	background: url("../images/arrow_down.gif") no-repeat 7px 0.7em;
+.roles-options > span:after {
+	font-family: "Font Awesome 6 Free";
+	float: right;
+	content: "\f107";
+}
+
+.rtl .roles-options > span:after {
+	font-family: "Font Awesome 6 Free";
+	float: left;
+	content: "\f107";
 }
 
 .roles-options li {
@@ -2960,11 +3007,6 @@ fieldset.permissions .permissions-switch {
 	padding-right: 0.3em;
 }
 
-.icon {
-	font-family: FontAwesome;
-	font-style: normal;
-}
-
 .send-stats-data-row {
 	background: #f9f9f9;
 	border: #dedede 1px solid;
@@ -3013,12 +3055,14 @@ fieldset.permissions .permissions-switch {
 }
 
 .send-stats-settings input[type="checkbox"] + label:before {
-	font-family: FontAwesome;
+	font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
 	font-size: 1.5em;
-	content: "\f096";
+	font-weight: 400;
+	content: "\f0c8";
 }
 
 .send-stats-settings input[type="checkbox"]:checked + label:before {
+	font-weight: 900;
 	color: #3c763d;
 	content: "\f14a";
 }
@@ -3056,6 +3100,28 @@ fieldset.permissions .permissions-switch {
 	overflow-x: scroll;
 }
 
+.o-icon {
+	vertical-align: middle !important;
+}
+
+.o-icon-font {
+	font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands";
+	font-style: normal;
+	font-variant: normal;
+	-webkit-font-smoothing: antialiased;
+	vertical-align: baseline;
+	display: inline-block;
+	/* stylelint-disable order/properties-order */
+	-moz-osx-font-smoothing: grayscale;
+	/* stylelint-enable order/properties-order */
+	text-rendering: auto; /* optimizelegibility throws things off #1094 */
+}
+
+.o-icon + span,
+span + .o-icon {
+	padding-left: 4px;
+}
+
 .acp-icon {
 	font-size: 1.5em;
 }

phpBB/adm/style/installer_header.html

@@ -7,6 +7,7 @@
 	<!-- IF META -->{META}<!-- ENDIF -->
 	<title>{PAGE_TITLE}</title>
 
+	<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
 	<link href="{T_TEMPLATE_PATH}/admin.css" rel="stylesheet" type="text/css" media="screen" />
 </head>
 

phpBB/adm/style/installer_update_file_status.html

@@ -4,7 +4,7 @@
 <p>{L_FILES_DELETED_EXPLAIN}</p>
 
 <fieldset id="deleted">
-	<legend><img src="{T_IMAGE_PATH}/icon_delete.gif" alt="{L_STATUS_DELETED}" /></legend>
+	<legend>{{ Icon('font', 'circle-xmark', lang('STATUS_DELETED'), true, '', {'style' : 'color:red;'}) }}</legend>
 	<!-- BEGIN deleted -->
 	<dl>
 		<dt style="width: 100%;"><!-- IF deleted.DIR_PART -->{deleted.DIR_PART}<!-- ENDIF --><strong>{deleted.FILE_PART}</strong></dt>
@@ -20,7 +20,7 @@
 <p>{L_FILES_CONFLICT_EXPLAIN}</p>
 
 <fieldset id="conflict">
-	<legend><img src="{T_IMAGE_PATH}/file_conflict.gif" alt="{L_STATUS_CONFLICT}" /></legend>
+	<legend>{{ Icon('font', 'circle-exclamation', lang('STATUS_CONFLICT'), true, '', {'style' : 'color:red;'}) }}</legend>
 	<!-- BEGIN conflict -->
 	<dl>
 		<dt style="width: 100%;"><!-- IF conflict.DIR_PART -->{conflict.DIR_PART}<!-- ENDIF --><strong>{conflict.FILE_PART}</strong></dt>
@@ -36,7 +36,7 @@
 <p>{L_FILES_MODIFIED_EXPLAIN}</p>
 
 <fieldset id="modified">
-	<legend><img src="{T_IMAGE_PATH}/file_modified.gif" alt="{L_STATUS_MODIFIED}" /></legend>
+	<legend>{{ Icon('font', 'circle-arrow-left', lang('STATUS_MODIFIED'), true, '', {'style' : 'color:#ffd43b;'}) }}</legend>
 	<!-- BEGIN modified -->
 	<dl>
 		<dt style="width: 100%;"><!-- IF modified.DIR_PART -->{modified.DIR_PART}<!-- ENDIF --><strong>{modified.FILE_PART}</strong></dt>
@@ -52,7 +52,7 @@
 <p>{L_FILES_NEW_EXPLAIN}</p>
 
 <fieldset id="new_files" style="display: none;">
-	<legend><img src="{T_IMAGE_PATH}/file_new.gif" alt="{L_STATUS_NEW}" /></legend>
+	<legend>{{ Icon('font', 'circle-plus', lang('STATUS_NEW'), true, '', {'style' : 'color:#ffd43b;'}) }}</legend>
 	<!-- BEGIN new -->
 	<dl>
 		<dt style="width: 100%;"><!-- IF new.DIR_PART -->{new.DIR_PART}<!-- ENDIF --><strong>{new.FILE_PART}</strong>
@@ -69,7 +69,7 @@
 <p>{L_FILES_NOT_MODIFIED_EXPLAIN}</p>
 
 <fieldset id="not_modified" style="display: none;">
-	<legend><img src="{T_IMAGE_PATH}/file_not_modified.gif" alt="{L_STATUS_NOT_MODIFIED}" /></legend>
+	<legend>{{ Icon('font', 'lock', lang('STATUS_NOT_MODIFIED'), true, '', {'style' : 'color:#1180b7;'}) }}</legend>
 	<!-- BEGIN not_modified -->
 	<dl>
 		<dt style="width: 100%;"><!-- IF not_modified.DIR_PART -->{not_modified.DIR_PART}<!-- ENDIF --><strong>{not_modified.FILE_PART}</strong></dt>

phpBB/adm/style/overall_footer.html

@@ -30,11 +30,11 @@
 		</div>
 
 		<div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}">
-			<a href="#" class="alert_close"></a>
+			<a href="#" class="alert_close">{{ Icon('font', 'circle-xmark', '', true) }}</a>
 			<h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p>
 		</div>
 		<div id="phpbb_confirm" class="phpbb_alert">
-			<a href="#" class="alert_close"></a>
+			<a href="#" class="alert_close">{{ Icon('font', 'circle-xmark', '', true) }}</a>
 			<div class="alert_text"></div>
 		</div>
 	</div>

phpBB/adm/style/permission_mask.html

@@ -27,7 +27,7 @@
 <fieldset class="permissions" id="perm{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}">
 	<legend id="legend{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}">
 		<!-- IF not p_mask.S_VIEW -->
-			<input type="checkbox" style="display: none;" class="permissions-checkbox" name="inherit[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]" id="checkbox{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" value="1" onclick="toggle_opacity('{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}')" /> 
+			<input type="checkbox" style="display: none;" class="permissions-checkbox" name="inherit[{p_mask.f_mask.UG_ID}][{p_mask.f_mask.FORUM_ID}]" id="checkbox{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}" value="1" onclick="toggle_opacity('{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}')" />
 		<!-- ELSE -->
 		<!-- ENDIF -->
 		<!-- IF p_mask.f_mask.PADDING --><span class="padding">{p_mask.f_mask.PADDING}{p_mask.f_mask.PADDING}</span><!-- ENDIF -->{p_mask.f_mask.NAME}
@@ -73,7 +73,7 @@
 			<div class="permissions-category">
 				<ul>
 		<!-- ENDIF -->
- 		
+
 		<!-- IF p_mask.f_mask.category.S_YES -->
 			<li class="permissions-preset-yes<!-- IF p_mask.S_FIRST_ROW and p_mask.f_mask.S_FIRST_ROW and p_mask.f_mask.category.S_FIRST_ROW --> activetab<!-- ENDIF -->" id="tab{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}{p_mask.f_mask.category.S_ROW_COUNT}">
 		<!-- ELSEIF p_mask.f_mask.category.S_NEVER -->
@@ -116,7 +116,7 @@
 				<tbody>
 				<!-- BEGIN mask -->
 					<!-- IF p_mask.f_mask.category.mask.S_ROW_COUNT is even --><tr class="row4"><!-- ELSE --><tr class="row3"><!-- ENDIF -->
-					<th class="permissions-name<!-- IF p_mask.f_mask.category.mask.S_ROW_COUNT is even --> row4<!-- ELSE --> row3<!-- ENDIF -->"><!-- IF p_mask.f_mask.category.mask.U_TRACE --><a href="{p_mask.f_mask.category.mask.U_TRACE}" class="trace" onclick="popup(this.href, 750, 515, '_trace'); return false;" title="{L_TRACE_SETTING}"><img src="images/icon_trace.gif" alt="{L_TRACE_SETTING}" /></a> <!-- ENDIF -->{p_mask.f_mask.category.mask.PERMISSION}</th>
+					<th class="permissions-name<!-- IF p_mask.f_mask.category.mask.S_ROW_COUNT is even --> row4<!-- ELSE --> row3<!-- ENDIF -->"><!-- IF p_mask.f_mask.category.mask.U_TRACE --><a href="{p_mask.f_mask.category.mask.U_TRACE}" class="trace" onclick="popup(this.href, 750, 515, '_trace'); return false;" title="{L_TRACE_SETTING}">{{ Icon('font', 'eye', lang('TRACE_SETTING'), true, '', {'style' : 'color:#1180b7;'}) }}</a> <!-- ENDIF -->{p_mask.f_mask.category.mask.PERMISSION}</th>
 					<!-- IF p_mask.S_VIEW -->
 						<td<!-- IF p_mask.f_mask.category.mask.S_YES --> class="yes"<!-- ENDIF -->>&nbsp;</td>
 						<td<!-- IF p_mask.f_mask.category.mask.S_NEVER --> class="never"<!-- ENDIF -->></td>
@@ -130,7 +130,7 @@
 				</tbody>
 				</table>
 			</div>
-			
+
 			<!-- IF not p_mask.S_VIEW -->
 			<fieldset class="quick" style="margin-{S_CONTENT_FLOW_END}{L_COLON} 11px;">
 				<p class="small">{L_APPLY_PERMISSIONS_EXPLAIN}</p>
@@ -139,7 +139,7 @@
 					<p class="small"><a href="#" onclick="reset_opacity(0, '{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}'); return false;">{L_MARK_ALL}</a> &bull; <a href="#" onclick="reset_opacity(1, '{p_mask.S_ROW_COUNT}{p_mask.f_mask.S_ROW_COUNT}'); return false;">{L_UNMARK_ALL}</a></p>
 				<!-- ENDIF -->
 			</fieldset>
-		
+
 			<!-- ENDIF -->
 
 		</div>

phpBB/includes/acp/acp_forums.php

@@ -869,28 +869,9 @@ class acp_forums
 			{
 				$forum_type = $row['forum_type'];
 
-				if ($row['forum_status'] == ITEM_LOCKED)
-				{
-					$folder_image = '<img src="images/icon_folder_lock.gif" alt="' . $user->lang['LOCKED'] . '" />';
-				}
-				else
-				{
-					switch ($forum_type)
-					{
-						case FORUM_LINK:
-							$folder_image = '<img src="images/icon_folder_link.gif" alt="' . $user->lang['LINK'] . '" />';
-						break;
-
-						default:
-							$folder_image = ($row['left_id'] + 1 != $row['right_id']) ? '<img src="images/icon_subfolder.gif" alt="' . $user->lang['SUBFORUM'] . '" />' : '<img src="images/icon_folder.gif" alt="' . $user->lang['FOLDER'] . '" />';
-						break;
-					}
-				}
-
 				$url = $this->u_action . "&amp;parent_id=$this->parent_id&amp;f={$row['forum_id']}";
 
 				$template->assign_block_vars('forums', array(
-					'FOLDER_IMAGE'		=> $folder_image,
 					'FORUM_IMAGE'		=> ($row['forum_image']) ? '<img src="' . $phpbb_root_path . $row['forum_image'] . '" alt="" />' : '',
 					'FORUM_IMAGE_SRC'	=> ($row['forum_image']) ? $phpbb_root_path . $row['forum_image'] : '',
 					'FORUM_NAME'		=> $row['forum_name'],
@@ -900,6 +881,8 @@ class acp_forums
 
 					'S_FORUM_LINK'		=> ($forum_type == FORUM_LINK) ? true : false,
 					'S_FORUM_POST'		=> ($forum_type == FORUM_POST) ? true : false,
+					'S_FORUM_LOCKED'	=> ($row['forum_status'] == ITEM_LOCKED) ? true : false,
+					'S_SUBFORUMS'		=> ($row['left_id'] + 1 != $row['right_id']) ? true : false,
 
 					'U_FORUM'			=> $this->u_action . '&amp;parent_id=' . $row['forum_id'],
 					'U_MOVE_UP'			=> $url . '&amp;action=move_up',

phpBB/includes/acp/acp_modules.php

@@ -467,19 +467,9 @@ class acp_modules
 			{
 				$langname = $user->lang($row['module_langname']);
 
-				if (!$row['module_enabled'])
-				{
-					$module_image = '<img src="images/icon_folder_lock.gif" alt="' . $user->lang['DEACTIVATED_MODULE'] .'" />';
-				}
-				else
-				{
-					$module_image = (!$row['module_basename'] || $row['left_id'] + 1 != $row['right_id']) ? '<img src="images/icon_subfolder.gif" alt="' . $user->lang['CATEGORY'] . '" />' : '<img src="images/icon_folder.gif" alt="' . $user->lang['MODULE'] . '" />';
-				}
-
 				$url = $this->u_action . '&amp;parent_id=' . $this->parent_id . '&amp;m=' . $row['module_id'];
 
 				$template->assign_block_vars('modules', array(
-					'MODULE_IMAGE'		=> $module_image,
 					'MODULE_TITLE'		=> $langname,
 					'MODULE_ENABLED'	=> ($row['module_enabled']) ? true : false,
 					'MODULE_DISPLAYED'	=> ($row['module_display']) ? true : false,
@@ -487,6 +477,8 @@ class acp_modules
 					'S_ACP_CAT_SYSTEM'			=> ($this->module_class == 'acp' && $row['module_langname'] == 'ACP_CAT_SYSTEM') ? true : false,
 					'S_ACP_MODULE_MANAGEMENT'	=> ($this->module_class == 'acp' && ($row['module_basename'] == 'modules' || $row['module_langname'] == 'ACP_MODULE_MANAGEMENT')) ? true : false,
 
+					'S_SUB_MODULE'		=> (!$row['module_basename'] || $row['left_id'] + 1 != $row['right_id']) ? true : false,
+
 					'U_MODULE'			=> $this->u_action . '&amp;parent_id=' . $row['module_id'],
 					'U_MOVE_UP'			=> $url . '&amp;action=move_up&amp;hash=' . generate_link_hash('acp_modules'),
 					'U_MOVE_DOWN'		=> $url . '&amp;action=move_down&amp;hash=' . generate_link_hash('acp_modules'),

phpBB/includes/functions_acp.php

@@ -98,16 +98,16 @@ function adm_page_header($page_title)
 		'T_ASSETS_VERSION'		=> $config['assets_version'],
 		'T_ASSETS_PATH'			=> "{$phpbb_root_path}assets",
 
-		'ICON_MOVE_UP'				=> '<i class="icon acp-icon acp-icon-move-up fa-arrow-circle-up fa-fw" title="' . $user->lang('MOVE_UP') . '"></i>',
-		'ICON_MOVE_UP_DISABLED'		=> '<i class="icon acp-icon acp-icon-disabled fa-arrow-circle-up fa-fw" title="' . $user->lang('MOVE_UP') . '"></i>',
-		'ICON_MOVE_DOWN'			=> '<i class="icon acp-icon acp-icon-move-down fa-arrow-circle-down fa-fw" title="' . $user->lang('MOVE_DOWN') . '"></i>',
-		'ICON_MOVE_DOWN_DISABLED'	=> '<i class="icon acp-icon acp-icon-disabled fa-arrow-circle-down fa-fw" title="' . $user->lang('MOVE_DOWN') . '"></i>',
-		'ICON_EDIT'					=> '<i class="icon acp-icon acp-icon-settings fa-cog fa-fw" title="' . $user->lang('EDIT') . '"></i>',
-		'ICON_EDIT_DISABLED'		=> '<i class="icon acp-icon acp-icon-disabled fa-cog fa-fw" title="' . $user->lang('EDIT') . '"></i>',
-		'ICON_DELETE'				=> '<i class="icon acp-icon acp-icon-delete fa-times-circle fa-fw" title="' . $user->lang('DELETE') . '"></i>',
-		'ICON_DELETE_DISABLED'		=> '<i class="icon acp-icon acp-icon-disabled fa-times-circle fa-fw" title="' . $user->lang('DELETE') . '"></i>',
-		'ICON_SYNC'					=> '<i class="icon acp-icon acp-icon-resync fa-refresh fa-fw" title="' . $user->lang('RESYNC') . '"></i>',
-		'ICON_SYNC_DISABLED'		=> '<i class="icon acp-icon acp-icon-disabled fa-refresh fa-fw" title="' . $user->lang('RESYNC') . '"></i>',
+		'ICON_MOVE_UP'				=> '<i class="acp-icon acp-icon-move-up fa-arrow-circle-up fa-fw fas" title="' . $user->lang('MOVE_UP') . '"></i>',
+		'ICON_MOVE_UP_DISABLED'		=> '<i class="acp-icon acp-icon-disabled fa-arrow-circle-up fa-fw fas" title="' . $user->lang('MOVE_UP') . '"></i>',
+		'ICON_MOVE_DOWN'			=> '<i class="acp-icon acp-icon-move-down fa-arrow-circle-down fa-fw fas" title="' . $user->lang('MOVE_DOWN') . '"></i>',
+		'ICON_MOVE_DOWN_DISABLED'	=> '<i class="acp-icon acp-icon-disabled fa-arrow-circle-down fa-fw fas" title="' . $user->lang('MOVE_DOWN') . '"></i>',
+		'ICON_EDIT'					=> '<i class="acp-icon acp-icon-settings fa-gear fa-fw fas" title="' . $user->lang('EDIT') . '"></i>',
+		'ICON_EDIT_DISABLED'		=> '<i class="acp-icon acp-icon-disabled fa-gear fa-fw fas" title="' . $user->lang('EDIT') . '"></i>',
+		'ICON_DELETE'				=> '<i class="acp-icon acp-icon-delete fa-xmark-circle fa-fw fas" title="' . $user->lang('DELETE') . '"></i>',
+		'ICON_DELETE_DISABLED'		=> '<i class="acp-icon acp-icon-disabled fa-xmark-circle fa-fw fas" title="' . $user->lang('DELETE') . '"></i>',
+		'ICON_SYNC'					=> '<i class="acp-icon acp-icon-resync fa-arrows-rotate fa-fw fas" title="' . $user->lang('RESYNC') . '"></i>',
+		'ICON_SYNC_DISABLED'		=> '<i class="acp-icon acp-icon-disabled fa-arrows-rotate fa-fw fas" title="' . $user->lang('RESYNC') . '"></i>',
 
 		'S_USER_ID'				=> $user->data['user_id'],
 		'S_USER_LANG'			=> $user->lang('USER_LANG'),

phpBB/phpbb/install/controller/helper.php

@@ -266,8 +266,8 @@ class helper
 			'L_SELECT_LANG'			=> $this->language->lang('SELECT_LANG'),
 			'L_SKIP'				=> $this->language->lang('SKIP'),
 			'PAGE_TITLE'			=> $this->language->lang($page_title),
-			'T_IMAGE_PATH'			=> $this->path_helper->get_web_root_path() . $path . 'images',
 			'T_JQUERY_LINK'			=> $this->path_helper->get_web_root_path() . $path . '../assets/javascript/jquery-3.6.0.min.js',
+			'T_FONT_AWESOME_LINK'	=> $this->path_helper->get_web_root_path() . $path . '../assets/css/font-awesome.min.css',
 			'T_TEMPLATE_PATH'		=> $this->path_helper->get_web_root_path() . $path . 'style',
 			'T_ASSETS_PATH'			=> $this->path_helper->get_web_root_path() . $path . '../assets',
 

phpBB/phpbb/install/helper/iohandler/ajax_iohandler.php

@@ -432,10 +432,6 @@ class ajax_iohandler extends iohandler_base
 	 */
 	public function render_update_file_status($status_array)
 	{
-		$this->template->assign_vars(array(
-			'T_IMAGE_PATH'	=> $this->path_helper->get_web_root_path() . 'adm/images/',
-		));
-
 		foreach ($status_array as $block => $list)
 		{
 			foreach ($list as $filename)

phpBB/phpbb/template/twig/extension/icon.php

@@ -83,7 +83,7 @@ class icon extends AbstractExtension
 		switch ($type)
 		{
 			case 'font':
-				// Nothing to do here..
+				$classes = $this->insert_fa_class($classes);
 			break;
 
 			case 'png':
@@ -168,6 +168,39 @@ class icon extends AbstractExtension
 		}
 	}
 
+	/**
+	 * Insert fa class into class string by checking if class string contains any fa classes
+	 *
+	 * @param string $class_string
+	 * @return string Updated class string or original class string if fa class is already set or string is empty
+	 */
+	protected function insert_fa_class(string $class_string): string
+	{
+		if (empty($class_string))
+		{
+			return $class_string;
+		}
+
+		// These also include pro class name we don't use, but handle them properly anyway
+		$fa_classes = ['fa-solid', 'fas', 'fa-regular', 'far', 'fal', 'fa-light', 'fab', 'fa-brands'];
+
+		// Split the class string into individual words
+		$icon_classes = explode(' ', $class_string);
+
+		// Check if the class string contains any of the fa classes, just return class string in that case
+		foreach ($icon_classes as $word)
+		{
+			if (in_array($word, $fa_classes))
+			{
+				return $class_string;
+			}
+		}
+
+		// If we reach this it means we didn't have any fa classes in the class string.
+		// Prepend class string with fas for fa-solid
+		return 'fas ' . $class_string;
+	}
+
 	/**
 	 * Prepare an SVG for usage in the template icon.
 	 *

tests/template/extension_test.php

@@ -313,7 +313,7 @@ class phpbb_template_extension_test extends phpbb_template_template_test_case
 				[
 					'ICON_PENCIL'	=> 'Pencil icon',
 				],
-				'<i class="o-icon o-icon-font fa-fw fa-pencil a-class another-class" title="Pencil icon" aria-hidden="true" data-attr-1="true" data-attr-2="two"></i>
+				'<i class="o-icon o-icon-font fa-fw fa-pencil fas a-class another-class" title="Pencil icon" aria-hidden="true" data-attr-1="true" data-attr-2="two"></i>
 				<span class="sr-only">Pencil icon</span>'
 			],
 			/** Font: icons array */