EE Debug's Font Awesome CSS tag is too aggressive

[jcogs-design]

Description of the problem
When EE debug is enabled EE loads a custom stylesheet to support this element of the output.
The CSS is loaded late in the build of the page, and it is not clear that it would be possible to load any other CSS after the debug CSS loads.
The EE6 debug CSS includes a rule that makes an aggressive selection of font awesome tags - selecting any tag with .fa or .fas classes, but also links these to the Font Awesome 5 font-family for the "Free" icon list.
On installations that use either earlier versions of Font Awesome in their setup, or are using icons that do not appear in the Font Awesome 5 free icon list, this aggressive selector effectively removes icons from the template output - by replacing the actual icon with an empty square box except in the cases where the icon used overlaps with a FA5 free icon.

How To Reproduce
As described

Screenshots / Videos / Template Code
Debugging disabled

Debugging enabled

Environment Details:

• Version: 6.4.12
• PHP Version 8.1

Possible Solution
Limit the .fa and .fas selectors within the ee-debug css to only apply to elements within the ee-debug div.