Using/Fixing Pseudo Elements with FontAwesome 6

If you are starting a new site, or upgrading an existing one, that uses FontAwesome with pseudo elements you will have to make some specific changes. First, instead of using the standard script tag on a Page Layout's "Additional <head> tags" section you will need to make sure it includes the specific data line "data-search-pseudo-elements".

<!-- Replace **SPECIFIC_KIT_NUMBER** with the correct number for which kit youd like to include -->
<script data-search-pseudo-elements src="https://kit.fontawesome.com/**SPECIFIC_KIT_NUMBER**.js" crossorigin="anonymous"></script>

CSS Changes

Now that you have used the correct script tag you will have to update the CSS to match. Before this, you would put all of the styling on the pseudo element itself, now it will need to be on a svg selector instead. Instead, you will need to "display: none;" the pseudo element itself apply the styles to a "svg" selector.

/* Put the content tag, font-family and font-weight on the pseudo element like nornal, but now we need to hide it */
#left .accordion li:after {
	content: "\f054";
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	display: none;
}
/* Put specific styling options on an svg selector instead like position and color */
#left .accordion li svg {
	position: absolute;
	right: -7px;
	top: calc(50% - 9px);
	color: #ff00ff;
}