Pull Request resolves #48662 .

• I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.

Summary of Changes

Replace direct use of Font Awesome (fa-) icon classes with Joomla's generic icon- classes where the generic equivalents are missing, and add the necessary mappings to media_source/system/scss/_icomoon.scss.

Why is this change needed?

Joomla's intended approach was to use generic icon- classes throughout the CMS, with the corresponding Font Awesome icons mapped centrally in _icomoon.scss. Unfortunately over time we have forgotten this.

This approach serves two purposes: maintaining backwards compatibility with the IcoMoon icon classes used in Joomla 3,(not really relevant today) and decoupling Joomla's markup from the underlying icon library so that Font Awesome could be replaced with an alternative in the future (very relevant today and tomorrow).

Some direct uses of Font Awesome classes were inadvertently introduced or overlooked, bypassing this abstraction. This corrects those instances and restores consistency with the intended approach.

Work Completed

Replace all fa- icons with a generic icon-
Verify that the generic icon- classes are correctly mapped to their corresponding Font Awesome icons in _icomoon.scss.
Confirm that the changes do not introduce regressions in existing icon display or styling.
Replace all fa- utilities (eg fa-8x) with generic icon- utilities (i included them all not just the ones currently in use)

Testing Instructions

This includes css and js changes so either npm i or use a pre-built package

The main areas to check are the media manager and that the emptystate pages have a big icon

Additionaly you can create an article and paste the following with the wysiwyg editor disabled and view the article on the front end.

Sample text

<h2>
	Existing Maps
</h2>
<ul>
	<li><span class="fa fa-check"></span>fa fa-check<span class="icon-check"></span>icon-check</li>
	<li><span class="fa fa-times"></span>fa fa-times<span class="icon-times"></span>icon-times</li>
	<li><span class="fa fa-copy"></span>fa fa-copy<span class="icon-copy"></span>icon-copy</li>
	<li><span class="fa fa-diagram-project"></span>fa fa-diagram-project<span class="icon-project-diagram"></span>icon-project-diagram</li>
	<li><span class="fa fa-info-circle"></span>fa fa-info-circle<span class="icon-info-circle"></span>icon-info-circle</li>
	<li><span class="fa fa-exclamation-triangle"></span>fa fa-exclamation-triangle<span class="icon-exclamation-triangle"></span>icon-exclamation-triangle</li>
	<li><span class="fa fa-play"></span>fa fa-play<span class="icon-play"></span>icon-play</li>
	<li><span class="fa fa-question-circle"></span>fa fa-question-circle<span class="icon-question-circle"></span>icon-question-circle</li>
	<li><span class="fa fa-shield-alt"></span>fa fa-shield-alt<span class="icon-shield-alt"></span>icon-shield-alt</li>
	<li><span class="fa fa-spinner"></span>fa fa-spinner<span class="icon-spinner"></span>icon-spinner</li>
	<li><span class="fas fa-globe"></span>fas fa-globe<span class="icon-globe"></span>icon-globe</li>
</ul>
<h2> New Maps</h2>
<ul>
	<li><span class="fa fa-file-archive"></span>fa fa-file-archive<span class="icon-file-archive"></span>icon-file-archive</li>
	<li><span class="fa fa-close"></span>fa fa-close<span class="icon-close"></span>icon-close</li>
	<li><span class="fa fa-hdd"></span>fa fa-hdd<span class="icon-hdd"></span>icon-hdd</li>
	<li><span class="fa fa-i-cursor"></span>fa fa-i-cursor<span class="icon-i-cursor"></span>icon-i-cursor</li>
	<li><span class="fa fa-keyboard"></span>fa fa-keyboard<span class="icon-keyboard"></span>icon-keyboard</li>
	<li><span class="fa fa-moon"></span>fa fa-moon<span class="icon-moon"></span>icon-moon</li>
	<li><span class="fa fa-notes-medical"></span>fa fa-notes-medical<span class="icon-notes-medical"></span>icon-notes-medical</li>
	<li><span class="fa fa-redo"></span>fa fa-redo<span class="icon-redo-3"></span>icon-redo-3</li>
	<li><span class="fa fa-running"></span>fa fa-running<span class="icon-running"></span>icon-running</li>
	<li><span class="fa fa-sun"></span>fa fa-sun<span class="icon-sun"></span>icon-sun</li>
	<li><span class="fas fa-sort-amount-down-alt"></span>fas fa-sort-amount-down-alt<span class="icon-sort-amount-down"></span>icon-sort-amount-down</li>
	<li><span class="fas fa-arrows-spin"></span>fas fa-arrows-spin<span class="icon-arrows-spin"></span>icon-arrows-spin</li>
	<li><span class="fas fa-clone"></span>fas fa-clone<span class="icon-clone"></span>icon-clone</li>
	<li><span class="fas fa-file"></span>fas fa-file<span class="icon-file"></span>icon-file</li>
	<li><span class="fas fa-file-audio"></span>fas fa-file-audio<span class="icon-file-audio"></span>icon-file-audio</li>
	<li><span class="fas fa-file-video"></span>fas fa-file-video<span class="icon-file-video"></span>icon-file-video</li>
	<li><span class="fas fa-link"></span>fas fa-link<span class="icon-link"></span>icon-link</li>
	<li><span class="fas fa-repeat"></span>fas fa-repeat<span class="icon-repeat"></span>icon-repeat</li>
</ul>

Actual result BEFORE applying this Pull Request

The existing maps section includes two identical icons
The new maps section only has one icon

Expected result AFTER applying this Pull Request

Both sections have two identical icons

Link to documentations

Please select:
Documentation changes will be required to both the guide and the manual - i will co-ordinate this with Thomas Finnern and @HermanPeeren

• Documentation link for guide.joomla.org:

• No documentation changes for guide.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed